Fixed Client Workspace Management

code/client/src/App.tsx

@@ -35,7 +35,7 @@ function App() {
                           }
                         />
                         <Route
-                          path="/:id"
+                          path="documents/:id"
                           element={
                             <>
                               <Sidebar />

code/client/src/domain/editor/slate/handlers/input/inputHandlers.ts

@@ -139,8 +139,10 @@ export default (editor: Editor, domainOperations: InputDomainOperations, onForma
    * Handles cursor selection
    */
   function onSelectionChange() {
+    const { selection } = editor;
+    if (!selection) return;
     const styles = CustomEditor.getMarks(editor) as InlineStyle[];
-    domainOperations.updateSelection(editor.selection, styles);
+    domainOperations.updateSelection(selection, styles);
   }
 
   function onBlur() {

code/client/src/domain/workspace/WorkspaceContext.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { useState, createContext, useEffect } from 'react';
-import { WorkspaceResource } from '@notespace/shared/src/workspace/types/resource.ts';
+import { Workspace } from '@notespace/shared/src/workspace/types/workspace.ts';
 import { useCommunication } from '@/services/communication/context/useCommunication.ts';
 import useError from '@domain/error/useError.ts';
 import { useParams } from 'react-router-dom';
 
 export type WorkspaceContextType = {
-  resources: WorkspaceResource[];
+  workspace?: Workspace;
   filePath?: string;
   setFilePath: (path: string) => void;
 };
 
 export const WorkspaceContext = createContext<WorkspaceContextType>({
-  resources: [],
+  workspace: undefined,
   filePath: undefined,
   setFilePath: () => {},
 });
 
 export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
-  const [resources, setResources] = useState<WorkspaceResource[]>([]);
+  const [workspace, setWorkspace] = useState<Workspace | undefined>(undefined);
   const [filePath, setFilePath] = useState<string | undefined>(undefined);
   const { http } = useCommunication();
   const { publishError } = useError();
@@ -27,11 +27,11 @@ export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     if (!wid) return;
     async function getResources() {
-      const res = await http.get(`/workspaces/${wid}`);
-      setResources(res);
+      const ws = await http.get(`/workspaces/${wid}`);
+      setWorkspace(ws);
     }
     getResources().catch(publishError);
   }, [http, publishError, wid]);
 
-  return <WorkspaceContext.Provider value={{ resources, filePath, setFilePath }}>{children}</WorkspaceContext.Provider>;
+  return <WorkspaceContext.Provider value={{ workspace, filePath, setFilePath }}>{children}</WorkspaceContext.Provider>;
 }

code/client/src/services/communication/socket/socketCommunication.ts

@@ -4,7 +4,7 @@ import { OperationEmitter } from '@/services/communication/socket/operationEmitt
 
 type EmitType = (event: string, data?: any) => void;
 type ListenType = (eventHandlers: SocketEventHandlers) => void;
-type ConnectionType = (namespace: string) => void;
+type ConnectionType = () => void;
 export type SocketEventHandlers = Record<string, (...args: any[]) => void>;
 
 export interface SocketCommunication {
@@ -24,11 +24,11 @@ function emit(event: string, data: any) {
     case 'operation':
       operationEmitter.addOperation(...data);
       break;
-    case 'cursor':
+    case 'cursorChange':
       setTimeout(() => socket.emit(event, data), OPERATION_DELAY);
       break;
     default:
-      socket.emit(event, ...data);
+      socket.emit(event, data);
       break;
   }
 }

code/client/src/services/documentServices.ts

@@ -1,21 +1,32 @@
 import { HttpCommunication } from '@/services/communication/http/httpCommunication';
-import { DocumentResource } from '@notespace/shared/src/workspace/types/resource.ts';
+import { DocumentResource, ResourceInputModel, ResourceType } from '@notespace/shared/src/workspace/types/resource.ts';
 
