Updated Sidebar

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

@@ -1,15 +1,22 @@
-import { IoDocumentText, IoMenu } from 'react-icons/io5';
+import { useState } from 'react';
+import { IoMenu } from 'react-icons/io5';
 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';
-import { FaFolder } from 'react-icons/fa6';
-import { ResourceType } from '@notespace/shared/src/workspace/types/resource.ts';
+import ResourceView from '@ui/components/sidebar/components/ResourceView.tsx';
+import { WorkspaceResource } from '@notespace/shared/src/workspace/types/resource.ts';
+import './Sidebar.scss';
+import useSocketListeners from '@/services/communication/socket/useSocketListeners.ts';
+import { useCommunication } from '@/services/communication/context/useCommunication.ts';
 
 function Sidebar() {
   const { isOpen, isLocked, handleClick, handleMouseEnter, handleMouseLeave } = useSidebarState();
+  const { socket } = useCommunication();
   const { workspace } = useWorkspace();
+  const [resources, setResources] = useState<WorkspaceResource[]>([]);
+
+  useSocketListeners(socket, {});
 
   return (
     <div
@@ -39,16 +46,13 @@ function Sidebar() {
             <h3>
               <Link to={`/workspaces/${workspace.id}`}>{workspace.name}</Link>
             </h3>
-            <div className="files">
+            <ul className="files">
               {workspace.resources.map(resource => (
                 <li key={resource.id}>
-                  <Link to={`/workspaces/${workspace.id}/${resource.id}`}>
-                    {resource.type === ResourceType.DOCUMENT ? <IoDocumentText /> : <FaFolder />}
-                    {resource.name}
-                  </Link>
+                  <ResourceView resource={resource} />
                 </li>
               ))}
-            </div>
+            </ul>
           </>
         )}
       </ul>

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

@@ -0,0 +1,30 @@
+import { Link } from 'react-router-dom';
+import { ResourceType, WorkspaceResource } from '@notespace/shared/src/workspace/types/resource.ts';
+import { IoDocumentText } from 'react-icons/io5';
+import { FaFolder } from 'react-icons/fa6';
+
+type ResourceViewProps = {
+  resource: WorkspaceResource;
+};
+
+const ResourceComponents = {
+  [ResourceType.DOCUMENT]: ({ resource }: ResourceViewProps) => (
+    <Link to={`/workspaces/${resource.workspace}/${resource.id}`}>
+      <IoDocumentText />
+      {resource.name || 'Untitled'}
+    </Link>
+  ),
+  [ResourceType.FOLDER]: ({ resource }: ResourceViewProps) => (
+    <div>
+      <FaFolder />
+      {resource.name}
+    </div>
+  ),
+};
+
+function ResourceView({ resource }: ResourceViewProps) {
+  const ResourceComponent = ResourceComponents[resource.type];
+  return <ResourceComponent resource={resource} />;
+}
+
+export default ResourceView;