Fix images not loading.

client/src/components/lib/BoardScroll.tsx

@@ -106,10 +106,16 @@ export const BoardScroll = () => {
   useEffect(() => {
     setBoardMeta({ title: '', id: '' });
   }, [folder]);
+  const dup = new Set<string>();
   const sortedCavases = (
     searchCanvases.length === 0 ? canvases : searchCanvases
   )
-    .filter((board) => (folder === 'Recent' ? true : folder === board.folder))
+    .filter(
+      (board) =>
+        (folder === 'Recent' ? true : folder === board.folder) &&
+        !dup.has(board.id) &&
+        dup.add(board.id),
+    )
     .sort((a, b) => {
       const dateA = new Date(a.updatedAt);
       const dateB = new Date(b.updatedAt);
@@ -144,9 +150,10 @@ export const BoardScroll = () => {
     // Rerender on isImagePlaceds change to update the thumbnail
   }, [state, fileIds]);
 
-  const isOwner =
-    boardMeta.users.find((user) => user.collabID === boardMeta.collabID)
-      ?.permission === 'owner';
+  const isOwner = boardMeta.users[0]
+    ? boardMeta.users.find((user) => user.collabID === boardMeta.collabID)
+        ?.permission === 'owner'
+    : true;
 
   return (
     <div className="w-full h-full p-4 backdrop-blur overflow-auto">

client/src/components/lib/IconDropDown.tsx

@@ -51,7 +51,7 @@ export const IconDropDown = () => {
               className="text-violet11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
               delayMs={600}
             >
-              JD
+              {userFirstName[0] + userLastName[0]}
             </Avatar.Fallback>
           </Avatar.Root>
           <div className="flex flex-col">

client/src/components/lib/UserList/UserList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState } from 'react';
 import CanvasTooltip from '../CanvasTooltip';
 import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
 import { useWebSocketStore } from '@/stores/WebSocketStore';
 import './UserList.css';
 import { useCanvasBoardStore } from '@/stores/CanavasBoardStore';
@@ -30,58 +30,63 @@
 
   return (
     <div className="flex items-center">
-      {Object.values(activeTenants).map((user, index) => (
-        <div
-          key={index}
-          /**
-           * Translate away from the focused avatar, if any.
-           */
-          className={`relative transition-transform transform ${
-            focusedIndex !== null && focusedIndex !== index
-              ? index > focusedIndex
-                ? 'translate-x-6 -ml-3'
-                : '-translate-x-6 -ml-3'
-              : '-ml-3'
-          } `}
-        >
-          <CanvasTooltip
-            className="radix-themes-custom-fonts"
-            content={`${user.username} ${
-              activeProducerID === user.email ? ' (Sharing Screen)' : ''
-            }`}
-            side="bottom"
-            sideOffset={5}
+      {Object.values(activeTenants).map((user, index) => {
+        return (
+          <div
+            key={index}
+            /**
+             * Translate away from the focused avatar, if any.
+             */
+            className={`relative transition-transform transform ${
+              focusedIndex !== null && focusedIndex !== index
+                ? index > focusedIndex
+                  ? 'translate-x-6 -ml-3'
+                  : '-translate-x-6 -ml-3'
+                : '-ml-3'
+            } `}
           >
-            {/* Add a blinking animation to the streamer, if any. */}
-            <Avatar
-              className={`cursor-pointer ${
-                focusedIndex === index ? 'transform scale-125' : ''
-              } ${
-                user.outlineColor ? `border-[0.2rem] ${user.outlineColor}` : ''
-              } ${
-                user.email === activeProducerID ? 'blink-active-producer' : ''
+            <CanvasTooltip
+              className="radix-themes-custom-fonts"
+              content={`${user.username} ${
+                activeProducerID === user.email ? ' (Sharing Screen)' : ''
               }`}
-              onMouseEnter={() => handleAvatarHover(index)}
-              onMouseLeave={handleAvatarLeave}
-              style={{
-                border:
-                  user.email === activeProducerID
-                    ? ''
-                    : `0.2rem solid ${user.outlineColor ?? 'white'}`,
-              }}
+              side="bottom"
+              sideOffset={5}
             >
-              <AvatarImage
-                src={
-                  boardMeta.collaboratorAvatars[
-                    extractCollabID(user.email) ?? ''
-                  ] ?? ''
-                }
-              />
-              <AvatarFallback>{user.initials}</AvatarFallback>
-            </Avatar>
-          </CanvasTooltip>
-        </div>
-      ))}
+              {/* Add a blinking animation to the streamer, if any. */}
+              <Avatar
+                className={`cursor-pointer ${
+                  focusedIndex === index ? 'transform scale-125' : ''
+                } ${
+                  user.outlineColor
+                    ? `border-[0.2rem] ${user.outlineColor}`
+                    : ''
+                } ${
+                  user.email === activeProducerID ? 'blink-active-producer' : ''
+                }`}
+                onMouseEnter={() => handleAvatarHover(index)}
+                onMouseLeave={handleAvatarLeave}
+                style={{
+                  border:
+                    user.email === activeProducerID
+                      ? ''
+                      : `0.2rem solid ${user.outlineColor ?? 'white'}`,
+                }}
+              >
+                <img
+                  src={
+                    boardMeta.collaboratorAvatars[
+                      extractCollabID(user.email) ?? ''
+                    ] ?? ''
+                  }
+                  alt=""
+                />
+                <AvatarFallback>{user.initials}</AvatarFallback>
+              </Avatar>
+            </CanvasTooltip>
+          </div>
+        );
+      })}
     </div>
   );
 };

client/src/hooks/useSocket.tsx

@@ -20,6 +20,7 @@ import axios from 'axios';
 import { REST } from '@/constants';
 import { createStateWithRoughElement } from '@/components/lib/BoardScroll';
 import { fetchImageFromFirebaseStorage } from '@/views/SignInPage';
+import { useAppStore } from '@/stores/AppStore';
 
 /**
  * Defines a hook that controls all socket related activities
@@ -112,6 +113,7 @@ export const useSocket = () => {
       'addUser',
       'updateAvatars',
     ]);
+  const { setIsViewingComments } = useAppStore(['setIsViewingComments']);
 
   const socket = useRef<WebsocketClient>();
 
@@ -298,6 +300,7 @@ export const useSocket = () => {
       if (socket.current?.room !== null) {
         socket.current?.leaveRoom();
       }
+      setIsViewingComments(false);
     } else {
       socket.current?.joinRoom(roomID, boardMeta.collabID);
     }

client/src/views/SignInPage.tsx

@@ -31,9 +31,12 @@ import {
 import { getStorage, ref, getDownloadURL } from 'firebase/storage';
 import { createStateWithRoughElement } from '@/components/lib/BoardScroll';
 import {
+  CanvasElement,
   CanvasElementState,
   useCanvasElementStore,
 } from '@/stores/CanvasElementsStore';
+import { commitImageToCache, getImageDataUrl } from '@/lib/image';
+import { BinaryFileData } from '@/types';
 
 /**
  * It is the sign in page where user either inputs email and password or
@@ -94,6 +97,11 @@ export async function getUserDetails(
     }>,
   ) => void,
   setCanvasElementState: (element: CanvasElementState) => void,
+  editCanvasElement: (
+    id: string,
+    partialElement: Partial<CanvasElement>,
+    isLive?: boolean | undefined,
+  ) => void,
 ) {
   try {
     const user = await axios.get(REST.user.get, {
@@ -120,6 +128,7 @@ export async function getUserDetails(
       setCanvases,
       setBoardMeta,
       setCanvasElementState,
+      editCanvasElement,
     );
   } catch (error) {
     console.error('Error:', error);
@@ -141,9 +150,15 @@ export const checkURL = async (
       collabID: string;
       users: SharedUser[];
       permission: string;
+      collaboratorAvatarUrls: Record<string, string>;
     }>,
   ) => void,
   setCanvasElementState: (element: CanvasElementState) => void,
+  editCanvasElement: (
+    id: string,
+    partialElement: Partial<CanvasElement>,
+    isLive?: boolean | undefined,
+  ) => void,
   signUp = false,
 ) => {
   const queryParams = new URLSearchParams(window.location.search);
@@ -160,6 +175,35 @@ export const checkURL = async (
       console.log('users ', board.data.users);
       console.log('permissions', board.data.permission);
       console.log(board);
+
+      const collaboratorAvatarMeta = (
+        await axios.put(REST.collaborators.getAvatar, {
+          collaboratorIds: board.data.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>;
+
       setBoardMeta({
         roomID: board.data.roomID,
         title: board.data.title,
@@ -171,12 +215,43 @@ export const checkURL = async (
         collabID: board.data.collabID,
         users: board.data.users,
         permission: board.data.permission,
+        collaboratorAvatarUrls: collaboratorAvatarUrlsMap,
       });
 
+      // Fetch images from firebase storage
+      Object.entries(board.data.serialized.fileIds).forEach(
+        async ([elemId, fileId]) => {
+          const imageUrl = await fetchImageFromFirebaseStorage(
+            `boardImages/${fileId}.jpg`,
+          );
+          const dataUrl = imageUrl && (await getImageDataUrl(imageUrl));
+          if (!dataUrl)
+            throw new Error('Failed to resolve saved image dataurls');
+
+          const binary = {
+            dataURL: dataUrl,
+            id: fileId,
+            mimeType: 'image/jpeg',
+          } as BinaryFileData;
+
+          const imageElement = { id: elemId };
+          commitImageToCache(
+            {
+              ...binary,
+              lastRetrieved: Date.now(),
+            },
+            imageElement,
+            // Will set fileIds, triggering a rerender. A placeholder
+            // will be shown in the mean time.
+            editCanvasElement,
+          );
+        },
+      );
+
       setCanvasElementState(createStateWithRoughElement(board.data.serialized));
       isSharedCanvas = true;
-    } catch {
-      console.log('error');
+    } catch (e: unknown) {
+      console.log(e);
     }
 
     //remove variable from url
@@ -211,8 +286,9 @@ export default function SignInPage() {
     'setCanvases',
     'setBoardMeta',
   ]);
-  const { setCanvasElementState } = useCanvasElementStore([
+  const { setCanvasElementState, editCanvasElement } = useCanvasElementStore([
     'setCanvasElementState',
+    'editCanvasElement',
   ]);
   const emailRef = useRef<HTMLInputElement | null>(null);
   const passwordRef = useRef<HTMLInputElement | null>(null);
@@ -236,6 +312,7 @@ export default function SignInPage() {
           setCanvases,
           setBoardMeta,
           setCanvasElementState,
+          editCanvasElement,
         )
       )?.valueOf(); //get name, email, avatar of user
 
@@ -284,6 +361,7 @@ export default function SignInPage() {
               setCanvases,
               setBoardMeta,
               setCanvasElementState,
+              editCanvasElement,
             )
           ).valueOf();
 

client/src/views/Viewport.tsx

@@ -110,7 +110,7 @@ const Viewport = () => {
           <ShareBoardDialog
             open={isShareDialogOpen}
             setOpen={setIsShareDialogOpen}
-            boardLink={boardMeta.shareUrl}
+            boardLink={`${window.location.href}?boardID=${boardMeta.id}`}
             users={boardMeta.users}
           />
           <EditBoardDataDialog