-async function getDocument(http: HttpCommunication, id: string): Promise<DocumentResource> {
-  return await http.get(`/documents/${id}`);
-}
+function documentServices(http: HttpCommunication, wid: string) {
+  async function getDocument(id: string): Promise<DocumentResource> {
+    return await http.get(`/workspaces/${wid}/${id}`);
+  }
 
-async function createDocument(http: HttpCommunication): Promise<string> {
-  const { id } = await http.post('/documents');
-  return id;
-}
+  async function createDocument(name: string): Promise<string> {
+    const resource: ResourceInputModel = { name, type: ResourceType.DOCUMENT };
+    const { id } = await http.post(`/workspaces/${wid}`, resource);
+    return id;
+  }
+
+  async function deleteDocument(id: string) {
+    await http.delete(`/workspace/${wid}/${id}`);
+  }
+
+  async function updateDocument(id: string, name: string) {
+    const resource: Partial<ResourceInputModel> = { name };
+    await http.put(`/workspaces/${wid}/${id}`, resource);
+  }
 
-async function deleteDocument(http: HttpCommunication, id: string) {
-  await http.delete(`/documents/${id}`);
+  return {
+    getDocument,
+    createDocument,
+    deleteDocument,
+    updateDocument,
+  };
 }
 
-export default {
-  getDocument,
-  createDocument,
-  deleteDocument,
-};
+export default documentServices;

code/client/src/services/useDocumentServices.ts

@@ -1,16 +1,13 @@
-import { HttpCommunication } from '@/services/communication/http/httpCommunication';
 import documentServices from '@/services/documentServices';
 import { useMemo } from 'react';
+import { useCommunication } from '@/services/communication/context/useCommunication.ts';
+import { useParams } from 'react-router-dom';
 
-function useDocumentServices(http: HttpCommunication) {
-  return useMemo(
-    () => ({
-      getDocument: (id: string) => documentServices.getDocument(http, id),
-      createDocument: () => documentServices.createDocument(http),
-      deleteDocument: (id: string) => documentServices.deleteDocument(http, id),
-    }),
-    [http]
-  );
+function useDocumentServices() {
+  const { http } = useCommunication();
+  const { wid } = useParams();
+  if (!wid) throw new Error('Cannot use document services outside of a workspace');
+  return useMemo(() => documentServices(http, wid), [http, wid]);
 }
 
 export default useDocumentServices;

code/client/src/ui/components/dialog/Dialog.scss

@@ -0,0 +1,6 @@
+.dialog {
+  .button {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+}

code/client/src/ui/components/dialog/Dialog.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Dialog as MaterialDialog, DialogTitle, DialogContent, TextField, DialogActions, Button } from '@mui/material';
+import './Dialog.scss';
 
 interface Field {
   name: string;
@@ -37,7 +38,7 @@ function Dialog({ title, fields, onSubmit, children }: DialogProps) {
   };
 
   return (
-    <>
+    <div className="dialog">
       <Button onClick={handleOpen} className="button">
         {children}
       </Button>
@@ -66,7 +67,7 @@ function Dialog({ title, fields, onSubmit, children }: DialogProps) {
           </Button>
         </DialogActions>
       </MaterialDialog>
-    </>
+    </div>
   );
 }
 

code/client/src/ui/components/sidebar/Sidebar.tsx

@@ -1,32 +1,13 @@
 import { IoMenu } from 'react-icons/io5';
-import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import './Sidebar.scss';
 import { RiMenuFold2Line, RiMenuFoldLine } from 'react-icons/ri';
 import useWorkspace from '@domain/workspace/useWorkspace.ts';
+import useSidebarState from '@ui/components/sidebar/hooks/useSidebarState.ts';
 
 function Sidebar() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLocked, setIsLocked] = useState(false);
-  const [justClosed, setJustClosed] = useState(false);
-  const { resources } = useWorkspace();
-
-  const handleMouseEnter = () => {
-    if (justClosed) return;
-    setIsOpen(true);
-  };
-
-  const handleClick = () => {
-    setIsLocked(!isLocked && isOpen);
-    setIsOpen(!isLocked && !isOpen);
-    setJustClosed(isLocked);
-  };
-
-  const handleMouseLeave = () => {
-    if (isLocked) return;
-    setIsOpen(false);
-    setJustClosed(false);
-  };
+  const { isOpen, isLocked, handleClick, handleMouseEnter, handleMouseLeave } = useSidebarState();
+  const { workspace } = useWorkspace();
 
   return (
     <div
@@ -51,7 +32,7 @@ function Sidebar() {
         <li>Workspaces</li>
         <li>Settings</li>
 
-        {resources?.map(resource => (
+        {workspace?.resources.map(resource => (
           <li key={resource.id}>
             <Link to={`/workspaces/${resource.id}`}>{resource.name}</Link>
           </li>

code/client/src/ui/components/sidebar/hooks/useSidebarState.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+function useSidebarState() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLocked, setIsLocked] = useState(false);
+  const [justClosed, setJustClosed] = useState(false);
+
+  const handleMouseEnter = () => {
+    if (justClosed) return;
+    setIsOpen(true);
+  };
+
+  const handleClick = () => {
+    setIsLocked(!isLocked && isOpen);
+    setIsOpen(!isLocked && !isOpen);
+    setJustClosed(isLocked);
+  };
+
+  const handleMouseLeave = () => {
+    if (isLocked) return;
+    setIsOpen(false);
+    setJustClosed(false);
+  };
+
+  return {
+    isOpen,
+    isLocked,
+    handleMouseEnter,
+    handleClick,
+    handleMouseLeave,
+  };
+}
+
+export default useSidebarState;

code/client/src/ui/pages/document/Document.tsx

@@ -4,29 +4,22 @@ import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useCommunication } from '@/services/communication/context/useCommunication';
 import useDocumentServices from '@/services/useDocumentServices';
-import './Document.scss';
 import useError from '@domain/error/useError';
 import useWorkspace from '@domain/workspace/useWorkspace';
+import './Document.scss';
 
 function Document() {
   const communication = useCommunication();
-  const services = useDocumentServices(communication.http);
+  const services = useDocumentServices();
   const { http, socket } = communication;
   const fugue = useFugue();
   const { publishError } = useError();
-  const { id } = useParams();
+  const { wid, id } = useParams();
   const [title, setTitle] = useState('');
   const [loaded, setLoaded] = useState(false);
   const { setFilePath } = useWorkspace();
   const navigate = useNavigate();
 
-  // useEffect(() => {
-  //   socket.connect('/documents');
-  //   return () => {
-  //     socket.disconnect('/documents');
-  //   };
-  // }, [socket]);
-
   useEffect(() => {
     async function fetchDocument() {
       if (!id) return;
@@ -35,16 +28,18 @@ function Document() {
       setTitle(name);
       setLoaded(true);
       setFilePath(`/documents/${title || 'Untitled'}`);
+      socket.emit('joinWorkspace', wid);
       socket.emit('joinDocument', id);
     }
+    console.log('fetching document');
     fetchDocument().catch(e => {
       publishError(e);
-      navigate('/');
+      // navigate('/');
     });
     return () => {
       socket.emit('leaveDocument');
     };
-  }, [fugue, id, http, socket, publishError, services, setFilePath, navigate, title]);
+  }, [fugue, id, http, socket, publishError, services, setFilePath, navigate, title, wid]);
 
   return <div>{loaded && <Editor title={title} fugue={fugue} communication={communication} />}</div>;
 }

code/client/src/ui/pages/home/Home.scss

@@ -1,18 +0,0 @@
-.not-found {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-size: 2rem;
-  font-weight: bold;
-  text-align: center;
-  padding: 1rem;
-  margin: 0;
-
-  :not(:first-child) {
-    background: black;
-    color: white;
-    padding: 1vh 2vh 1vh 2vh;
-    border-radius: 5px;
-  }
-}

code/client/src/ui/pages/home/Home.tsx

@@ -1,4 +1,3 @@
-import { WorkspaceMetaData } from '@notespace/shared/src/workspace/types/workspace.ts';
 import useWorkspaces from '@ui/pages/workspace/hooks/useWorkspaces.ts';
 import WorkspacePreview from '@ui/pages/home/components/WorkspacePreview.tsx';
 import WorkspaceHeader from '@ui/pages/workspace/components/WorkspaceHeader.tsx';
@@ -8,12 +7,7 @@ import './Home.scss';
 import '../workspace/Workspace.scss';
 
 function Home() {
-  const workspaces: WorkspaceMetaData[] = [
-    { id: '1', name: 'Workspace 1' },
-    { id: '2', name: 'Workspace 2' },
-    { id: '3', name: 'Workspace 3' },
-  ];
-  const { createWorkspace, updateWorkspace, deleteWorkspace } = useWorkspaces();
+  const { workspaces, createWorkspace, updateWorkspace, deleteWorkspace } = useWorkspaces();
   const { publishError } = useError();
   return (
     <div className="home">

code/client/src/ui/pages/workspace/Workspace.tsx

@@ -3,15 +3,20 @@ import DocumentPreview from '@ui/pages/workspace/components/DocumentPreview';
 import useError from '@domain/error/useError';
 import useDocuments from '@ui/pages/workspace/hooks/useDocuments.ts';
 import './Workspace.scss';
+import { useEffect } from 'react';
+import { useCommunication } from '@/services/communication/context/useCommunication.ts';
+import { useParams } from 'react-router-dom';
 
 function Workspace() {
-  const documents = [
-    { id: '1', name: 'Document 1' },
-    { id: '2', name: 'Document 2' },
-    { id: '3', name: 'Document 3' },
-  ];
-  const { createDocument, deleteDocument, updateDocument } = useDocuments();
+  const { documents, createDocument, deleteDocument, updateDocument } = useDocuments();
+  const { socket } = useCommunication();
   const { publishError } = useError();
+  const { wid } = useParams();
+
+  useEffect(() => {
+    socket.emit('joinWorkspace', wid);
+  }, [socket, wid]);
+
   return (
     <div className="workspace">
       <h2>Workspace</h2>