Spaces:
Paused
Paused
File size: 3,235 Bytes
b152fd5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | import { useCallback, useEffect, useMemo, useState } from "react";
import type { Project } from "@paperclipai/shared";
import {
getProjectOrderStorageKey,
PROJECT_ORDER_UPDATED_EVENT,
readProjectOrder,
sortProjectsByStoredOrder,
writeProjectOrder,
} from "../lib/project-order";
type UseProjectOrderParams = {
projects: Project[];
companyId: string | null | undefined;
userId: string | null | undefined;
};
type ProjectOrderUpdatedDetail = {
storageKey: string;
orderedIds: string[];
};
function areEqual(a: string[], b: string[]) {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i += 1) {
if (a[i] !== b[i]) return false;
}
return true;
}
function buildOrderIds(projects: Project[], orderedIds: string[]) {
return sortProjectsByStoredOrder(projects, orderedIds).map((project) => project.id);
}
export function useProjectOrder({ projects, companyId, userId }: UseProjectOrderParams) {
const storageKey = useMemo(() => {
if (!companyId) return null;
return getProjectOrderStorageKey(companyId, userId);
}, [companyId, userId]);
const [orderedIds, setOrderedIds] = useState<string[]>(() => {
if (!storageKey) return projects.map((project) => project.id);
return buildOrderIds(projects, readProjectOrder(storageKey));
});
useEffect(() => {
const nextIds = storageKey
? buildOrderIds(projects, readProjectOrder(storageKey))
: projects.map((project) => project.id);
setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
}, [projects, storageKey]);
useEffect(() => {
if (!storageKey) return;
const syncFromIds = (ids: string[]) => {
const nextIds = buildOrderIds(projects, ids);
setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
};
const onStorage = (event: StorageEvent) => {
if (event.key !== storageKey) return;
syncFromIds(readProjectOrder(storageKey));
};
const onCustomEvent = (event: Event) => {
const detail = (event as CustomEvent<ProjectOrderUpdatedDetail>).detail;
if (!detail || detail.storageKey !== storageKey) return;
syncFromIds(detail.orderedIds);
};
window.addEventListener("storage", onStorage);
window.addEventListener(PROJECT_ORDER_UPDATED_EVENT, onCustomEvent);
return () => {
window.removeEventListener("storage", onStorage);
window.removeEventListener(PROJECT_ORDER_UPDATED_EVENT, onCustomEvent);
};
}, [projects, storageKey]);
const orderedProjects = useMemo(
() => sortProjectsByStoredOrder(projects, orderedIds),
[projects, orderedIds],
);
const persistOrder = useCallback(
(ids: string[]) => {
const idSet = new Set(projects.map((project) => project.id));
const filtered = ids.filter((id) => idSet.has(id));
for (const project of projects) {
if (!filtered.includes(project.id)) filtered.push(project.id);
}
setOrderedIds((current) => (areEqual(current, filtered) ? current : filtered));
if (storageKey) {
writeProjectOrder(storageKey, filtered);
}
},
[projects, storageKey],
);
return {
orderedProjects,
orderedIds,
persistOrder,
};
}
|