Fixed Workspace Management

code/client/src/App.tsx

@@ -5,9 +5,9 @@ import Header from '@ui/components/header/Header';
 import Workspace from '@ui/pages/workspace/Workspace';
 import NotFound from '@ui/pages/notfound/NotFound';
 import './App.scss';
-import { ErrorProvider } from '@domain/error/ErrorContext';
+import { ErrorProvider } from '@domain/error/hooks/ErrorContext.tsx';
 import Sidebar from '@ui/components/sidebar/Sidebar';
-import { WorkspaceProvider } from '@domain/workspace/WorkspaceContext';
+import { WorkspaceProvider } from '@domain/workspaces/hooks/WorkspaceContext.tsx';
 import Home from '@ui/pages/home/Home.tsx';
 
 function App() {
@@ -25,18 +25,24 @@ function App() {
                   element={
                     <WorkspaceProvider>
                       <Routes>
-                        <Route path="/" element={
-                          <>
-                            <Sidebar />
-                            <Workspace />
-                          </>
-                        } />
-                        <Route path="/:id" element={
-                          <>
-                            <Sidebar />
-                            <Document />
-                          </>
-                        }/>
+                        <Route
+                          path="/"
+                          element={
+                            <>
+                              <Sidebar />
+                              <Workspace />
+                            </>
+                          }
+                        />
+                        <Route
+                          path="/:id"
+                          element={
+                            <>
+                              <Sidebar />
+                              <Document />
+                            </>
+                          }
+                        />
                       </Routes>
                     </WorkspaceProvider>
                   }

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

@@ -138,16 +138,16 @@ export default (editor: Editor, domainOperations: InputDomainOperations, onForma
   /**
    * Handles cursor selection
    */
-  function onSelectionChange() {
+  function onSelectionChange(blur = false) {
     const { selection } = editor;
-    if (!selection) return;
+    if (!selection && !blur) return;
     const styles = CustomEditor.getMarks(editor) as InlineStyle[];
     domainOperations.updateSelection(selection, styles);
   }
 
   function onBlur() {
     ReactEditor.deselect(editor);
-    onSelectionChange();
+    onSelectionChange(true);
   }
 
   return { onInput, onPaste, onCut, onSelectionChange, onShortcut, onBlur };

code/client/src/domain/error/ErrorContext.tsx → code/client/src/domain/error/hooks/ErrorContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState, createContext, useEffect } from 'react';
-import ErrorComponent from '@ui/components/error/Error';
+import ErrorComponent from '@ui/components/error/Error.tsx';
 
 const ERROR_TIMEOUT = 5000;
 

code/client/src/domain/error/useError.ts → code/client/src/domain/error/hooks/useError.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ErrorContext } from '@domain/error/ErrorContext';
+import { ErrorContext } from '@domain/error/hooks/ErrorContext.tsx';
 
 const useError = () => useContext(ErrorContext);
 

code/client/src/domain/resources/hooks/useResources.ts

@@ -0,0 +1,53 @@
+import { ResourceType, WorkspaceResource } from '@notespace/shared/src/workspace/types/resource.ts';
+import useResourceService from '@/services/resource/useResourceService.ts';
+import useSocketListeners from '@/services/communication/socket/useSocketListeners.ts';
+import { useCommunication } from '@/services/communication/context/useCommunication.ts';
+import { useState } from 'react';
+
+function useResources() {
+  const service = useResourceService();
+  const [resources, setResources] = useState<WorkspaceResource[]>([]);
+  const { socket } = useCommunication();
+
+  function onCreateResource(resource: WorkspaceResource) {
+    setResources([...resources, resource]);
+  }
+
+  async function createResource(name: string, type: ResourceType) {
+    await service.createResource(name, type);
+  }
+
+  function onDeleteResource(id: string) {
+    setResources(resources.filter(resource => resource.id !== id));
+  }
+
+  async function deleteResource(id: string) {
+    await service.deleteResource(id);
+  }
+
+  function onUpdateResource(resource: Partial<WorkspaceResource>) {
+    setResources(resources.map(res => (res.id === resource.id ? { ...res, ...resource } : res)));
+  }
+
+  async function updateResource(id: string, newProps: Partial<WorkspaceResource>) {
+    await service.updateResource(id, newProps);
+  }
+
+  useSocketListeners(socket, {
+    createdResource: onCreateResource,
+    deletedResource: onDeleteResource,
+    updatedResource: onUpdateResource,
+  });
+
+  return {
+    resources,
+    setResources,
+    operations: {
+      createResource,
+      deleteResource,
+      updateResource,
+    },
+  };
+}
+
+export default useResources;

code/client/src/domain/workspaces/hooks/WorkspaceContext.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useState, createContext, useEffect } from 'react';
+import { Workspace, WorkspaceMetaData } from '@notespace/shared/src/workspace/types/workspace.ts';
+import { useCommunication } from '@/services/communication/context/useCommunication.ts';
+import useError from '@domain/error/hooks/useError.ts';
+import { useParams } from 'react-router-dom';
+import useWorkspaceService from '@/services/workspace/useWorkspaceService.ts';
+import useResources from '@domain/resources/hooks/useResources.ts';
+import { ResourceType, WorkspaceResource } from '@notespace/shared/src/workspace/types/resource.ts';
+
+type ResourceOperationsType = {
+  createResource: (name: string, type: ResourceType) => Promise<void>;
+  deleteResource: (id: string) => Promise<void>;
+  updateResource: (id: string, newProps: Partial<WorkspaceResource>) => Promise<void>;
+};
+
+export type WorkspaceContextType = {
+  workspace?: WorkspaceMetaData;
+  resources?: WorkspaceResource[];
+  operations?: ResourceOperationsType;
+};
+
+export const WorkspaceContext = createContext<WorkspaceContextType>({});
+
+export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
+  const services = useWorkspaceService();
+  const [workspace, setWorkspace] = useState<WorkspaceMetaData | undefined>(undefined);
+  const { resources, setResources, operations } = useResources();
+  const { socket } = useCommunication();
+  const { publishError } = useError();
+  const { wid } = useParams();
+
+  useEffect(() => {
+    if (!wid) return;
+    async function fetchWorkspace() {
+      const { id, name, resources }: Workspace = await services.getWorkspace(wid!);
+      setWorkspace({ id, name });
+      console.log(resources);
+      setResources(resources);
+    }
+    socket.emit('joinWorkspace', wid);
+    fetchWorkspace().catch(publishError);
+    return () => {
+      socket.emit('leaveWorkspace');
+    };
+  }, [wid, socket, publishError, services, setResources]);
+
+  return <WorkspaceContext.Provider value={{ workspace, resources, operations }}>{children}</WorkspaceContext.Provider>;
+}

