From c39d2b40a8b38ab2da248cb636959d4379b4f501 Mon Sep 17 00:00:00 2001
From: Ricardo Costa <rcosta.ms358@gmail.com>
Date: Fri, 28 Jun 2024 19:51:17 +0100
Subject: [PATCH] Added Fixes & Features

---
 .../plugins/markdown/rendering/renderers.tsx  |  4 +-
 code/client/src/pwa/manifest-config.ts        | 40 +++++++++----------
 code/client/src/pwa/pwa-config.ts             | 18 ++++-----
 .../src/ui/components/sidebar/Sidebar.scss    |  2 +-
 .../src/ui/components/sidebar/Sidebar.tsx     |  9 ++++-
 .../collaborators/Collaborators.scss          | 10 ++---
 .../collaborators/Collaborators.tsx           | 26 ++++++++++--
 .../document/components/cursor/Cursor.tsx     |  4 +-
 code/client/vite.config.ts                    | 10 ++---
 .../http/middlewares/errorMiddleware.ts       |  2 -
 .../ws/events/document/onCursorChange.ts      |  2 +-
 .../ws/events/document/onJoinDocument.ts      |  9 +++--
 code/shared/src/users/types.ts                |  1 +
 13 files changed, 80 insertions(+), 57 deletions(-)

