feat: integrate plugin-sdk

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@dytesdk/plugin-sdk": "^2.0.4",
     "axios": "^1.4.0",
     "core-js": "^3.30.2",
     "react": "^18.2.0",

src/App.tsx

@@ -4,15 +4,18 @@ import { Document, Dashboard } from './pages'
 import { MainContext } from './context'
 
 const App = () => {
-  const { document } = useContext(MainContext);
+  const { doc, plugin } = useContext(MainContext);
 
   return (
     <div className='container'>
       {
-        document 
-        ? <Document />
-        : <Dashboard />
+        plugin ? 
+          doc 
+            ? <Document plugin={plugin} /> 
+            : <Dashboard />
+          : <div>Loading Plugin...</div>
       }
+
     </div>
   )
 }

src/components/toolbar/Toolbar.tsx

@@ -9,7 +9,7 @@ interface ToolbarRightProps {
   scale: number;
   activeColor: string;
   activeTool: ToolbarState;
-  onNewFile: () => void;
+  onBack: () => void;
   setActiveColor: (col: string) => void;
   selectActiveTool: (state: ToolbarState) => void;
 }
@@ -27,7 +27,7 @@ const ToolbarRight = (props: ToolbarRightProps) => {
     scale,
     activeTool,
     activeColor,
-    onNewFile,
+    onBack,
     setActiveColor,
     selectActiveTool,
   } = props;
@@ -56,12 +56,12 @@ const ToolbarRight = (props: ToolbarRightProps) => {
   return (
     <div className="toolbar-right">
       <div className="row">
-        <Icon icon="add_file" className="new-file-tool" onClick={onNewFile} />
         <div className="toolbar-page">
           <Icon onClick={() => updateTool('zoom-in-tool')} className="toolbar-icon" icon='zoomIn' />
           <span>{Math.round(scale * 100)}%</span>
           <Icon onClick={() => updateTool('zoom-out-tool')} className="toolbar-icon" icon='zoomOut' />
         </div>
+        <Icon icon="dismiss" className="back-icon" onClick={onBack} />
       </div>
       <div className="toolbar-tools">
         {

src/components/toolbar/toolbar.css

@@ -4,8 +4,8 @@
 .toolbar-right {
     @apply fixed top-2 right-2 z-50 flex flex-col items-end;
 }
-.new-file-tool {
-    @apply bg-blue-600 rounded-md h-9 w-12 text-white mx-2 cursor-pointer border-[1px] border-solid border-blue-900;
+.back-icon {
+    @apply bg-gray-600 rounded-md h-9 w-9 p-1 text-white ml-2 cursor-pointer border-[1px] border-solid border-blue-900;
 }
 .toolbar-icon {
     @apply h-auto !w-7 cursor-pointer;

src/context/index.tsx

@@ -1,12 +1,83 @@
-import React, { useState } from 'react'
+import DytePlugin from '@dytesdk/plugin-sdk';
+import React, { useEffect, useState } from 'react'
 
 const MainContext = React.createContext<any>({});
 
 const MainProvider = ({ children }: { children: any }) => {
-    const [document, setDocument] = useState<string>();
+    const [base, setBase] = useState<string>('');
+    const [userId, setUserId] = useState<string>('');
+    const [plugin, setPlugin] = useState<DytePlugin>();
+    const [doc, updateDocument] = useState<string>();
+    const [currentPage, updateCurrentPage] = useState<number>(0);
+    const [data, updateData] = useState<{[key: number]: string}>({});
+
+    const setDocument = async (url: string) => {
+        if (plugin) {
+            await plugin.stores.get('doc').set('url', url);
+        }
+    }
+    const setCurrentPage = async (page: number) => {
+        await setData();
+        if (plugin) {
+            await plugin.stores.get('doc').set('page', page);
+        }
+    };
+    const setData = async () => {
+        const svg = document.getElementById('svg');
+        if (!svg) return;
+        if (plugin) {
+            await plugin.stores.get('doc').set('annotations', { ...data, [currentPage]: svg.innerHTML });
+        }
+    }
+
+
+    const loadPlugin = async () => {
+        // initialize the SDK
+        const dytePlugin = DytePlugin.init();
+
+        // fetch data for a store
+        await dytePlugin.stores.populate('doc');
+
+        // define constants used across the app
+        const id = await dytePlugin.room.getID();
+        const userId = await dytePlugin.room.getPeer();
+        setBase(id.payload.roomName);
+        setUserId(userId.payload.peer.id);
+
+        // subscribe to store
+        const store = dytePlugin.stores.create('doc');
+        store.subscribe('url', ({ url }) => {
+            updateDocument(url);
+        });
+        store.subscribe('page', ({ page }) => {
+            updateCurrentPage(page);
+        });
+        store.subscribe('annotations', ({ annotations }) => {
+            updateData(annotations);
+        });
+
+        // load initial data
+        const currUrl = store.get('url');
+        const currPage = store.get('page');
+        const currAnnotations = store.get('annotations');
+        if (currUrl) updateDocument(currUrl);
+        if (currPage) updateCurrentPage(currPage);
+        if (currAnnotations) updateData(currAnnotations);
+        setPlugin(dytePlugin);
+    }
+
+    useEffect(() => {
+        loadPlugin();
+        return () => {
+            if (!plugin) return;
+            plugin.removeListeners('remote-erase-all');
+            plugin.removeListeners('remote-el');
+            plugin.removeListeners('remote-erase');
+        }
+    }, [])
 
     return (
-        <MainContext.Provider value={{ document, setDocument }}>
+        <MainContext.Provider value={{ data, base, userId, plugin, doc, currentPage, setDocument, setCurrentPage }}>
             {children}
         </MainContext.Provider>
     )