diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx index 601cadaccb70..34fbc6be2266 100644 --- a/editor/src/components/canvas/controls/comment-indicator.tsx +++ b/editor/src/components/canvas/controls/comment-indicator.tsx @@ -42,6 +42,7 @@ import { setRightMenuTab } from '../../editor/actions/action-creators' import { RightMenuTab } from '../../editor/store/editor-state' import { when } from '../../../utils/react-conditionals' import { CommentRepliesCounter } from './comment-replies-counter' +import { useMyUserId } from '../../../core/shared/multiplayer-hooks' const IndicatorSize = 24 const MagnifyScale = 1.15 @@ -113,20 +114,10 @@ function useCommentBeingComposed(): TemporaryCommentIndicatorProps | null { const collabs = useStorage((storage) => storage.collaborators) - const userId = useEditorState( - Substores.userState, - (store) => { - if (store.userState.loginState.type !== 'LOGGED_IN') { - return null - } - - return store.userState.loginState.user.userId - }, - 'CommentThread userId', - ) + const myUserId = useMyUserId() const collaboratorInfo = React.useMemo(() => { - const collaborator = optionalMap((id) => collabs[id], userId) + const collaborator = optionalMap((id) => collabs[id], myUserId) if (collaborator == null) { return { initials: 'AN', @@ -140,7 +131,7 @@ function useCommentBeingComposed(): TemporaryCommentIndicatorProps | null { color: multiplayerColorFromIndex(collaborator.colorIndex), avatar: collaborator.avatar, } - }, [collabs, userId]) + }, [collabs, myUserId]) if (position == null) { return null @@ -274,14 +265,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => { 'CommentIndicator canvasOffset', ) - const { location, scene: commentScene } = useCanvasLocationOfThread(thread) - - const remixLocationRoute = thread.metadata.remixLocationRoute ?? null - - const remixState = useRemixNavigationContext(commentScene) - - const isOnAnotherRoute = - remixLocationRoute != null && remixLocationRoute !== remixState?.location.pathname + const { location } = useCanvasLocationOfThread(thread) const readByMe = useMyThreadReadStatus(thread) diff --git a/editor/src/components/canvas/multiplayer-presence.tsx b/editor/src/components/canvas/multiplayer-presence.tsx index a3bcd493b337..94b6f0d5e57f 100644 --- a/editor/src/components/canvas/multiplayer-presence.tsx +++ b/editor/src/components/canvas/multiplayer-presence.tsx @@ -45,10 +45,9 @@ import CanvasActions from './canvas-actions' import { activeFrameActionToString } from './commands/set-active-frames-command' import { canvasPointToWindowPoint, windowToCanvasCoordinates } from './dom-lookup' import { ActiveRemixSceneAtom, RemixNavigationAtom } from './remix/utopia-remix-root-component' -import { useRemixPresence } from '../../core/shared/multiplayer-hooks' +import { useMyUserId, useRemixPresence } from '../../core/shared/multiplayer-hooks' import { CanvasOffsetWrapper } from './controls/canvas-offset-wrapper' import { when } from '../../utils/react-conditionals' -import { isFeatureEnabled } from '../../utils/feature-switches' import { CommentIndicators } from './controls/comment-indicator' import { CommentPopup } from './controls/comment-popup' @@ -408,12 +407,15 @@ const FollowingOverlay = React.memo(() => { FollowingOverlay.displayName = 'FollowingOverlay' const MultiplayerShadows = React.memo(() => { - const me = useSelf() + const myUserId = useMyUserId() const updateMyPresence = useUpdateMyPresence() const collabs = useStorage((store) => store.collaborators) const others = useOthers((list) => { - const presences = normalizeOthersList(me.id, list) + if (myUserId == null) { + return [] + } + const presences = normalizeOthersList(myUserId, list) return presences.map((p) => ({ presenceInfo: p, userInfo: collabs[p.id], diff --git a/editor/src/core/commenting/comment-hooks.tsx b/editor/src/core/commenting/comment-hooks.tsx index 65c69f36d9b5..39b09e8f9e8e 100644 --- a/editor/src/core/commenting/comment-hooks.tsx +++ b/editor/src/core/commenting/comment-hooks.tsx @@ -28,6 +28,7 @@ import type { ElementPath } from '../shared/project-file-types' import type { ElementInstanceMetadata } from '../shared/element-template' import * as EP from '../shared/element-path' import { getCurrentTheme } from '../../components/editor/store/editor-state' +import { useMyUserId } from '../shared/multiplayer-hooks' export function useCanvasCommentThreadAndLocation(comment: CommentId): { location: CanvasPoint | null @@ -268,17 +269,20 @@ export function useUnresolvedThreads() { export function useReadThreads() { const threads = useThreads() - const self = useSelf() + const myUserId = useMyUserId() const threadReadStatuses = useStorage((store) => store.userReadStatusesByThread) const filteredThreads = threads.threads.filter((thread) => { + if (myUserId == null) { + return false + } if (thread == null) { return false } if (threadReadStatuses[thread.id] == null) { return false } - return threadReadStatuses[thread.id][self.id] === true + return threadReadStatuses[thread.id][myUserId] === true }) return { @@ -301,8 +305,11 @@ export function useSetThreadReadStatusOnMount(thread: ThreadData } export function useMyThreadReadStatus(thread: ThreadData | null): ThreadReadStatus { - const self = useSelf() + const myUserId = useMyUserId() return useStorage((store) => { + if (myUserId == null) { + return 'unread' + } if (thread == null) { return 'unread' } @@ -310,7 +317,7 @@ export function useMyThreadReadStatus(thread: ThreadData | null) if (statusesForThread == null) { return 'unread' } - return statusesForThread[self.id] === true ? 'read' : 'unread' + return statusesForThread[myUserId] === true ? 'read' : 'unread' }) }