diff --git a/code/client/src/domain/editor/slate/plugins/markdown/rendering/renderers.tsx b/code/client/src/domain/editor/slate/plugins/markdown/rendering/renderers.tsx
index baf7d91d..68341eda 100644
--- a/code/client/src/domain/editor/slate/plugins/markdown/rendering/renderers.tsx
+++ b/code/client/src/domain/editor/slate/plugins/markdown/rendering/renderers.tsx
@@ -53,9 +53,9 @@ export const getLeafRenderer = ({ attributes, leaf, children }: RenderLeafProps)
     children = renderer(children);
   }
   if (leaf.cursor) {
-    const { color, range, styles } = leaf.cursor;
+    const { color, range, styles, id } = leaf.cursor;
     children = Range.isCollapsed(range!) ? (
-      <Cursor color={color} styles={styles} children={children} />
+      <Cursor id={id} color={color} styles={styles} children={children} />
     ) : (
       <Selection color={color} children={children} />
     );
diff --git a/code/client/src/pwa/manifest-config.ts b/code/client/src/pwa/manifest-config.ts
index 86f3e0d7..2093f829 100644
--- a/code/client/src/pwa/manifest-config.ts
+++ b/code/client/src/pwa/manifest-config.ts
@@ -1,22 +1,22 @@
-import {ManifestOptions} from "vite-plugin-pwa";
+import { ManifestOptions } from 'vite-plugin-pwa';
 
-const manifestConfig : Partial<ManifestOptions> = {
-    name: 'NoteSpace',
-    short_name: 'NoteSpace',
-    description: 'A multiplatform note management and sharing app',
-    theme_color: '#ffffff',
-    icons: [
-        {
-            src: '/assets/icon.png',
-            sizes: '192x192',
-            type: 'image/png',
-        },
-        {
-            src: '/assets/icon.png',
-            sizes: '512x512',
-            type: 'image/png',
-        },
-    ],
-}
+const manifestConfig: Partial<ManifestOptions> = {
+  name: 'NoteSpace',
+  short_name: 'NoteSpace',
+  description: 'A multiplatform note management and sharing app',
+  theme_color: '#ffffff',
+  icons: [
+    {
+      src: '/assets/icon.png',
+      sizes: '192x192',
+      type: 'image/png',
+    },
+    {
+      src: '/assets/icon.png',
+      sizes: '512x512',
+      type: 'image/png',
+    },
+  ],
+};
 
-export default manifestConfig;
\ No newline at end of file
+export default manifestConfig;
diff --git a/code/client/src/pwa/pwa-config.ts b/code/client/src/pwa/pwa-config.ts
index b367228f..348755d0 100644
--- a/code/client/src/pwa/pwa-config.ts
+++ b/code/client/src/pwa/pwa-config.ts
@@ -1,11 +1,11 @@
-import {VitePWAOptions} from "vite-plugin-pwa";
+import { VitePWAOptions } from 'vite-plugin-pwa';
 //import manifestConfig from "./manifest-config";
 
-const pwaConfig : Partial<VitePWAOptions> = {
-    registerType: 'autoUpdate',
-    //manifest: manifestConfig,
-    //devOptions: {
-      //  enabled: true,
-    //}
-}
-export default pwaConfig;
\ No newline at end of file
+const pwaConfig: Partial<VitePWAOptions> = {
+  registerType: 'autoUpdate',
+  //manifest: manifestConfig,
+  //devOptions: {
+  //  enabled: true,
+  //}
+};
+export default pwaConfig;
diff --git a/code/client/src/ui/components/sidebar/Sidebar.scss b/code/client/src/ui/components/sidebar/Sidebar.scss
index 239914ab..713ca03d 100644
--- a/code/client/src/ui/components/sidebar/Sidebar.scss
+++ b/code/client/src/ui/components/sidebar/Sidebar.scss
@@ -26,7 +26,7 @@
       border: none;
       color: black;
       font-size: 5vh;
-      padding: 0;
+      padding: 0 0 2vh 0;
       margin: 0;
       transition: transform 1s ease-in-out;
 
diff --git a/code/client/src/ui/components/sidebar/Sidebar.tsx b/code/client/src/ui/components/sidebar/Sidebar.tsx
index b8b06163..aa787630 100644
--- a/code/client/src/ui/components/sidebar/Sidebar.tsx
+++ b/code/client/src/ui/components/sidebar/Sidebar.tsx
@@ -18,10 +18,15 @@ function Sidebar() {
 
   if (!isLoaded || !isLoggedIn) return null;
   return (
-    <div className="sidebar" style={{ width }} onMouseLeave={handlers.handleMouseLeave}>
+    <div
+      className="sidebar"
+      style={{ width }}
+      onMouseEnter={handlers.handleMouseEnter}
+      onMouseLeave={handlers.handleMouseLeave}
+    >
       <div onMouseDown={handlers.handleMouseDown} className="dragger" />
       <div className="sidebar-header">
-        <button onMouseEnter={handlers.handleMouseEnter} onClick={handlers.handleClick}>
+        <button onClick={handlers.handleClick}>
           {isLocked ? (
             <RiMenuFoldLine className="icon" />
           ) : isOpen ? (
diff --git a/code/client/src/ui/pages/document/components/collaborators/Collaborators.scss b/code/client/src/ui/pages/document/components/collaborators/Collaborators.scss
index 4e554b45..c74ab70e 100644
--- a/code/client/src/ui/pages/document/components/collaborators/Collaborators.scss
+++ b/code/client/src/ui/pages/document/components/collaborators/Collaborators.scss
@@ -3,17 +3,17 @@
   top: 0;
   right: 0;
 
-  > div {
-    width: 4vh;
-    height: 4vh;
+  > button {
+    width: 5vh;
+    height: 5vh;
     border-radius: 50%;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    padding: 1vh;
+    padding: 3vh;
     margin: 1vh;
-
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 3vh;
 
     a {
       text-decoration: none !important;
diff --git a/code/client/src/ui/pages/document/components/collaborators/Collaborators.tsx b/code/client/src/ui/pages/document/components/collaborators/Collaborators.tsx
index a19f9249..ac46ae3f 100644
--- a/code/client/src/ui/pages/document/components/collaborators/Collaborators.tsx
+++ b/code/client/src/ui/pages/document/components/collaborators/Collaborators.tsx
@@ -1,9 +1,18 @@
 import useCollaborators from '@ui/pages/document/components/collaborators/useCollaborators';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import './Collaborators.scss';
 
 function Collaborators() {
   const collaborators = useCollaborators();
+  const navigate = useNavigate();
+
+  function scrollIntoView(id: string) {
+    const target = document.getElementById(id);
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   return (
     <div className="collaborators">
       {collaborators.map(collaborator => {
@@ -11,9 +20,18 @@ function Collaborators() {
         const initials =
           nameParts.length > 1 ? `${nameParts[0][0]}${nameParts[nameParts.length - 1][0]}` : nameParts[0][0];
         return (
-          <div key={collaborator.id} title={collaborator.name} style={{ backgroundColor: collaborator.color }}>
-            <Link to={`/profile/${collaborator.id}`}>{initials}</Link>
-          </div>
+          <button
+            key={collaborator.id}
+            title={collaborator.name}
+            style={{ backgroundColor: collaborator.color }}
+            onClick={() => scrollIntoView(collaborator.socketId)}
+            onContextMenu={e => {
+              e.preventDefault();
+              navigate(`/profile/${collaborator.id}`);
+            }}
+          >
+            {initials}
+          </button>
         );
       })}
     </div>
diff --git a/code/client/src/ui/pages/document/components/cursor/Cursor.tsx b/code/client/src/ui/pages/document/components/cursor/Cursor.tsx
index 971e29dc..8d6dd1ff 100644
--- a/code/client/src/ui/pages/document/components/cursor/Cursor.tsx
+++ b/code/client/src/ui/pages/document/components/cursor/Cursor.tsx
@@ -3,17 +3,19 @@ import { InlineStyle } from '@notespace/shared/src/document/types/styles';
 import './Cursor.scss';
 
 type CursorProps = {
+  id: string;
   color: string;
   styles: InlineStyle[];
   children: ReactNode;
 };
 
-function Cursor({ children, styles, color }: CursorProps) {
+function Cursor({ children, styles, color, id }: CursorProps) {
   const width = styles.includes('bold') ? '1.5px' : '1px';
   const angle = styles.includes('italic') ? '11deg' : '0deg';
   return (
     <>
       <span
+        id={id}
         className="cursor"
         style={{
           outline: `${width} solid ${color}`,
diff --git a/code/client/vite.config.ts b/code/client/vite.config.ts
index 4f94fc9b..2c02ff6c 100644
--- a/code/client/vite.config.ts
+++ b/code/client/vite.config.ts
@@ -5,8 +5,8 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { config } from 'dotenv';
-import {VitePWA} from "vite-plugin-pwa";
-import pwaConfig from "./src/pwa/pwa-config";
+import { VitePWA } from 'vite-plugin-pwa';
+import pwaConfig from './src/pwa/pwa-config';
 
 // Load environment variables from .env file
 config();
@@ -16,11 +16,7 @@ export default defineConfig({
   server: {
     port: Number.parseInt(process.env.VITE_PORT) || 5173,
   },
-  plugins: [
-    tsconfigPaths(),
-    react(),
-    VitePWA(pwaConfig)
-  ],
+  plugins: [tsconfigPaths(), react(), VitePWA(pwaConfig)],
   test: {
     globals: true,
     alias: {
diff --git a/code/server/src/controllers/http/middlewares/errorMiddleware.ts b/code/server/src/controllers/http/middlewares/errorMiddleware.ts
index 0c1f51d2..e3a921de 100644
--- a/code/server/src/controllers/http/middlewares/errorMiddleware.ts
+++ b/code/server/src/controllers/http/middlewares/errorMiddleware.ts
@@ -28,6 +28,4 @@ export default function errorMiddleware(error: Error, req: Request, res: Respons
   const message = response.statusCode === 500 ? 'Internal server error' : error.message;
   response.send({ error: message });
   ErrorLogger.logError(error.message);
-  console.log('name', error.name);
-  console.error(error);
 }
diff --git a/code/server/src/controllers/ws/events/document/onCursorChange.ts b/code/server/src/controllers/ws/events/document/onCursorChange.ts
index 90f6fb4f..f9980c05 100644
--- a/code/server/src/controllers/ws/events/document/onCursorChange.ts
+++ b/code/server/src/controllers/ws/events/document/onCursorChange.ts
@@ -36,7 +36,7 @@ export function getCursorColor(socketId: string) {
     const randomColor = getRandomColor();
     cursorColorsMap.set(socketId, randomColor);
   }
-  return cursorColorsMap.get(socketId);
+  return cursorColorsMap.get(socketId)!;
 }
 
 function getRandomColor(): string {
diff --git a/code/server/src/controllers/ws/events/document/onJoinDocument.ts b/code/server/src/controllers/ws/events/document/onJoinDocument.ts
index 7effa6f4..3084e1c2 100644
--- a/code/server/src/controllers/ws/events/document/onJoinDocument.ts
+++ b/code/server/src/controllers/ws/events/document/onJoinDocument.ts
@@ -3,6 +3,7 @@ import rooms from '@controllers/ws/rooms/rooms';
 import { InvalidParameterError } from '@domain/errors/errors';
 import { getUserFromSocket } from '@controllers/ws/utils';
 import { getCursorColor } from '@controllers/ws/events/document/onCursorChange';
+import { Collaborator } from '@notespace/shared/src/users/types';
 
 function onJoinDocument() {
   return function (socket: Socket, documentId: string) {
@@ -16,18 +17,20 @@ function onJoinDocument() {
     rooms.documents.join(socket, documentId, user);
 
     // broadcast to all clients in the document
-    socket.in(documentId).emit('joinedDocument', [{ ...user, color: getCursorColor(socket.id) }]);
+    const collaborator: Collaborator = { ...user, color: getCursorColor(socket.id), socketId: socket.id };
+    socket.in(documentId).emit('joinedDocument', [collaborator]);
 
     // send the clients that are already in the document to the new client
     const room = rooms.documents.getRoom(documentId)!;
-    const users = room
+    const collaborators: Collaborator[] = room
       .getClients()
       .map(client => ({
         ...client.user,
         color: getCursorColor(client.socketId),
+        socketId: client.socketId,
       }))
       .filter(u => u.id !== user.id);
-    socket.emit('joinedDocument', users);
+    socket.emit('joinedDocument', collaborators);
   };
 }
 
diff --git a/code/shared/src/users/types.ts b/code/shared/src/users/types.ts
index 21a206e8..b7eb1778 100644
--- a/code/shared/src/users/types.ts
+++ b/code/shared/src/users/types.ts
@@ -10,4 +10,5 @@ export type User = UserData & {
 
 export type Collaborator = UserData & {
   color: string;
+  socketId: string;
 };