💥 WOR-8 Optimize documents query

CHANGELOG.md

@@ -11,6 +11,7 @@
   - Fix: page routing & published page
   - Fix: window origin
   - Fix: workspace default icon
+  - Optimize: documents query
   - Remove all `useTree`'s
   - Remove API: `/api/documents`
 - `ui`

apps/worxpace/src/actions/archive-document.ts

@@ -2,7 +2,7 @@
 
 import type { MutationFetcher } from "swr/mutation";
 
-import type { ENTITY_TYPE } from "@swy/prisma";
+import type { Document, ENTITY_TYPE } from "@swy/prisma";
 import { type Modified } from "@swy/ui/lib";
 import { DeleteDocument, type DeleteDocumentInput } from "@swy/validators";
 
@@ -13,7 +13,6 @@ import {
   documents,
   fetchClient,
   UnauthorizedError,
-  type DetailedDocument,
   type DocumentsKey,
 } from "~/lib";
 
@@ -41,7 +40,7 @@ const handler = createMutationFetcher(
 );
 
 export const archiveDocument: MutationFetcher<
-  Modified<DetailedDocument>,
+  Modified<Document>,
   DocumentsKey,
   DeleteDocumentInput
 > = ({ workspaceId }, data) => handler(workspaceId, data);

apps/worxpace/src/actions/create-document.ts

@@ -3,7 +3,7 @@
 import type { MutationFetcher } from "swr/mutation";
 
 import { generateDefaultIcon } from "@swy/notion";
