Implemented Recent Documents & Added Fixes

NoteSpaceTeam · Jun 26, 2024 · d04268d · d04268d
1 parent c0cd272
commit d04268d
Show file tree

Hide file tree

Showing 35 changed files with 253 additions and 137 deletions.
diff --git a/code/client/src/App.tsx b/code/client/src/App.tsx
@@ -16,6 +16,7 @@ import Search from '@ui/pages/search/Search';
 import CommitHistory from '@ui/pages/document/components/commit-history/CommitHistory';
 import Commit from '@ui/pages/document/components/commit/Commit';
 import './App.scss';
+import Recent from '@ui/pages/recent/Recent';
 
 function App() {
   return (
@@ -55,6 +56,15 @@ function App() {
                       </>
                     }
                   />
+                  <Route
+                    path="/recent"
+                    element={
+                      <>
+                        <Sidebar />
+                        <Recent />
+                      </>
+                    }
+                  />
                   <Route
                     path="/workspaces/*"
                     element={

diff --git a/code/client/src/domain/workspaces/utils.ts b/code/client/src/domain/workspaces/utils.ts
@@ -13,7 +13,11 @@ export function sortWorkspaces(workspaces: WorkspaceMeta[], column: string, asce
         comparison = a.isPrivate === b.isPrivate ? 0 : a.isPrivate ? 1 : -1;
         break;
       case 'Members':
-        comparison = a.members.length - b.members.length;
+        {
+          const membersA = Array.isArray(a.members) ? a.members.length : a.members;
+          const membersB = Array.isArray(b.members) ? b.members.length : b.members;
+          comparison = membersA - membersB;
+        }
         break;
       case 'Created':
         comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();

diff --git a/code/client/src/services/auth/authService.ts b/code/client/src/services/auth/authService.ts
@@ -1,4 +1,4 @@
-import { User, UserData } from '@notespace/shared/src/users/types';
+import { User } from '@notespace/shared/src/users/types';
 import { HttpCommunication } from '@services/communication/http/httpCommunication';
 import { ErrorHandler } from '@/contexts/error/ErrorContext';
 
@@ -15,10 +15,6 @@ function authService(http: HttpCommunication, errorHandler: ErrorHandler) {
     return errorHandler(async () => await http.get(`/users/${id}`));
   }
 
-  async function updateUser(id: string, newProps: Partial<UserData>) {
-    return errorHandler(async () => await http.put(`/users/${id}`, { id, ...newProps }));
-  }
-
   async function deleteUser(id: string) {
     return errorHandler(async () => await http.delete(`/users/${id}`));
   }
@@ -27,7 +23,6 @@ function authService(http: HttpCommunication, errorHandler: ErrorHandler) {
     sessionLogin,
     sessionLogout,
     getUser,
-    updateUser,
     deleteUser,
   };
 }

diff --git a/code/client/src/ui/components/popup-menu/PopupMenu.tsx b/code/client/src/ui/components/popup-menu/PopupMenu.tsx
@@ -1,30 +1,29 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Menu, PopoverPosition } from '@mui/material';
 import './PopupMenu.scss';
-import useWorkspace from '@/contexts/workspace/useWorkspace';
 
 type PopupMenuProps = {
   item: ReactNode;
-  trigger?: string;
   children: ReactNode;
+  trigger?: string;
+  enabled?: boolean;
 };
 
-function PopupMenu({ item, trigger, children }: PopupMenuProps) {
+function PopupMenu({ item, trigger, children, enabled }: PopupMenuProps) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [contextMenuPosition, setContextMenuPosition] = useState<PopoverPosition | null>(null);
-  const { isMember } = useWorkspace();
 
   const onOpen = useCallback(
     (event: MouseEvent | React.MouseEvent) => {
       event.preventDefault();
-      if (!isMember) return;
+      if (!enabled) return;
       setContextMenuPosition({
         left: event.clientX - 2,
         top: event.clientY - 4,
       });
       setAnchorEl(event.currentTarget as HTMLElement);
     },
-    [isMember]
+    [enabled]
   );
 
   const onClose = () => {

diff --git a/code/client/src/ui/components/sidebar/Sidebar.scss b/code/client/src/ui/components/sidebar/Sidebar.scss
@@ -3,9 +3,7 @@
   top: 0;
   left: 0;
   height: 100vh;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: 2vh;
+  overflow: hidden;
   transition: 0.3s;
   color: black;
   z-index: 10;
@@ -67,6 +65,7 @@
   ul {
     margin: 0;
     width: 100%;
+    overflow-y: scroll;
   }
 
   li {

diff --git a/code/client/src/ui/components/sidebar/Sidebar.tsx b/code/client/src/ui/components/sidebar/Sidebar.tsx
@@ -4,7 +4,6 @@ import { RiMenuFold2Line, RiMenuFoldLine, RiTeamFill } from 'react-icons/ri';
 import useWorkspace from '@/contexts/workspace/useWorkspace';
 import useSidebarState from '@ui/components/sidebar/hooks/useSidebarState';
 import WorkspaceTree from '@ui/components/sidebar/components/workspace-tree/WorkspaceTree';
-import { IoMdSettings } from 'react-icons/io';
 import { TiHome } from 'react-icons/ti';
 import { GoPlus } from 'react-icons/go';
 import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
@@ -17,7 +16,7 @@ function Sidebar() {
   const { workspace, resources, operations, isMember } = useWorkspace();
   const { isLoggedIn } = useAuth();
 
-  if (!isLoaded) return null;
+  if (!isLoaded || !isLoggedIn) return null;
   return (
     <div className="sidebar" style={{ width }} onMouseLeave={handlers.handleMouseLeave}>
       <div onMouseDown={handlers.handleMouseDown} className="dragger" />
@@ -37,19 +36,13 @@ function Sidebar() {
           <TiHome />
           <Link to="/">Home</Link>
         </li>
-        {isLoggedIn && (
-          <li>
-            <RiTeamFill />
-            <Link to="/workspaces">Workspaces</Link>
-          </li>
-        )}
         <li>
-          <IoTime />
-          <Link to="/recent">Recent</Link>
+          <RiTeamFill />
+          <Link to="/workspaces">Workspaces</Link>
         </li>
         <li>
-          <IoMdSettings />
-          <Link to="/settings">Settings</Link>
+          <IoTime />
+          <Link to="/recent">Recent</Link>
         </li>
         <hr />
         {workspace && operations && resources && (
@@ -61,6 +54,7 @@ function Sidebar() {
               <CreateResourceMenu
                 onCreateNew={(type: ResourceType) => operations.createResource('Untitled', type, workspace.id)}
                 trigger="sidebar-create-resource"
+                enabled={isMember}
               />
               {isMember && (
                 <button id="sidebar-create-resource">

diff --git a/code/client/src/ui/components/sidebar/components/CreateResourceMenu.tsx b/code/client/src/ui/components/sidebar/components/CreateResourceMenu.tsx
@@ -6,11 +6,12 @@ import { BsFileEarmarkPlusFill } from 'react-icons/bs';
 type CreateResourceMenuProps = {
   onCreateNew: (type: ResourceType) => void;
   trigger: string;
+  enabled?: boolean;
 };
 
-function CreateResourceMenu({ onCreateNew, trigger }: CreateResourceMenuProps) {
+function CreateResourceMenu({ onCreateNew, trigger, enabled }: CreateResourceMenuProps) {
   return (
-    <PopupMenu item={<></>} trigger={trigger}>
+    <PopupMenu item={<></>} trigger={trigger} enabled={enabled}>
       <button onClick={() => onCreateNew(ResourceType.DOCUMENT)}>
         <BsFileEarmarkPlusFill />
         Document

diff --git a/code/client/src/ui/components/sidebar/components/workspace-tree/TreeResourceView.tsx b/code/client/src/ui/components/sidebar/components/workspace-tree/TreeResourceView.tsx
@@ -61,6 +61,7 @@ function TreeResourceView({
           onDelete={() => onDeleteResource!(resource.id)}
           onDuplicate={() => onDuplicateResource!(resource.parent, resource.name, resource.type)}
           onOpenInNewTab={resource.type === ResourceType.DOCUMENT ? () => onOpenInNewTab!(resource.id) : undefined}
+          enabled={isMember}
         >
           <div className="expand-icon">
             <button className={resource.children.length === 0 ? 'hide-button' : ''} onClick={handleToggle}>
@@ -70,6 +71,7 @@ function TreeResourceView({
           <CreateResourceMenu
             onCreateNew={(type: ResourceType) => onCreateResource!(resource.id, type)}
             trigger={'create-new-resource-' + resource.id}
+            enabled={isMember}
           />
           {resource.type === ResourceType.DOCUMENT ? (
             <div {...props} className="resource-name document-resource">

diff --git a/code/client/src/ui/pages/document/components/editor/Editor.scss b/code/client/src/ui/pages/document/components/editor/Editor.scss
@@ -1,22 +1,15 @@
-div [role='textbox'] {
-  width: 100%;
-  height: 100%;
-  color: black;
-  outline: none;
-}
-
 .editor {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  min-height: 120vh;
   gap: 1em;
-  overflow-y: scroll;
+  width: 80vw;
+  overflow-wrap: break-word;
 
   .container {
     min-height: 80vh;
-    width: 40%;
+    width: 50%;
     justify-content: left;
     padding: 2em;
     align-items: flex-start;
@@ -35,6 +28,13 @@ div [role='textbox'] {
     }
   }
 
+  div [role='textbox'] {
+    width: 100%;
+    height: 100%;
+    color: black;
+    outline: none;
+  }
+
   .toolbar {
     display: flex;
     justify-content: center;
@@ -70,11 +70,4 @@ div [role='textbox'] {
       }
     }
   }
-
-  .editable {
-  }
-
-  * {
-    // caret-color: transparent; hide cursor
-  }
 }
diff --git a/code/client/src/ui/pages/home/Home.tsx b/code/client/src/ui/pages/home/Home.tsx
@@ -27,10 +27,8 @@ function Home() {
         spinner
       ) : workspaces.length > 0 ? (
         workspaces.map(workspace => (
-          <div className="workspace">
-            <Link key={workspace.id} to={`/workspaces/${workspace.id}`}>
-              {workspace.name}
-            </Link>
+          <div className="workspace" key={workspace.id}>
+            <Link to={`/workspaces/${workspace.id}`}>{workspace.name}</Link>
           </div>
         ))
       ) : (

diff --git a/code/client/src/ui/pages/recent/Recent.scss b/code/client/src/ui/pages/recent/Recent.scss
@@ -0,0 +1,5 @@
+.recent {
+  li {
+    list-style: none;
+  }
+}
diff --git a/code/client/src/ui/pages/recent/Recent.tsx b/code/client/src/ui/pages/recent/Recent.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { DocumentResource } from '@notespace/shared/src/workspace/types/resource';
+import useLoading from '@ui/hooks/useLoading';
+import { Link } from 'react-router-dom';
+import { formatTimePassed } from '@/utils/utils';
+import { useCommunication } from '@/contexts/communication/useCommunication';
+import useError from '@/contexts/error/useError';
+import './Recent.scss';
+
+function Recent() {
+  const [documents, setDocuments] = useState<DocumentResource[]>([]);
+  const { http } = useCommunication();
+  const { publishError } = useError();
+  const { loading, startLoading, stopLoading, spinner } = useLoading();
+
+  useEffect(() => {
+    async function fetchRecentDocuments() {
+      try {
+        startLoading();
+        const documents = await http.get('/recent');
+        console.log(documents);
+        setDocuments(documents);
+        console.log(documents[0].updatedAt, formatTimePassed(documents[0].updatedAt));
+      } catch (e) {
+        publishError(e as Error);
+      } finally {
+        stopLoading();
+      }
+    }
+    fetchRecentDocuments();
+  }, [http, publishError, startLoading, stopLoading]);
+
+  return (
+    <div className="recent">
+      <h2>Recent Documents</h2>
+      {loading ? (
+        spinner
+      ) : documents.length > 0 ? (
+        <ul>
+          {documents.map(doc => (
+            <li key={doc.id}>
+              <Link to={`/workspaces/${doc.workspace}/${doc.id}`}>
+                {doc.name} edited {formatTimePassed(doc.updatedAt)}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No recent documents</p>
+      )}
+    </div>
+  );
+}
+
+export default Recent;
diff --git a/code/client/src/ui/pages/workspace/Workspace.tsx b/code/client/src/ui/pages/workspace/Workspace.tsx
@@ -1,4 +1,4 @@
-import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
+import { DocumentResource, ResourceType } from '@notespace/shared/src/workspace/types/resource';
 import DocumentView from '@ui/pages/workspace/components/DocumentView';
 import useWorkspace from '@/contexts/workspace/useWorkspace';
 import { useEffect, useState } from 'react';
@@ -11,12 +11,18 @@ import './Workspace.scss';
 function Workspace() {
   const { workspace, resources, operations } = useWorkspace();
   const [selected, setSelected] = useState<string[]>([]);
-  const [rows, setRows] = useState(getDocuments(resources));
+  const [rows, setRows] = useState<DocumentResource[]>([]);
 
   useEffect(() => {
-    setRows(getDocuments(resources));
+    const docs = getDocuments(resources);
+    console.log(docs);
+    setRows(docs);
   }, [resources]);
 
+  useEffect(() => {
+    console.log('rows', rows);
+  }, [rows]);
+
   return (
     <div className="workspace">
       <h2>Documents in {workspace?.name}</h2>

diff --git a/code/client/src/ui/pages/workspace/components/ResourceContextMenu.tsx b/code/client/src/ui/pages/workspace/components/ResourceContextMenu.tsx
@@ -9,11 +9,19 @@ type ResourceContextMenuProps = {
   onDelete: () => void;
   onDuplicate: () => void;
   onOpenInNewTab?: () => void;
+  enabled?: boolean;
 };
 
-function ResourceContextMenu({ children, onOpenInNewTab, onRename, onDelete, onDuplicate }: ResourceContextMenuProps) {
+function ResourceContextMenu({
+  children,
+  onOpenInNewTab,
+  onRename,
+  onDelete,
+  onDuplicate,
+  enabled,
+}: ResourceContextMenuProps) {
   return (
-    <PopupMenu item={children}>
+    <PopupMenu item={children} enabled={enabled}>
       {onOpenInNewTab && (
         <button onClick={onOpenInNewTab}>
           <HiOutlineExternalLink />