code/client/src/domain/workspace/useWorkspace.ts → code/client/src/domain/workspaces/hooks/useWorkspace.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { WorkspaceContext } from '@domain/workspace/WorkspaceContext';
+import { WorkspaceContext } from '@domain/workspaces/hooks/WorkspaceContext.tsx';
 
 const useWorkspace = () => useContext(WorkspaceContext);
 

code/client/src/domain/workspaces/hooks/useWorkspaceTree.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { WorkspaceTree } from '@domain/workspaces/tree/WorkspaceTree.ts';
+
+function useWorkspaceTree() {
+  return useMemo(() => new WorkspaceTree(), []);
+}
+
+export default useWorkspaceTree;

code/client/src/ui/pages/workspace/hooks/useWorkspaces.ts → code/client/src/domain/workspaces/hooks/useWorkspaces.ts

@@ -13,28 +13,24 @@ function useWorkspaces() {
     setWorkspaces([...workspaces, workspace]);
   }
 
-  async function createWorkspace(values: { [key: string]: string }) {
-    if (!values.name) throw new Error('Workspace name is required');
-    // ... TODO: validate other fields
-    const { name, description, visibility, tags, members } = values;
-    const workspace: WorkspaceInputModel = { name, description, visibility, tags: [tags], members: [members] }; // TODO: fix later
-    await service.createWorkspace(workspace);
-  }
-
   function onDeleteWorkspace(id: string) {
     setWorkspaces(workspaces.filter(workspace => workspace.id !== id));
   }
 
-  async function deleteWorkspace(id: string) {
-    await service.deleteWorkspace(id);
-  }
-
   function onUpdateWorkspace(workspace: WorkspaceMetaData) {
     setWorkspaces(workspaces.map(w => (w.id === workspace.id ? workspace : w)));
   }
 
-  async function updateWorkspace(workspace: WorkspaceMetaData) {
-    await service.updateWorkspace(workspace.id, workspace);
+  async function createWorkspace(workspace: WorkspaceInputModel) {
+    return await service.createWorkspace(workspace);
+  }
+
+  async function deleteWorkspace(id: string) {
+    return await service.deleteWorkspace(id);
+  }
+
+  async function updateWorkspace(id: string, newProps: Partial<WorkspaceMetaData>) {
+    return await service.updateWorkspace(id, newProps);
   }
 
   useSocketListeners(socket, {