-import type { ENTITY_TYPE } from "@swy/prisma";
+import type { Document, ENTITY_TYPE } from "@swy/prisma";
 import { CreateDocument, type CreateDocumentInput } from "@swy/validators";
 
 import {
@@ -14,7 +14,6 @@ import {
   fetchClient,
   toIcon,
   UnauthorizedError,
-  type DetailedDocument,
   type DocumentsKey,
 } from "~/lib";
 
@@ -43,7 +42,7 @@ const handler = createMutationFetcher(
 );
 
 export const createDocument: MutationFetcher<
-  DetailedDocument,
+  Document,
   DocumentsKey,
   CreateDocumentInput
 > = ({ workspaceId }, data) => handler(workspaceId, data);

apps/worxpace/src/actions/restore-document.ts

@@ -2,7 +2,7 @@
 
 import type { MutationFetcher } from "swr/mutation";
 
-import type { ENTITY_TYPE } from "@swy/prisma";
+import type { Document, ENTITY_TYPE } from "@swy/prisma";
 import { type Modified } from "@swy/ui/lib";
 import { DeleteDocument, type DeleteDocumentInput } from "@swy/validators";
 
@@ -13,7 +13,6 @@ import {
   documents,
   fetchClient,
   UnauthorizedError,
-  type DetailedDocument,
   type DocumentsKey,
 } from "~/lib";
 
@@ -41,7 +40,7 @@ const handler = createMutationFetcher(
 );
 
 export const restoreDocument: MutationFetcher<
-  Modified<DetailedDocument>,
+  Modified<Document>,
   DocumentsKey,
   DeleteDocumentInput
 > = ({ workspaceId }, data) => handler(workspaceId, data);

apps/worxpace/src/actions/update-document.ts

@@ -2,7 +2,7 @@
 
 import type { MutationFetcher } from "swr/mutation";
 
-import type { ENTITY_TYPE } from "@swy/prisma";
+import type { Document, ENTITY_TYPE } from "@swy/prisma";
 import { UpdateDocument, type UpdateDocumentInput } from "@swy/validators";
 
 import {
@@ -12,7 +12,6 @@ import {
   documents,
   fetchClient,
   UnauthorizedError,
-  type DetailedDocument,
   type DocumentKey,
   type DocumentsKey,
 } from "~/lib";
@@ -44,12 +43,12 @@ const handler = createMutationFetcher(UpdateDocument, async (_key, { arg }) => {
 });
 
 export const updateDocument: MutationFetcher<
-  DetailedDocument,
+  Document,
   DocumentsKey,
   UpdateDocumentInput
 > = ({ workspaceId }, data) => handler(workspaceId, data);
 export const updateInternalDocument: MutationFetcher<
-  DetailedDocument,
+  Document,
   DocumentKey,
   UpdateDocumentInput
 > = ({ documentId }, data) => handler(documentId, data);

apps/worxpace/src/app/(platform)/(tools)/_components/page-layout.tsx

@@ -16,6 +16,7 @@ import {
   useEdgeStore,
   useHistory,
   useOthers,
+  usePeopleSettings,
   usePlatform,
   useSelf,
 } from "~/hooks";
@@ -30,10 +31,11 @@ interface PageLayoutProps
 
 const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
   ({ children, pageId, onChangeState, ...navProps }, ref) => {
-    const { accountId, workspaceId } = usePlatform();
+    const { accountId, workspaceId, clerkId } = usePlatform();
     const currentUser = useSelf();
     const otherUsers = useOthers();
-    const { fetchPages } = useDocuments({ workspaceId });
+    const { fetchPages } = useDocuments({ clerkId, workspaceId });
+    const { memberships } = usePeopleSettings({ clerkId, workspaceId });
     const {
       page: doc,
       isLoading,
@@ -68,7 +70,7 @@ const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
       <PageProvider
         className="order-3 flex size-full flex-col overflow-hidden"
         isLoading={isLoading}
-        page={toPage(doc)}
+        page={toPage(doc, memberships)}
         currentUser={currentUser}
         otherUsers={otherUsers}
         fetchLogs={fetchLogs}

apps/worxpace/src/app/(platform)/(tools)/_components/workspace-layout.tsx

@@ -55,7 +55,7 @@ const WorkspaceLayout: React.FC<WorkspaceLayoutProps> = ({
   const { edgestore } = useEdgeStore();
   const store = useSettingsStore();
   const { isLoading, fetchPages, create, archive, restore, remove } =
-    useDocuments({ workspaceId });
+    useDocuments({ clerkId, workspaceId });
   const {
     settings,
     updateAccount,

apps/worxpace/src/app/(platform)/(tools)/workflow/_components/workflow-item.tsx

@@ -11,12 +11,14 @@ import { useDocuments } from "~/hooks";
 import { toIconInfo, type WorkflowContent } from "~/lib";
 
 interface WorkflowItemProps {
+  clerkId: string;
   accountId: string;
   workspaceId: string;
   workflow: Document;
 }
 
 const WorkflowItem = ({
+  clerkId,
   accountId,
   workspaceId,
   workflow,
@@ -25,7 +27,7 @@ const WorkflowItem = ({
   const { id, title, icon, content: $content } = workflow;
   const content = JSON.parse($content!) as WorkflowContent;
   /** Actions */
-  const { archive, update } = useDocuments({ workspaceId });
+  const { archive, update } = useDocuments({ clerkId, workspaceId });
   const onPublishFlow = async (id: string, publish: boolean) => {
     const newContent = JSON.stringify({ ...content, isPublished: publish });
     await update({

apps/worxpace/src/app/(platform)/(tools)/workflow/_components/workflows.tsx

@@ -5,12 +5,13 @@ import TableHeader from "./table-header";
 import WorkflowItem from "./workflow-item";
 
 interface WorkflowsProps {
+  clerkId: string;
   accountId: string;
   workspaceId: string;
 }
 
-const Workflows = ({ accountId, workspaceId }: WorkflowsProps) => {
-  const { documents, isLoading } = useDocuments({ workspaceId });
+const Workflows = ({ clerkId, accountId, workspaceId }: WorkflowsProps) => {
+  const { documents, isLoading } = useDocuments({ clerkId, workspaceId });
   const workflows = documents?.filter(
     ({ type, isArchived }) => type === "workflow" && !isArchived,
   );
@@ -24,6 +25,7 @@ const Workflows = ({ accountId, workspaceId }: WorkflowsProps) => {
           : workflows.map((workflow) => (
               <WorkflowItem
                 key={workflow.id}
+                clerkId={clerkId}
                 accountId={accountId}
                 workspaceId={workspaceId}
                 workflow={workflow}

apps/worxpace/src/app/(platform)/(tools)/workflow/page.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from "~/hooks";
 import Workflows from "./_components/workflows";
 
 const Page = () => {
-  const { accountId, workspaceId } = usePlatform();
+  const { clerkId, accountId, workspaceId } = usePlatform();
   // const page = {
   //   workspaceId,
   //   id: `workflow:${workspaceId}`,
@@ -23,7 +23,11 @@ const Page = () => {
   return (
     <div className="pb-40">
       <PageHeader preview />
-      <Workflows accountId={accountId} workspaceId={workspaceId} />
+      <Workflows
+        clerkId={clerkId}
+        accountId={accountId}
+        workspaceId={workspaceId}
+      />
     </div>
   );
 };

apps/worxpace/src/app/(platform)/(tools)/workspace/[workspaceId]/page.tsx

@@ -14,8 +14,8 @@ interface Params {
 
 const Workspace = ({ params: { workspaceId } }: Params) => {
   const { activeWorkspace } = useWorkspace();
-  const { accountId } = usePlatform();
-  const { create } = useDocuments({ workspaceId });
+  const { clerkId, accountId } = usePlatform();
+  const { create } = useDocuments({ clerkId, workspaceId });
   /** Action */
   const onSubmit = () =>
     void create({

apps/worxpace/src/hooks/use-document.ts

@@ -5,8 +5,10 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 
+import type { Document } from "@swy/prisma";
+
 import { updateInternalDocument } from "~/actions";
-import { DetailedDocument, documentFetcher, type DocumentKey } from "~/lib";
+import { documentFetcher, type DocumentKey } from "~/lib";
 import { usePlatform } from "./use-platform";
 
 export const useDocument = (info: Omit<DocumentKey, "type"> | null) => {
@@ -18,7 +20,7 @@ export const useDocument = (info: Omit<DocumentKey, "type"> | null) => {
     data: page,
     isLoading,
     error,
-  } = useSWR<DetailedDocument, Error>(key, documentFetcher, {
+  } = useSWR<Document, Error>(key, documentFetcher, {
     onSuccess: (data) => {
       if (!data.isPublished && data.workspaceId !== platform.workspaceId)
         platform.update((prev) => ({ ...prev, workspaceId: data.workspaceId }));

apps/worxpace/src/hooks/use-documents.ts

@@ -6,38 +6,36 @@ import useSWR from "swr";
 import useSWRMutation from "swr/mutation";
 
 import type { DocItemData } from "@swy/notion";
+import { Document } from "@swy/prisma";
 import { useTree } from "@swy/ui/shared";
 
-import {
-  archiveDocument,
-  createDocument,
-  deleteDocument,
-  restoreDocument,
-  updateDocument,
-} from "~/actions";
-import {
-  documentsFetcher,
-  toDocItem,
-  toPage,
-  type DetailedDocument,
-} from "~/lib";
+import * as actions from "~/actions";
+import { documentsFetcher, toDocItem, toPage } from "~/lib";
+import { usePeopleSettings } from "./use-people-settings";
 
 export const useDocuments = ({
+  clerkId,
   workspaceId,
 }: {
+  clerkId: string;
   workspaceId?: string | null;
 }) => {
   const router = useRouter();
   const setNodes = useTree((state) => state.set<DocItemData>);
+  /** Memberships */
+  const { memberships } = usePeopleSettings(
+    workspaceId ? { clerkId, workspaceId } : null,
+  );
   /** Fetcher */
   const key = workspaceId ? { type: "document" as const, workspaceId } : null;
   const {
     data: documents,
     isLoading,
     error,
     mutate,
-  } = useSWR<DetailedDocument[], Error>(key, documentsFetcher, {
-    onSuccess: (data) => setNodes(data.map(toDocItem)),
+  } = useSWR<Document[], Error>(key, documentsFetcher, {
+    onSuccess: (data) =>
+      setNodes(data.map((doc) => toDocItem(doc, memberships))),
     onError: (e) => console.log(`[swr:document]: ${e.message}`),
   });
   const fetchPages = async () => {
@@ -46,29 +44,31 @@ export const useDocuments = ({
   };
   /** Mutations */
   const onError = (e: Error) => toast.error(e.message);
-  const { trigger: create } = useSWRMutation(key, createDocument, {
+  const { trigger: create } = useSWRMutation(key, actions.createDocument, {
     onSuccess: (data) => {
       toast.success(`Page Created: ${data.title}`);
       router.push(`/${data.type}/${data.id}`);
     },
     onError,
   });
-  const { trigger: update } = useSWRMutation(key, updateDocument, { onError });
-  const { trigger: archive } = useSWRMutation(key, archiveDocument, {
+  const { trigger: update } = useSWRMutation(key, actions.updateDocument, {
+    onError,
+  });
+  const { trigger: archive } = useSWRMutation(key, actions.archiveDocument, {
     onSuccess: ({ item }) => {
       toast.success(`"${item.title}" Moved to Trash`);
       router.push(`/workspace/${workspaceId}`);
     },
     onError,
   });
-  const { trigger: restore } = useSWRMutation(key, restoreDocument, {
+  const { trigger: restore } = useSWRMutation(key, actions.restoreDocument, {
     onSuccess: ({ item }) => {
       toast.success(`Restored document "${item.title}"`);
       router.push(`/document/${item.id}`);
     },
     onError,
   });
-  const { trigger: remove } = useSWRMutation(key, deleteDocument, {
+  const { trigger: remove } = useSWRMutation(key, actions.deleteDocument, {
     onSuccess: (data) => {
       toast.success(`Deleted document "${data.item.title}"`);
       router.push(`/workspace/${workspaceId}`);