From 35dbd20d6b0a2791dba183e74d8e06b3d714f888 Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Mon, 20 Nov 2023 16:50:21 +0100
Subject: [PATCH] Extract hook

---
 editor/src/components/user-bar.tsx           |  6 +++---
 editor/src/core/commenting/comment-hooks.tsx | 12 ++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
index 5c8e134058fa..9b7b98c6e453 100644
--- a/editor/src/components/user-bar.tsx
+++ b/editor/src/components/user-bar.tsx
@@ -17,6 +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'
 
 const MAX_VISIBLE_OTHER_PLAYERS = 4
 
@@ -61,12 +62,11 @@ const MultiplayerUserBar = React.memo(() => {
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
-  const me = useSelf()
-  const myUser = useStorage((store) => store.collaborators[me.id])
+  const { user: myUser } = useMyUserAndPresence()
   const myName = normalizeMultiplayerName(myUser.name)
 
   const others = useOthers((list) =>
-    normalizeOthersList(me.id, list).map((other) => ({
+    normalizeOthersList(myUser.id, list).map((other) => ({
       id: other.id,
       name: myUser.name,
       colorIndex: myUser.colorIndex,
diff --git a/editor/src/core/commenting/comment-hooks.tsx b/editor/src/core/commenting/comment-hooks.tsx
index a3f834f054b8..33f904c643ab 100644
--- a/editor/src/core/commenting/comment-hooks.tsx
+++ b/editor/src/core/commenting/comment-hooks.tsx
@@ -12,10 +12,18 @@ export function useCanvasCommentThread(x: number, y: number): ThreadData<ThreadM
   return thread
 }
 
-export function useMyMultiplayerColorIndex() {
+export function useMyUserAndPresence() {
   const me = useSelf()
   const myUser = useStorage((store) => store.collaborators[me.id])
-  return myUser.colorIndex
+  return {
+    presence: me,
+    user: myUser,
+  }
+}
+
+export function useMyMultiplayerColorIndex() {
+  const me = useMyUserAndPresence()
+  return me.user.colorIndex
 }
 
 export function useAddMyselfToCollaborators() {