Merge branch 'master' into za/doo-48-implement-a-pagemodal-where-user…

…s-can-seeupdate-their
Yyassin · Mar 3, 2024 · 84447be · 84447be
2 parents 117cbf1 + 8c85608
commit 84447be
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 9 deletions.
diff --git a/client/src/components/lib/BoardScroll.tsx b/client/src/components/lib/BoardScroll.tsx
@@ -15,6 +15,7 @@ import { renderElementsOnOffscreenCanvas } from '@/lib/export';
 import { useToast } from '@/components/ui/use-toast';
 import { ToastAction } from '@/components/ui/toast';
 import { useAuthStore } from '@/stores/AuthStore';
+import { fetchImageFromFirebaseStorage } from '@/views/SignInPage';
 
 export const createStateWithRoughElement = (state: CanvasElementState) => {
   const roughElements: Record<string, CanvasElement['roughElement']> = {};
@@ -128,6 +129,30 @@ export const BoardScroll = () => {
 
                   setThumbnailUrl(canvas?.toDataURL('image/png') ?? '');
                 }
+                const collaboratorAvatarMeta = (
+                  await axios.put(REST.collaborators.getAvatar, {
+                    collaboratorIds: board.collaborators,
+                  })
+                ).data.collaborators;
+                const collaboratorAvatarUrls = await Promise.all(
+                  Object.entries(
+                    collaboratorAvatarMeta as { id: string; avatar: string },
+                  ).map(async ([id, avatar]) => ({
+                    id,
+                    avatar: (avatar ?? '').includes('https')
+                      ? avatar
+                      : await fetchImageFromFirebaseStorage(
+                          `profilePictures/${avatar}.jpg`,
+                        ),
+                  })),
+                );
+                const collaboratorAvatarUrlsMap = collaboratorAvatarUrls.reduce(
+                  (acc, { id, avatar }) => {
+                    id && avatar && (acc[id] = avatar);
+                    return acc;
+                  },
+                  {} as Record<string, string>,
+                ) as Record<string, string>;
                 // TODO: Should perform and cache concurrent fetches for the board and its comments here
                 setBoardMeta({
                   roomID: isSelected ? '' : board.roomID,
@@ -138,6 +163,7 @@ export const BoardScroll = () => {
                   folder: isSelected ? '' : board.folder,
                   tags: isSelected ? [] : board.tags,
                   collabID: isSelected ? '' : collabID,
+                  collaboratorAvatars: collaboratorAvatarUrlsMap,
                 });
               } catch (error) {
                 toast({

diff --git a/client/src/components/lib/Canvas.tsx b/client/src/components/lib/Canvas.tsx
@@ -174,7 +174,6 @@ export default function Canvas() {
    */
   const initTenants = async () => {
     const tenantIds = (await tenancy.get(boardMeta.roomID)) as string[];
-    console.log(tenantIds);
     const activeTenants = tenantIds.reduce(
       (acc, id) => {
         const collabId = extractCollabID(id);

diff --git a/client/src/components/lib/CommentsSheetContent.tsx b/client/src/components/lib/CommentsSheetContent.tsx
@@ -210,7 +210,9 @@ const CommentsSheetContent = () => {
                 border: `0.2rem solid ${comment.outlineColor ?? 'white'}`,
               }}
             >
-              <AvatarImage src={comment.avatar} />
+              <AvatarImage
+                src={boardMeta.collaboratorAvatars[comment.collabId] ?? ''}
+              />
               <AvatarFallback>{comment.initials}</AvatarFallback>
             </Avatar>
             <div className="flex flex-col select-none">

diff --git a/client/src/components/lib/CursorPresence.tsx b/client/src/components/lib/CursorPresence.tsx
@@ -46,7 +46,7 @@ const CursorPresence = memo(() => {
     <svg
       className="h-[100vh] w-[100vw]"
       style={{
-        backgroundColor: 'red',
+        backgroundColor: 'transparent',
         position: 'absolute',
         zIndex: 4,
         pointerEvents: 'none',

diff --git a/client/src/components/lib/UserList/UserList.tsx b/client/src/components/lib/UserList/UserList.tsx
@@ -4,6 +4,8 @@ import CanvasTooltip from '../CanvasTooltip';
 import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
 import { useWebSocketStore } from '@/stores/WebSocketStore';
 import './UserList.css';
+import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
+import { extractCollabID } from '@/lib/misc';
 
 /**
  * Renders a list of users in the room, with their avatars,
@@ -12,6 +14,7 @@ import './UserList.css';
  */
 
 const UserList = () => {
+  const { boardMeta } = useCanvasBoardStore(['boardMeta']);
   const { activeTenants, activeProducerID } = useWebSocketStore([
     'activeTenants',
     'activeProducerID',
@@ -67,7 +70,13 @@ const UserList = () => {
                     : `0.2rem solid ${user.outlineColor ?? 'white'}`,
               }}
             >
-              <AvatarImage src={user.avatar} />
+              <AvatarImage
+                src={
+                  boardMeta.collaboratorAvatars[
+                    extractCollabID(user.email) ?? ''
+                  ] ?? ''
+                }
+              />
               <AvatarFallback>{user.initials}</AvatarFallback>
             </Avatar>
           </CanvasTooltip>

diff --git a/client/src/constants.ts b/client/src/constants.ts
@@ -35,6 +35,9 @@ export const REST = {
     deleteBoard: `${REST_ROOT}/board/deleteBoard`,
     updateBoard: `${REST_ROOT}/board/updateBoard`,
   },
+  collaborators: {
+    getAvatar: `${REST_ROOT}/collaborator/getCollaboratorAvatars`,
+  },
   comment: {
     getComments: `${REST_ROOT}/comment/getComments`,
     create: `${REST_ROOT}/comment/createComment`,

diff --git a/client/src/stores/CanavasBoardStore.ts b/client/src/stores/CanavasBoardStore.ts
@@ -40,6 +40,7 @@ interface CanvasBoardState {
     folder: string;
     tags: string[];
     collabID: string;
+    collaboratorAvatars: Record<string, string>;
   };
 }
 
@@ -76,6 +77,7 @@ export const initialCanvasState: CanvasBoardState = {
     folder: '',
     tags: [],
     collabID: '',
+    collaboratorAvatars: {},
   },
 };
 

diff --git a/client/src/views/SignInPage.tsx b/client/src/views/SignInPage.tsx
@@ -51,7 +51,7 @@ export function checkToken(token: string) {
   });
 }
 
-async function fetchImageFromFirebaseStorage(
+export async function fetchImageFromFirebaseStorage(
   storageUrl: string,
 ): Promise<string | null> {
   try {
@@ -95,9 +95,12 @@ export async function getUserDetails(
     });
 
     const userID = user.data.user.uid;
-    const profilePic = await fetchImageFromFirebaseStorage(
-      `profilePictures/${user.data.user.avatar}.jpg`, //use the id generated when signing up
-    );
+    // If it's a google image, don't fetch anything.
+    const profilePic = (user.data.user.avatar ?? '').includes('https')
+      ? user.data.user.avatar
+      : await fetchImageFromFirebaseStorage(
+          `profilePictures/${user.data.user.avatar}.jpg`, //use the id generated when signing up
+        );
     setUser(
       user.data.user.firstname ?? '',
       user.data.user.lastname ?? '',

diff --git a/node/src/api/collaborator/collaborator.controller.ts b/node/src/api/collaborator/collaborator.controller.ts
@@ -7,13 +7,39 @@ import {
   deleteCollaborator,
 } from '../../models/collaborator';
 import { HTTP_STATUS } from '../../constants';
+import { findUserById } from '../../models/user';
 
 /**
  * Firebase API controllers, logic for endpoint routes.
  * @author Ibrahim Almalki
  */
 
-// TODO: JSDOC
+const memo = {} as Record<string, string>;
+export const handleGetCollaboratorAvatars = async (
+  req: Request,
+  res: Response,
+) => {
+  const { collaboratorIds } = req.body as { collaboratorIds: string[] };
+  const collaboratorAvatarMap = await Promise.all(
+    collaboratorIds.map(async (id) => {
+      if (memo[id]) return { id, avatar: memo[id] };
+
+      const collaborator = await findCollaboratorById(id);
+      const userId = collaborator?.user ?? id;
+      const user = await findUserById(userId);
+      memo[id] = user?.avatar ?? '';
+      return { id: collaborator?.id, avatar: user?.avatar };
+    }),
+  );
+  const collaborators = collaboratorAvatarMap.reduce(
+    (acc, { id, avatar }) => {
+      id && avatar && (acc[id] = avatar);
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+  res.status(HTTP_STATUS.SUCCESS).json({ collaborators });
+};
 
 //Create collaborator
 export const handleCreateCollaborator = async (req: Request, res: Response) => {

diff --git a/node/src/api/collaborator/collaborator.route.ts b/node/src/api/collaborator/collaborator.route.ts
@@ -4,6 +4,7 @@ import {
   handleDeleteCollaborator,
   handleFindCollaboratorById,
   handleFindCollaboratorsById,
+  handleGetCollaboratorAvatars,
   handleUpdateCollaborator,
 } from './collaborator.controller';
 
@@ -21,6 +22,9 @@ router.post('/createCollaborator', handleCreateCollaborator);
 // GET collaborator by ID
 router.get('/getCollaborator', handleFindCollaboratorById);
 
+// GET all collaborator avatars
+router.put('/getCollaboratorAvatars', handleGetCollaboratorAvatars);
+
 // GET collaborators by ID
 router.get('/getCollaborators', handleFindCollaboratorsById);