|
| 1 | +/* |
| 2 | + * This file is part of CoCalc: Copyright © 2024 Sagemath, Inc. |
| 3 | + * License: MS-RSL – see LICENSE.md for details |
| 4 | + */ |
| 5 | + |
| 6 | +import { merge, sortBy, throttle, uniq, xor } from "lodash"; |
| 7 | +import { useState } from "react"; |
| 8 | +import useAsyncEffect from "use-async-effect"; |
| 9 | + |
| 10 | +import api from "@cocalc/frontend/client/api"; |
| 11 | +import { STARRED_FILES } from "@cocalc/util/consts/bookmarks"; |
| 12 | +import { |
| 13 | + GetStarredBookmarks, |
| 14 | + GetStarredBookmarksPayload, |
| 15 | + SetStarredBookmarks, |
| 16 | +} from "@cocalc/util/types/bookmarks"; |
| 17 | +import { |
| 18 | + FlyoutActiveStarred, |
| 19 | + getFlyoutActiveStarred, |
| 20 | + storeFlyoutState, |
| 21 | +} from "./state"; |
| 22 | + |
| 23 | +// Additionally to local storage, we back the state of the starred files in the database. |
| 24 | +// Errors with the API are ignored, because we primarily rely on local storage. |
| 25 | +// The only really important situation to think of are when there is nothing in local storage but in the database, |
| 26 | +// or when there is |
| 27 | +export function useStarredFilesManager(project_id: string) { |
| 28 | + const [starred, setStarred] = useState<FlyoutActiveStarred>( |
| 29 | + getFlyoutActiveStarred(project_id), |
| 30 | + ); |
| 31 | + |
| 32 | + // once after mounting this, we update the starred bookmarks (which merges with what we have) and then stores it |
| 33 | + useAsyncEffect(async () => { |
| 34 | + await updateStarred(); |
| 35 | + }, []); |
| 36 | + |
| 37 | + function setStarredLS(starred: string[]) { |
| 38 | + setStarred(starred); |
| 39 | + storeFlyoutState(project_id, "active", { starred: starred }); |
| 40 | + } |
| 41 | + |
| 42 | + // TODO: there are also add/remove API endpoints, but for now we stick with set. Hardly worth optimizing. |
| 43 | + function setStarredPath(path: string, starState: boolean) { |
| 44 | + const next = starState |
| 45 | + ? [...starred, path] |
| 46 | + : starred.filter((p) => p !== path); |
| 47 | + setStarredLS(next); |
| 48 | + storeStarred(next); |
| 49 | + } |
| 50 | + |
| 51 | + async function storeStarred(stars: string[]) { |
| 52 | + try { |
| 53 | + const payload: SetStarredBookmarks = { |
| 54 | + type: STARRED_FILES, |
| 55 | + project_id, |
| 56 | + stars, |
| 57 | + }; |
| 58 | + await api("bookmarks/set", payload); |
| 59 | + } catch (err) { |
| 60 | + console.error("api error", err); |
| 61 | + } |
| 62 | + } |
| 63 | + |
| 64 | + // this is called once, when the flyout/tabs component is mounted |
| 65 | + // throtteld, to usually take 1 sec from opening the panel to loading the stars |
| 66 | + const updateStarred = throttle( |
| 67 | + async () => { |
| 68 | + try { |
| 69 | + const payload: GetStarredBookmarksPayload = { |
| 70 | + type: STARRED_FILES, |
| 71 | + project_id, |
| 72 | + }; |
| 73 | + const data: GetStarredBookmarks = await api("bookmarks/get", payload); |
| 74 | + |
| 75 | + const { type, status } = data; |
| 76 | + |
| 77 | + if (type !== STARRED_FILES) { |
| 78 | + console.error( |
| 79 | + `flyout/store/starred type must be ${STARRED_FILES} but we got`, |
| 80 | + type, |
| 81 | + ); |
| 82 | + return; |
| 83 | + } |
| 84 | + |
| 85 | + if (status === "success") { |
| 86 | + const { stars } = data; |
| 87 | + if ( |
| 88 | + Array.isArray(stars) && |
| 89 | + stars.every((x) => typeof x === "string") |
| 90 | + ) { |
| 91 | + stars.sort(); // sorted for the xor check below |
| 92 | + const next = sortBy(uniq(merge(starred, stars))); |
| 93 | + setStarredLS(next); |
| 94 | + if (xor(stars, next).length > 0) { |
| 95 | + // if there is a change (e.g. nothing in the database stored yet), store the stars |
| 96 | + await storeStarred(next); |
| 97 | + } |
| 98 | + } else { |
| 99 | + console.error("flyout/store/starred invalid payload", stars); |
| 100 | + } |
| 101 | + } else if (status === "error") { |
| 102 | + const { error } = data; |
| 103 | + console.error("flyout/store/starred error", error); |
| 104 | + } else { |
| 105 | + console.error("flyout/store/starred error: unknown status", status); |
| 106 | + } |
| 107 | + } catch (err) { |
| 108 | + console.error("api error", err); |
| 109 | + } |
| 110 | + }, |
| 111 | + 1000, |
| 112 | + { trailing: true, leading: false }, |
| 113 | + ); |
| 114 | + |
| 115 | + return { |
| 116 | + starred, |
| 117 | + setStarredPath, |
| 118 | + }; |
| 119 | +} |
0 commit comments