move roomStatus check into MultiplayerWrapper (#4760)

concrete-utopia · Jan 18, 2024 · 82013b6 · 82013b6
1 parent 036e904
commit 82013b6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 36 deletions.
diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -177,10 +177,6 @@ export const NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
 
   const ref = React.useRef<HTMLDivElement | null>(null)
 
-  const roomStatus = useStatus()
-
-  const multiplayerActive = isFeatureEnabled('Multiplayer') && roomStatus === 'connected'
-
   if (isLiveMode(canvasControlProps.editorMode) && !canvasControlProps.keysPressed.cmd) {
     return (
       <div
@@ -256,12 +252,9 @@ export const NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
           <ElementContextMenu contextMenuInstance='context-menu-canvas' />
           <ElementContextMenu contextMenuInstance='context-menu-canvas-no-selection' />
         </div>
-        {when(
-          roomStatus === 'connected',
-          <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
-            <MultiplayerPresence />
-          </MultiplayerWrapper>,
-        )}
+        <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
+          <MultiplayerPresence />
+        </MultiplayerWrapper>
       </>
     )
   }

diff --git a/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx b/editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx
@@ -119,7 +119,6 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
 
   const [navigationData] = useAtom(RemixNavigationAtom)
 
-  const roomStatus = useStatus()
   const currentPath = (navigationData[EP.toString(props.target)] ?? null)?.location.pathname
 
   const pathLabel = getRemixLocationLabel(currentPath)
@@ -275,12 +274,9 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
 
   return (
     <CanvasOffsetWrapper>
-      {when(
-        roomStatus === 'connected',
-        <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
-          <RemixScenePathUpdater targetPathString={EP.toString(props.target)} />
-        </MultiplayerWrapper>,
-      )}
+      <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
+        <RemixScenePathUpdater targetPathString={EP.toString(props.target)} />
+      </MultiplayerWrapper>
       <FlexRow
         onMouseOver={labelSelectable ? onMouseOver : NO_OP}
         onMouseOut={labelSelectable ? onMouseLeave : NO_OP}

diff --git a/editor/src/components/canvas/multiplayer-presence.tsx b/editor/src/components/canvas/multiplayer-presence.tsx
@@ -8,7 +8,6 @@ import {
   useOthersListener,
   useRoom,
   useSelf,
-  useStatus,
   useStorage,
   useUpdateMyPresence,
 } from '../../../liveblocks.config'

diff --git a/editor/src/components/editor/canvas-toolbar.tsx b/editor/src/components/editor/canvas-toolbar.tsx
@@ -212,22 +212,6 @@ function switchToSelectModeCloseMenus(dispatch: EditorDispatch) {
 
 export const WrapInDivButtonTestId = 'wrap-in-div-button'
 
-const UnreadThreadsIndicatorWrapper = React.memo(() => {
-  const roomStatus = useStatus()
-
-  // without the roomStatus check, Liveblocks will flood the server with authentication requests
-  return (
-    <>
-      {when(
-        roomStatus === 'connected',
-        <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
-          <UnreadThreadsIndicator />
-        </MultiplayerWrapper>,
-      )}
-    </>
-  )
-})
-
 const UnreadThreadsIndicator = React.memo(() => {
   const canvasToolbarMode = useToolbarMode()
 
@@ -571,7 +555,9 @@ export const CanvasToolbar = React.memo(() => {
                 disabled={commentButtonDisabled}
               />
             </Tooltip>
-            <UnreadThreadsIndicatorWrapper />
+            <MultiplayerWrapper errorFallback={null} suspenseFallback={null}>
+              <UnreadThreadsIndicator />
+            </MultiplayerWrapper>
           </div>,
         )}
         <Separator />

diff --git a/editor/src/utils/multiplayer-wrapper.tsx b/editor/src/utils/multiplayer-wrapper.tsx
@@ -3,7 +3,7 @@ import type { CommentProps } from '@liveblocks/react-comments'
 import { Comment } from '@liveblocks/react-comments'
 import type { CSSProperties } from 'react'
 import React from 'react'
-import type { UserMeta } from '../../liveblocks.config'
+import { useStatus, type UserMeta } from '../../liveblocks.config'
 import { MultiplayerAvatar } from '../components/user-bar'
 import {
   multiplayerColorFromIndex,
@@ -16,6 +16,11 @@ type Fallback = NonNullable<React.ReactNode> | null
 
 export const MultiplayerWrapper = React.memo(
   (props: { errorFallback: Fallback; suspenseFallback: Fallback; children: any }) => {
+    const roomStatus = useStatus()
+    if (roomStatus !== 'connected') {
+      return null
+    }
+
     return (
       <ErrorBoundary fallback={props.errorFallback}>
         <ClientSideSuspense fallback={props.suspenseFallback}>