improved colab feature for separate doc

Author: ayush-AI

package-lock.json

@@ -16,11 +16,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-quill": "^2.0.0",
-    "socket.io-client": "^4.7.2"
+    "react-router-dom": "^6.15.0",
+    "socket.io-client": "^4.7.2",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.3",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

package.json

@@ -1,10 +1,17 @@
 import './App.css'
 import Editor from './components/Editor';
+import { BrowserRouter as Router, Route, Routes, Navigate }  from 'react-router-dom';
+import {v4 as uuidV4} from 'uuid';
 
 function App() {
 
   return (
-   <Editor />
+   <Router>
+      <Routes>
+        <Route path="/" element={<Navigate to={`/document/${uuidV4()}`}/>} />
+        <Route path="/document/:id" element={<Editor />} />
+      </Routes>
+   </Router>
   )
 }
 

src/App.tsx

@@ -4,13 +4,14 @@ import { modules, formats } from '../utils/QuillConfig';
 import 'react-quill/dist/quill.snow.css';
 import { Box } from '@mui/material';
 import { io, Socket } from 'socket.io-client';
+import { useParams } from 'react-router-dom';
 
 function Editor() {
     const [value, setValue] = useState('');
     const [socket, setSocket] = useState<Socket>();
     const quillRef = useRef(null);
+    const { id: documentId } = useParams();
 
-
     useEffect(() => {
         const s = io('http://localhost:9000');
         setSocket(s);
@@ -19,6 +20,20 @@ function Editor() {
         }
     },[]);
 
+    useEffect(() => { 
+        quillRef.current?.getEditor().disable();
+        quillRef.current?.getEditor().setText('Loading...');
+    },[]);
+
+    useEffect(() => {
+        if(socket == null || quillRef == null) return;
+        socket.once('load-document', document => {
+            quillRef.current?.getEditor().setContents(document);
+            quillRef.current?.getEditor().enable();
+        });
+        socket.emit('get-document', documentId);
+    },[socket, quillRef]);
+
     useEffect(() => {
         if(socket == null || quillRef == null) return;