Add file-related functions and update workspace header and editor components

kaifcoder · kaifcoder · commit 472a0fc0b8f4 · 2024-03-04T18:39:03.000+05:30
diff --git a/app/(routes)/workspace/[fileId]/page.tsx b/app/(routes)/workspace/[fileId]/page.tsx
@@ -1,12 +1,15 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import WorkSpaceHeader from "../_components/WorkSpaceHeader";
 import dynamic from "next/dynamic";
+import { useConvex } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import { FILE } from "../../dashboard/_components/DashboardTable";
 
 export const Editor = dynamic(() => import("../_components/Editor"), {
   ssr: false,
@@ -16,7 +19,22 @@ export const Canvas = dynamic(() => import("../_components/Canvas"), {
   ssr: false,
 });
 
-const Workspace = () => {
+const Workspace = ({ params }: any) => {
+  const convex = useConvex();
+
+  const [fileData, setfileData] = useState<FILE>();
+
+  useEffect(() => {
+    params.fileId && getFileData();
+  }, []);
+
+  const getFileData = async () => {
+    const file = await convex.query(api.files.getFilebyId, {
+      _id: params.fileId,
+    });
+
+    setfileData(file);
+  };
   const Tabs = [
     {
       name: "Document",
@@ -30,21 +48,30 @@ const Workspace = () => {
   ];
 
   const [activeTab, setActiveTab] = useState(Tabs[1].name);
-
+  const [triggerSave, setTriggerSave] = useState(false);
+  const [whiteBoard, setWhiteBoard] = useState<any>(
+    fileData && fileData.whiteboard ? JSON.parse(fileData.whiteboard) : null
+  );
   return (
     <div className="overflow-hidden w-full">
       <WorkSpaceHeader
         Tabs={Tabs}
         setActiveTab={setActiveTab}
         activeTab={activeTab}
+        onSave={() => setTriggerSave(!triggerSave)}
+        file={fileData}
       />
       {activeTab === "Document" ? (
         <div
           style={{
             height: "calc(100vh - 3rem)",
           }}
         >
-          <Editor />
+          <Editor
+            onSaveTrigger={triggerSave}
+            fileId={params.fileId}
+            fileData={fileData!}
+          />
         </div>
       ) : activeTab === "Both" ? (
         <ResizablePanelGroup
@@ -53,12 +80,22 @@ const Workspace = () => {
           }}
           direction="horizontal"
         >
-          <ResizablePanel defaultSize={100} minSize={40} collapsible={false}>
-            <Editor />
+          <ResizablePanel defaultSize={50} minSize={40} collapsible={false}>
+            <Editor
+              onSaveTrigger={triggerSave}
+              fileId={params.fileId}
+              fileData={fileData!}
+            />
           </ResizablePanel>
           <ResizableHandle className=" bg-neutral-600" />
-          <ResizablePanel defaultSize={100} minSize={45}>
-            <Canvas />
+          <ResizablePanel defaultSize={50} minSize={45}>
+            <Canvas
+              onSaveTrigger={triggerSave}
+              fileId={params.fileId}
+              fileData={fileData!}
+              whiteBoard={whiteBoard}
+              setWhiteBoard={setWhiteBoard}
+            />
           </ResizablePanel>
         </ResizablePanelGroup>
       ) : activeTab === "Canvas" ? (
@@ -67,7 +104,13 @@ const Workspace = () => {
             height: "calc(100vh - 3rem)",
           }}
         >
-          <Canvas />
+          <Canvas
+            onSaveTrigger={triggerSave}
+            fileId={params.fileId}
+            fileData={fileData!}
+            whiteBoard={whiteBoard}
+            setWhiteBoard={setWhiteBoard}
+          />
         </div>
       ) : null}
     </div>
diff --git a/app/(routes)/workspace/_components/Canvas.tsx b/app/(routes)/workspace/_components/Canvas.tsx
@@ -1,12 +1,100 @@
 "use client";
-import React from "react";
-import { Excalidraw } from "@excalidraw/excalidraw";
+import React, { useEffect, useRef, useState } from "react";
+import { Excalidraw, MainMenu, WelcomeScreen } from "@excalidraw/excalidraw";
+import { FILE } from "../../dashboard/_components/DashboardTable";
+import { useMutation } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import { toast } from "sonner";
+
+const Canvas = ({
+  onSaveTrigger,
+  fileId,
+  fileData,
+  whiteBoard,
+  setWhiteBoard,
+}: {
+  onSaveTrigger: any;
+  fileId: any;
+  fileData: FILE;
+  whiteBoard: any;
+  setWhiteBoard: any;
+}) => {
+  useEffect(() => {
+    saveWhiteboard();
+  }, [onSaveTrigger]);
+
+  const updateWhiteBoard = useMutation(api.files.updateWhiteboard);
+
+  const saveWhiteboard = () => {
+    updateWhiteBoard({
+      _id: fileId,
+      whiteboard: JSON.stringify(whiteBoard),
+    })
+      .then(() => {
+        toast.success("Canvas saved");
+      })
+      .catch((e) => {
+        toast.error("Error saving canvas");
+      });
+  };
 
-const Canvas = () => {
   return (
     <>
       <div className="h-full w-full">
-        <Excalidraw theme="dark" />
+        {fileData && fileData.whiteboard ? (
+          <Excalidraw
+            theme="dark"
+            initialData={{
+              elements: fileData && JSON.parse(fileData?.whiteboard),
+            }}
+            UIOptions={{
+              canvasActions: {
+                export: false,
+                loadScene: false,
+                saveAsImage: false,
+              },
+            }}
+            onChange={(excaliDrawElements, appState, files) => {
+              setWhiteBoard(excaliDrawElements);
+            }}
+          >
+            <MainMenu>
+              <MainMenu.DefaultItems.ClearCanvas />
+              <MainMenu.DefaultItems.Help />
+              <MainMenu.DefaultItems.ChangeCanvasBackground />
+            </MainMenu>
+            <WelcomeScreen>
+              <WelcomeScreen.Hints.MenuHint />
+              <WelcomeScreen.Hints.ToolbarHint />
+              <WelcomeScreen.Hints.HelpHint />
+            </WelcomeScreen>
+          </Excalidraw>
+        ) : (
+          <Excalidraw
+            theme="dark"
+            UIOptions={{
+              canvasActions: {
+                export: false,
+                loadScene: false,
+                saveAsImage: false,
+              },
+            }}
+            onChange={(excaliDrawElements, appState, files) => {
+              setWhiteBoard(excaliDrawElements);
+            }}
+          >
+            <MainMenu>
+              <MainMenu.DefaultItems.ClearCanvas />
+              <MainMenu.DefaultItems.Help />
+              <MainMenu.DefaultItems.ChangeCanvasBackground />
+            </MainMenu>
+            <WelcomeScreen>
+              <WelcomeScreen.Hints.MenuHint />
+              <WelcomeScreen.Hints.ToolbarHint />
+              <WelcomeScreen.Hints.HelpHint />
+            </WelcomeScreen>
+          </Excalidraw>
+        )}
       </div>
     </>
   );
diff --git a/app/(routes)/workspace/_components/Editor.tsx b/app/(routes)/workspace/_components/Editor.tsx
@@ -1,52 +1,95 @@
 "use client";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import EditorJs from "@editorjs/editorjs";
 import Header from "@editorjs/header";
 // @ts-ignore
 import List from "@editorjs/list";
 // @ts-ignore
 import checkList from "@editorjs/checklist";
+import { Edu_QLD_Beginner } from "next/font/google";
+import { useMutation } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import { toast } from "sonner";
+import { FILE } from "../../dashboard/_components/DashboardTable";
 
-const rawDocument = {};
+const rawDocument = {
+  time: 1550476186479,
+  blocks: [
+    {
+      id: "oUq2g_tl8y",
+      type: "header",
+      data: {
+        text: "Untitled Document",
+        level: 2,
+      },
+    },
+  ],
+  version: "2.8.1",
+};
 
-const Editor = () => {
+const Editor = ({
+  onSaveTrigger,
+  fileId,
+  fileData,
+}: {
+  onSaveTrigger: any;
+  fileId: any;
+  fileData: FILE;
+}) => {
   const ref = useRef<EditorJs>();
+  const [document, setDocument] = useState(rawDocument);
+
+  const updateDocument = useMutation(api.files.updateDocument);
+
+  useEffect(() => {
+    fileData && initEditor();
+  }, [fileData]);
+
   useEffect(() => {
-    initEditor();
-  }, []);
+    console.log("triggered" + onSaveTrigger);
+    onDocumentSave();
+  }, [onSaveTrigger]);
 
   const initEditor = () => {
     const editor = new EditorJs({
       holder: "editorjs",
       placeholder: "Let`s write an awesome story!",
-
       tools: {
         header: {
           // @ts-ignore
           class: Header,
           inlineToolbar: true,
           shortcut: "CMD+SHIFT+H",
+          placeholder: "Enter a heading",
         },
         list: List,
         checklist: checkList,
       },
+      data: fileData.document ? JSON.parse(fileData.document) : document,
+    });
+    editor.isReady.then(() => {
+      ref.current = editor;
     });
-    editor.isReady
-      .then(() => {
-        console.log("Editor.js is ready to work!");
-      })
-      .catch((reason) => {
-        console.log(`Editor.js initialization failed because of ${reason}`);
+  };
+
+  const onDocumentSave = async () => {
+    if (ref.current) {
+      const savedData = await ref.current.save();
+      const resp = await updateDocument({
+        _id: fileId,
+        document: JSON.stringify(savedData),
       });
-    ref.current = editor;
+
+      toast.success("Document Saved");
+    }
   };
 
   return (
     <div className="p-2">
-      <h1 className="text-white text-lg font-medium">Editor</h1>
       <div
         className="text-white selection:text-black selection:bg-neutral-400 overflow-x-hidden overflow-y-auto w-full pr-4 pl-2 h-[85vh] mb-4"
         id="editorjs"
+        key={"editorjs"}
       ></div>
     </div>
   );
diff --git a/app/(routes)/workspace/_components/WorkSpaceHeader.tsx b/app/(routes)/workspace/_components/WorkSpaceHeader.tsx
@@ -1,24 +1,26 @@
 "use client";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import {
-  GitBranch,
-  GitBranchPlus,
-  Github,
-  Info,
-  Link,
-  MoreHorizontal,
-  Save,
-} from "lucide-react";
+
+import { Github, Info, Link, MoreHorizontal, Save } from "lucide-react";
 import React from "react";
 
-const WorkSpaceHeader = ({ Tabs, setActiveTab, activeTab }: any) => {
+const WorkSpaceHeader = ({
+  Tabs,
+  setActiveTab,
+  activeTab,
+  onSave,
+  file,
+}: any) => {
   return (
     <div className="border-b border-neutral-800 h-12 flex items-center px-4 w-full">
       {/* file name portion */}
       <div className="flex space-x-2 items-center justify-start w-full">
         <img src="/logo.svg" alt="logo" className="w-8 h-8" />
         <div>
-          <h1 className="text-sm font-medium">File Name</h1>
+          <h1 className="text-sm font-medium">
+            {file ? file.fileName : "Untitled"}
+          </h1>
         </div>
         <div className="rounded-sm hover:bg-neutral-700 hover:text-white cursor-pointer p-1">
           <MoreHorizontal size={16} />
@@ -60,7 +62,10 @@ const WorkSpaceHeader = ({ Tabs, setActiveTab, activeTab }: any) => {
           Give Star on GitHub
           <Github size={16} className="ml-2" />
         </div>
-        <div className="rounded-sm flex text-sm items-center bg-blue-700 hover:bg-blue-800 hover:text-white cursor-pointer px-2 py-1">
+        <div
+          onClick={() => onSave()}
+          className="rounded-sm flex text-sm items-center bg-blue-700 hover:bg-blue-800 hover:text-white cursor-pointer px-2 py-1"
+        >
           <Save size={20} />
         </div>
         <div className="rounded-sm flex text-sm items-center bg-blue-700 hover:bg-blue-800 hover:text-white cursor-pointer px-2 py-1">
diff --git a/convex/files.tsx b/convex/files.tsx
