From f76a484a16785d89d35071166137ef46e76d27e2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:17:57 +0100
Subject: [PATCH] fix loading collaborators

---
 .../components/canvas/multiplayer-cursors.tsx |  4 +--
 editor/src/components/user-bar.tsx            | 16 ++++-----
 editor/src/core/commenting/comment-hooks.tsx  | 35 ++++++++++++++++---
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/editor/src/components/canvas/multiplayer-cursors.tsx b/editor/src/components/canvas/multiplayer-cursors.tsx
index f3b0b000ceb7..e261e0868fd9 100644
--- a/editor/src/components/canvas/multiplayer-cursors.tsx
+++ b/editor/src/components/canvas/multiplayer-cursors.tsx
@@ -23,7 +23,7 @@ import { useDispatch } from '../editor/store/dispatch-context'
 import { Substores, useEditorState } from '../editor/store/store-hook'
 import CanvasActions from './canvas-actions'
 import { canvasPointToWindowPoint, windowToCanvasCoordinates } from './dom-lookup'
-import { useAddMyselfToCollaborators } from '../../core/commenting/comment-hooks'
+import { getCollaborator, useAddMyselfToCollaborators } from '../../core/commenting/comment-hooks'
 
 export const MultiplayerPresence = React.memo(() => {
   const dispatch = useDispatch()
@@ -95,7 +95,7 @@ const MultiplayerCursors = React.memo(() => {
     const presences = normalizeOthersList(me.id, list)
     return presences.map((p) => ({
       presenceInfo: p,
-      userInfo: collabs[p.id],
+      userInfo: getCollaborator(collabs, p),
     }))
   })
 
diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
index 9b7b98c6e453..23236f73dc54 100644
--- a/editor/src/components/user-bar.tsx
+++ b/editor/src/components/user-bar.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useOthers, useSelf, useStatus, useStorage } from '../../liveblocks.config'
+import { useOthers, useStatus, useStorage } from '../../liveblocks.config'
 import { getUserPicture, isLoggedIn } from '../common/user'
 import type { MultiplayerColor } from '../core/shared/multiplayer'
 import {
@@ -17,7 +17,7 @@ import { useDispatch } from './editor/store/dispatch-context'
 import { switchEditorMode } from './editor/actions/action-creators'
 import type { EditorAction } from './editor/action-types'
 import { EditorModes, isFollowMode } from './editor/editor-modes'
-import { useMyUserAndPresence } from '../core/commenting/comment-hooks'
+import { getCollaborator, useMyUserAndPresence } from '../core/commenting/comment-hooks'
 
 const MAX_VISIBLE_OTHER_PLAYERS = 4
 
@@ -61,17 +61,13 @@ SinglePlayerUserBar.displayName = 'SinglePlayerUserBar'
 const MultiplayerUserBar = React.memo(() => {
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
+  const collabs = useStorage((store) => store.collaborators)
 
   const { user: myUser } = useMyUserAndPresence()
-  const myName = normalizeMultiplayerName(myUser.name)
+  const myName = React.useMemo(() => normalizeMultiplayerName(myUser.name), [myUser])
 
   const others = useOthers((list) =>
-    normalizeOthersList(myUser.id, list).map((other) => ({
-      id: other.id,
-      name: myUser.name,
-      colorIndex: myUser.colorIndex,
-      picture: myUser.avatar,
-    })),
+    normalizeOthersList(myUser.id, list).map((other) => getCollaborator(collabs, other)),
   )
 
   const visibleOthers = React.useMemo(() => {
@@ -136,7 +132,7 @@ const MultiplayerUserBar = React.memo(() => {
                 name={multiplayerInitialsFromName(name)}
                 tooltip={name}
                 color={multiplayerColorFromIndex(other.colorIndex)}
-                picture={other.picture}
+                picture={other.avatar}
                 border={true}
                 coloredTooltip={true}
                 onClick={toggleFollowing(other.id)}
diff --git a/editor/src/core/commenting/comment-hooks.tsx b/editor/src/core/commenting/comment-hooks.tsx
index 33f904c643ab..326f50d9241e 100644
--- a/editor/src/core/commenting/comment-hooks.tsx
+++ b/editor/src/core/commenting/comment-hooks.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
+import type { User } from '@liveblocks/client'
 import { LiveObject, type ThreadData } from '@liveblocks/client'
-import type { ThreadMetadata } from '../../../liveblocks.config'
-import { useMutation, useRoom, useSelf, useStorage, useThreads } from '../../../liveblocks.config'
+import type { Presence, ThreadMetadata, UserMeta } from '../../../liveblocks.config'
+import { useMutation, useSelf, useStorage, useThreads } from '../../../liveblocks.config'
 import { Substores, useEditorState } from '../../components/editor/store/store-hook'
 import { normalizeMultiplayerName, possiblyUniqueColor } from '../shared/multiplayer'
 import { isLoggedIn } from '../../common/user'
@@ -12,12 +13,36 @@ export function useCanvasCommentThread(x: number, y: number): ThreadData<ThreadM
   return thread
 }
 
-export function useMyUserAndPresence() {
+function placeholderUserMeta(user: User<Presence, UserMeta>): UserMeta {
+  return {
+    id: user.id,
+    name: null,
+    avatar: null,
+    colorIndex: null,
+  }
+}
+
+interface Collaborators {
+  [key: string]: UserMeta
+}
+
+export function getCollaborator(
+  collabs: Collaborators,
+  source: User<Presence, UserMeta>,
+): UserMeta {
+  return collabs[source.id] ?? placeholderUserMeta(source)
+}
+
+export function useMyUserAndPresence(): {
+  presence: User<Presence, UserMeta>
+  user: UserMeta
+} {
   const me = useSelf()
-  const myUser = useStorage((store) => store.collaborators[me.id])
+  const collabs = useStorage((store) => store.collaborators)
+  const myUser: UserMeta | null = getCollaborator(collabs, me)
   return {
     presence: me,
-    user: myUser,
+    user: myUser ?? placeholderUserMeta(me),
   }
 }