Code Refactoring & Fixes

NoteSpaceTeam · Jun 24, 2024 · ce2f2f0 · ce2f2f0
1 parent 4d17d34
commit ce2f2f0
Show file tree

Hide file tree

Showing 28 changed files with 198 additions and 142 deletions.
diff --git a/code/client/src/App.tsx b/code/client/src/App.tsx
@@ -46,7 +46,15 @@ function App() {
                       </>
                     }
                   />
-                  <Route path="/profile/:id" element={<Profile />} />
+                  <Route
+                    path="/profile/:id"
+                    element={
+                      <>
+                        <Sidebar />
+                        <Profile />
+                      </>
+                    }
+                  />
                   <Route
                     path="/workspaces/*"
                     element={

diff --git a/code/client/src/contexts/workspace/WorkspaceContext.tsx b/code/client/src/contexts/workspace/WorkspaceContext.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useState, createContext, useEffect } from 'react';
 import { WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
 import { useCommunication } from '@/contexts/communication/useCommunication';
-import useError from '@/contexts/error/useError';
 import { useParams } from 'react-router-dom';
 import useWorkspaceService from '@services/workspace/useWorkspaceService';
 import useResources from '@domain/workspaces/useResources';
@@ -31,7 +30,6 @@ export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
   const { resources, operations } = useResources();
   const { setResources, ...otherOperations } = operations;
   const { socket } = useCommunication();
-  const { publishError } = useError();
   const { wid } = useParams();
 
   useEffect(() => {
@@ -44,13 +42,13 @@ export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
     }
     socket.connect();
     socket.emit('joinWorkspace', wid);
-    fetchWorkspace().catch(publishError);
+    fetchWorkspace();
     return () => {
       socket.emit('leaveWorkspace');
       socket.disconnect();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [wid, services, socket, publishError]);
+  }, [wid, services, socket]);
 
   return (
     <WorkspaceContext.Provider value={{ workspace, resources, operations: otherOperations }}>

diff --git a/code/client/src/domain/workspaces/useWorkspaces.ts b/code/client/src/domain/workspaces/useWorkspaces.ts
@@ -3,13 +3,11 @@ import { WorkspaceInputModel, WorkspaceMeta } from '@notespace/shared/src/worksp
 import useSocketListeners from '@services/communication/socket/useSocketListeners';
 import { useCommunication } from '@/contexts/communication/useCommunication';
 import useWorkspaceService from '@services/workspace/useWorkspaceService';
-import useError from '@/contexts/error/useError';
 
 function useWorkspaces() {
   const { socket } = useCommunication();
   const service = useWorkspaceService();
   const [workspaces, setWorkspaces] = useState<WorkspaceMeta[]>([]);
-  const { publishError } = useError();
 
   function onCreateWorkspace(workspace: WorkspaceMeta) {
     setWorkspaces([...workspaces, workspace]);
@@ -66,8 +64,8 @@ function useWorkspaces() {
       const workspaces = await service.getWorkspaces();
       setWorkspaces(workspaces);
     }
-    fetchWorkspaces().catch(publishError);
-  }, [service, publishError]);
+    fetchWorkspaces();
+  }, [service]);
 
   return {
     workspaces,

diff --git a/code/client/src/services/auth/authService.ts b/code/client/src/services/auth/authService.ts
@@ -1,25 +1,25 @@
 import { User, UserData } from '@notespace/shared/src/users/types';
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
 
-function authService(http: HttpCommunication) {
+function authService(http: HttpCommunication, publishError: (error: Error) => void) {
   async function sessionLogin(idToken: string) {
-    await http.post('/users/login', { idToken });
+    http.post('/users/login', { idToken }).catch(publishError);
   }
 
   async function sessionLogout() {
-    await http.post('/users/logout');
+    http.post('/users/logout').catch(publishError);
   }
 
   async function getUser(id: string): Promise<User> {
-    return await http.get(`/users/${id}`);
+    return http.get(`/users/${id}`).catch(publishError);
   }
 
   async function updateUser(id: string, newProps: Partial<UserData>) {
-    await http.put(`/users/${id}`, { id, ...newProps });
+    http.put(`/users/${id}`, { id, ...newProps }).catch(publishError);
   }
 
   async function deleteUser(id: string) {
-    await http.delete(`/users/${id}`);
+    http.delete(`/users/${id}`).catch(publishError);
   }
 
   return {

diff --git a/code/client/src/services/auth/useAuthService.ts b/code/client/src/services/auth/useAuthService.ts
@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
 import { useCommunication } from '@/contexts/communication/useCommunication';
 import authService from '@services/auth/authService';
+import useError from '@/contexts/error/useError';
 
 function useAuthService() {
   const { http } = useCommunication();
-  return useMemo(() => authService(http), [http]);
+  const { publishError } = useError();
+  return useMemo(() => authService(http, publishError), [http, publishError]);
 }
 
 export default useAuthService;
diff --git a/code/client/src/services/commits/commitsService.ts b/code/client/src/services/commits/commitsService.ts
@@ -1,25 +1,25 @@
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
 import { Commit, CommitData } from '@notespace/shared/src/document/types/commits';
 
-function commitsService(http: HttpCommunication, wid: string, id: string) {
+function commitsService(http: HttpCommunication, publishError: (error: Error) => void, wid: string, id: string) {
   async function commit() {
-    return await http.post(`/workspaces/${wid}/${id}/commit`);
+    http.post(`/workspaces/${wid}/${id}/commit`).catch(publishError);
   }
 
   async function rollback(commitId: string) {
-    return await http.post(`/workspaces/${wid}/${id}/rollback`, { commitId });
+    http.post(`/workspaces/${wid}/${id}/rollback`, { commitId }).catch(publishError);
   }
 
   async function fork(commitId: string) {
-    return await http.post(`/workspaces/${wid}/${id}/fork`, { commitId });
+    http.post(`/workspaces/${wid}/${id}/fork`, { commitId }).catch(publishError);
   }
 
   async function getCommits(): Promise<Commit[]> {
-    return await http.get(`/workspaces/${wid}/${id}/commits`);
+    return http.get(`/workspaces/${wid}/${id}/commits`).catch(publishError);
   }
 
   async function getCommit(commitId: string): Promise<CommitData> {
-    return await http.get(`/workspaces/${wid}/${id}/commits/${commitId}`);
+    return http.get(`/workspaces/${wid}/${id}/commits/${commitId}`).catch(publishError);
   }
 
   return {

diff --git a/code/client/src/services/commits/useCommitsService.ts b/code/client/src/services/commits/useCommitsService.ts
@@ -2,12 +2,14 @@ import { useMemo } from 'react';
 import { useCommunication } from '@/contexts/communication/useCommunication';
 import { useParams } from 'react-router-dom';
 import commitsService from '@services/commits/commitsService';
+import useError from '@/contexts/error/useError';
 
 function useCommitsService() {
   const { http } = useCommunication();
   const { wid, id } = useParams();
+  const { publishError } = useError();
   if (!wid || !id) throw new Error('Cannot use commits service outside of a document');
-  return useMemo(() => commitsService(http, wid, id), [http, wid, id]);
+  return useMemo(() => commitsService(http, publishError, wid, id), [http, publishError, wid, id]);
 }
 
 export default useCommitsService;
diff --git a/code/client/src/services/resource/resourcesService.ts b/code/client/src/services/resource/resourcesService.ts
@@ -1,23 +1,25 @@
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
 import { ResourceInputModel, ResourceType, Resource } from '@notespace/shared/src/workspace/types/resource';
 
-function resourcesService(http: HttpCommunication, wid: string) {
+function resourcesService(http: HttpCommunication, publishError: (error: Error) => void, wid: string) {
   async function getResource(id: string): Promise<Resource> {
-    return await http.get(`/workspaces/${wid}/${id}`);
+    return http.get(`/workspaces/${wid}/${id}`).catch(publishError);
   }
 
   async function createResource(name: string, type: ResourceType, parent?: string): Promise<string> {
     const resource: ResourceInputModel = { name, type, parent: parent || wid };
-    const { id } = await http.post(`/workspaces/${wid}`, resource);
-    return id;
+    return http
+      .post(`/workspaces/${wid}`, resource)
+      .then(resource => resource.id)
+      .catch(publishError);
   }
 
   async function deleteResource(id: string): Promise<void> {
-    await http.delete(`/workspaces/${wid}/${id}`);
+    http.delete(`/workspaces/${wid}/${id}`).catch(publishError);
   }
 
   async function updateResource(id: string, newProps: Partial<ResourceInputModel>): Promise<void> {
-    await http.put(`/workspaces/${wid}/${id}`, newProps);
+    http.put(`/workspaces/${wid}/${id}`, newProps).catch(publishError);
   }
 
   return {

diff --git a/code/client/src/services/resource/useResourcesService.ts b/code/client/src/services/resource/useResourcesService.ts
@@ -2,12 +2,14 @@ import { useMemo } from 'react';
 import { useCommunication } from '@/contexts/communication/useCommunication';
 import { useParams } from 'react-router-dom';
 import resourcesService from '@services/resource/resourcesService';
+import useError from '@/contexts/error/useError';
 
 function useResourcesService() {
   const { http } = useCommunication();
   const { wid } = useParams();
+  const { publishError } = useError();
   if (!wid) throw new Error('Cannot use document service outside of a workspace');
-  return useMemo(() => resourcesService(http, wid), [http, wid]);
+  return useMemo(() => resourcesService(http, publishError, wid), [http, publishError, wid]);
 }
 
 export default useResourcesService;
diff --git a/code/client/src/services/workspace/useWorkspaceService.ts b/code/client/src/services/workspace/useWorkspaceService.ts
@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
 import { useCommunication } from '@/contexts/communication/useCommunication';
 import workspaceService from '@services/workspace/workspaceService';
+import useError from '@/contexts/error/useError';
 
 function useWorkspaceService() {
   const { http } = useCommunication();
-  return useMemo(() => workspaceService(http), [http]);
+  const { publishError } = useError();
+  return useMemo(() => workspaceService(http, publishError), [http, publishError]);
 }
 
 export default useWorkspaceService;
diff --git a/code/client/src/services/workspace/workspaceService.ts b/code/client/src/services/workspace/workspaceService.ts
@@ -3,43 +3,43 @@ import { WorkspaceInputModel, WorkspaceMeta } from '@notespace/shared/src/worksp
 import { Workspace } from '@notespace/shared/src/workspace/types/workspace';
 import { validateEmail } from '@services/workspace/utils';
 
-function workspaceService(http: HttpCommunication) {
+function workspaceService(http: HttpCommunication, publishError: (error: Error) => void) {
   async function getWorkspace(id: string): Promise<Workspace> {
-    return await http.get(`/workspaces/${id}`);
+    return http.get(`/workspaces/${id}`).catch(publishError);
   }
 
   async function getWorkspaces(): Promise<WorkspaceMeta[]> {
-    return await http.get('/workspaces');
+    return http.get('/workspaces').catch(publishError);
   }
 
   async function createWorkspace(workspace: WorkspaceInputModel): Promise<string> {
-    return await http.post('/workspaces', workspace);
+    return http.post('/workspaces', workspace).catch(publishError);
   }
 
   async function deleteWorkspace(id: string): Promise<void> {
-    await http.delete(`/workspaces/${id}`);
+    http.delete(`/workspaces/${id}`).catch(publishError);
   }
 
   async function updateWorkspace(id: string, newProps: Partial<WorkspaceMeta>): Promise<void> {
-    await http.put(`/workspaces/${id}`, newProps);
+    http.put(`/workspaces/${id}`, newProps).catch(publishError);
   }
 
   async function addWorkspaceMember(id: string, email: string): Promise<void> {
     validateEmail(email);
-    await http.post(`/workspaces/${id}/members`, { email });
+    http.post(`/workspaces/${id}/members`, { email }).catch(publishError);
   }
 
   async function removeWorkspaceMember(id: string, email: string): Promise<void> {
     validateEmail(email);
-    await http.delete(`/workspaces/${id}/members`, { email });
+    http.delete(`/workspaces/${id}/members`, { email }).catch(publishError);
   }
 
   async function getWorkspacesFeed() {
-    return await http.get('/workspaces/search');
+    return http.get('/workspaces/search').catch(publishError);
   }
 
   async function searchWorkspaces(query: string, skip: number, limit: number): Promise<WorkspaceMeta[]> {
-    return await http.get(`/workspaces/search?query=${query}&skip=${skip}&limit=${limit}`);
+    return http.get(`/workspaces/search?query=${query}&skip=${skip}&limit=${limit}`).catch(publishError);
   }
 
   return {

diff --git a/code/client/src/ui/components/table/DataTable.scss b/code/client/src/ui/components/table/DataTable.scss
@@ -10,7 +10,7 @@
   }
 
   .table-content {
-    width: 50%;
+    width: 70%;
     position: relative;
 
     > div:first-child {

diff --git a/code/client/src/ui/pages/document/Document.tsx b/code/client/src/ui/pages/document/Document.tsx
@@ -42,10 +42,7 @@ function Document() {
       socket.emit('joinDocument', id);
       setLoaded(true);
     }
-    fetchDocument().catch(e => {
-      publishError(e);
-      navigate('/');
-    });
+    fetchDocument();
     return () => {
       socket.emit('leaveDocument');
     };

diff --git a/code/client/src/ui/pages/document/components/commit-history/CommitHistory.scss b/code/client/src/ui/pages/document/components/commit-history/CommitHistory.scss
@@ -6,15 +6,15 @@
   }
 
   .commit {
-    padding: 0.5vh 8vh;
-    border-radius: 10px;
-    background-color: black;
-    color: white;
-
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    padding: 0.5vh 8vh;
+    border-radius: 10px;
+    background-color: black;
+    color: white;
+    text-decoration: none !important;
 
     .commit-actions {
       display: flex;

diff --git a/code/client/src/ui/pages/document/components/commit-history/CommitHistory.tsx b/code/client/src/ui/pages/document/components/commit-history/CommitHistory.tsx
@@ -19,6 +19,16 @@ function CommitHistory() {
   const { getCommits, fork, rollback } = useCommitsService();
   const navigate = useNavigate();
 
+  async function onRollback(commitId: string) {
+    await rollback(commitId);
+    navigate(`/workspaces/${wid}/${id}`);
+  }
+
+  async function onFork(commitId: string) {
+    await fork(commitId);
+    navigate(`/workspaces/${wid}`);
+  }
+
   useEffect(() => {
     async function fetchDocument() {
       const document = (await getResource(id!)) as DocumentResource;
@@ -45,26 +55,22 @@ function CommitHistory() {
           <div className="commits-list">
             {commits.length > 0 ? (
               commits.map(commit => (
-                <button
-                  key={commit.id}
-                  className="commit"
-                  onClick={() => navigate(`/workspaces/${wid}/${id}/commits/${commit.id}`)}
-                >
+                <Link to={`/workspaces/${wid}/${id}/commits/${commit.id}`} key={commit.id} className="commit">
                   <p>
                     <Link to={`/profile/${commit.author.id}`}>{commit.author.name}</Link> committed{' '}
                     {formatTimePassed(new Date(commit.timestamp).toLocaleString())}
                   </p>
                   <div className="commit-actions">
-                    <button onClick={() => rollback(commit.id)}>
+                    <button onClick={() => onRollback(commit.id)}>
                       <FaUndo />
                       Rollback
                     </button>
-                    <button onClick={() => fork(commit.id)}>
+                    <button onClick={() => onFork(commit.id)}>
                       <FaCodeFork />
                       Fork
                     </button>
                   </div>
-                </button>
+                </Link>
               ))
             ) : (
               <p>No commits yet</p>

diff --git a/code/client/src/ui/pages/document/components/commit/Commit.scss b/code/client/src/ui/pages/document/components/commit/Commit.scss
@@ -1,2 +1,5 @@
 .commit {
+  .editor {
+    width: 100%;
+  }
 }