From f7891be7bc275d51ccc3710f64e894ccc11f348b Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 20 Nov 2023 10:47:36 +0100
Subject: [PATCH 1/3] single wrapper for multiplayer components
---
.../canvas/controls/comment-indicator.tsx | 9 ++++-----
.../canvas/controls/comment-popup.tsx | 14 +++++++-------
.../components/canvas/design-panel-root.tsx | 8 ++++----
editor/src/components/user-bar.tsx | 6 ++++--
editor/src/utils/multiplayer-wrap.tsx | 19 +++++++++++++++++++
5 files changed, 38 insertions(+), 18 deletions(-)
create mode 100644 editor/src/utils/multiplayer-wrap.tsx
diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
index b7439d47189f..5bd06691772f 100644
--- a/editor/src/components/canvas/controls/comment-indicator.tsx
+++ b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -4,19 +4,18 @@ import { jsx } from '@emotion/react'
import React from 'react'
import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
import { EditorModes } from '../../editor/editor-modes'
-import { ClientSideSuspense } from '@liveblocks/react'
import { useThreads } from '../../../../liveblocks.config'
import { useDispatch } from '../../editor/store/dispatch-context'
import { switchEditorMode } from '../../editor/actions/action-creators'
import { canvasPoint } from '../../../core/shared/math-utils'
import { UtopiaTheme } from '../../../uuiui'
-import { ErrorBoundary } from '../../../utils/react-error-boundary'
import { Substores, useEditorState } from '../../editor/store/store-hook'
import {
multiplayerColorFromIndex,
multiplayerInitialsFromName,
normalizeMultiplayerName,
} from '../../../core/shared/multiplayer'
+import { MultiplayerWrap } from '../../../utils/multiplayer-wrap'
export const CommentIndicator = React.memo(() => {
const projectId = useEditorState(
@@ -31,9 +30,9 @@ export const CommentIndicator = React.memo(() => {
return (
-
- {() => }
-
+
+
+
)
})
diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx
index 6ac5de97a594..33fdc0693512 100644
--- a/editor/src/components/canvas/controls/comment-popup.tsx
+++ b/editor/src/components/canvas/controls/comment-popup.tsx
@@ -3,18 +3,17 @@ import React from 'react'
import { Substores, useEditorState } from '../../editor/store/store-hook'
import { CanvasOffsetWrapper } from './canvas-offset-wrapper'
import { isCommentMode } from '../../editor/editor-modes'
-import { ClientSideSuspense } from '@liveblocks/react'
import { useCreateThread } from '../../../../liveblocks.config'
import type { ComposerSubmitComment } from '@liveblocks/react-comments'
import { Comment, Composer } from '@liveblocks/react-comments'
import { stopPropagation } from '../../inspector/common/inspector-utils'
import { UtopiaTheme } from '../../../uuiui'
-import { ErrorBoundary } from '../../../utils/react-error-boundary'
import {
useCanvasCommentThread,
useMyMultiplayerColorIndex,
} from '../../../core/commenting/comment-hooks'
import { isLoggedIn } from '../../editor/action-types'
+import { MultiplayerWrap } from '../../../utils/multiplayer-wrap'
export const CommentPopup = React.memo(() => {
const mode = useEditorState(
@@ -43,11 +42,12 @@ export const CommentPopup = React.memo(() => {
onKeyUp={stopPropagation}
onMouseUp={stopPropagation}
>
- Can not load comments}>
- Loading…}>
- {() => }
-
-
+ Can not load comments}
+ suspenseFallback={Loading…
}
+ >
+
+
)
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 692deb12d7ab..e5c25a970a2b 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -32,7 +32,7 @@ import { FlexRow } from 'utopia-api'
import type { StoredPanel } from './stored-layout'
import { MultiplayerCursors } from './multiplayer-cursors'
import { useStatus } from '../../../liveblocks.config'
-import { ClientSideSuspense } from '@liveblocks/react'
+import { MultiplayerWrap } from '../../utils/multiplayer-wrap'
interface NumberSize {
width: number
@@ -146,9 +146,9 @@ const DesignPanelRootInner = React.memo(() => {
{when(
roomStatus === 'connected',
- }>
- {() => }
- ,
+
+
+ ,
)}
diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
index c3d4ab4a5e31..a5373687a55e 100644
--- a/editor/src/components/user-bar.tsx
+++ b/editor/src/components/user-bar.tsx
@@ -1,4 +1,3 @@
-import { ClientSideSuspense } from '@liveblocks/react'
import React from 'react'
import { useOthers, useSelf, useStatus } from '../../liveblocks.config'
import { getUserPicture, isLoggedIn } from '../common/user'
@@ -13,6 +12,7 @@ import {
import { Avatar, Tooltip, useColorTheme } from '../uuiui'
import { Substores, useEditorState } from './editor/store/store-hook'
import { unless, when } from '../utils/react-conditionals'
+import { MultiplayerWrap } from '../utils/multiplayer-wrap'
const MAX_VISIBLE_OTHER_PLAYERS = 4
@@ -31,7 +31,9 @@ export const UserBar = React.memo(() => {
return
} else {
return (
- }>{() => }
+
+
+
)
}
})
diff --git a/editor/src/utils/multiplayer-wrap.tsx b/editor/src/utils/multiplayer-wrap.tsx
new file mode 100644
index 000000000000..497ef10dd0a5
--- /dev/null
+++ b/editor/src/utils/multiplayer-wrap.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { ErrorBoundary } from './react-error-boundary'
+import { ClientSideSuspense } from '@liveblocks/react'
+
+export const MultiplayerWrap = React.memo(
+ (props: {
+ errorFallback: React.ReactNode
+ suspenseFallback: NonNullable | null
+ children: any
+ }) => {
+ return (
+
+
+ {() => props.children}
+
+
+ )
+ },
+)
From e0d5e49504eab80cfe0fecdd7cf935cd8416a6ca Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 20 Nov 2023 10:48:35 +0100
Subject: [PATCH 2/3] fallback type
---
editor/src/utils/multiplayer-wrap.tsx | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/editor/src/utils/multiplayer-wrap.tsx b/editor/src/utils/multiplayer-wrap.tsx
index 497ef10dd0a5..ae30225daad4 100644
--- a/editor/src/utils/multiplayer-wrap.tsx
+++ b/editor/src/utils/multiplayer-wrap.tsx
@@ -2,12 +2,10 @@ import React from 'react'
import { ErrorBoundary } from './react-error-boundary'
import { ClientSideSuspense } from '@liveblocks/react'
+type Fallback = NonNullable | null
+
export const MultiplayerWrap = React.memo(
- (props: {
- errorFallback: React.ReactNode
- suspenseFallback: NonNullable | null
- children: any
- }) => {
+ (props: { errorFallback: Fallback; suspenseFallback: Fallback; children: any }) => {
return (
From c8247148361daa1d06ef37679df83dfdae4c8089 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Mon, 20 Nov 2023 10:53:03 +0100
Subject: [PATCH 3/3] rename to wrapper
---
editor/src/components/canvas/controls/comment-indicator.tsx | 6 +++---
editor/src/components/canvas/controls/comment-popup.tsx | 6 +++---
editor/src/components/canvas/design-panel-root.tsx | 6 +++---
editor/src/components/user-bar.tsx | 6 +++---
.../utils/{multiplayer-wrap.tsx => multiplayer-wrapper.tsx} | 2 +-
5 files changed, 13 insertions(+), 13 deletions(-)
rename editor/src/utils/{multiplayer-wrap.tsx => multiplayer-wrapper.tsx} (91%)
diff --git a/editor/src/components/canvas/controls/comment-indicator.tsx b/editor/src/components/canvas/controls/comment-indicator.tsx
index 5bd06691772f..2a85e8cb459e 100644
--- a/editor/src/components/canvas/controls/comment-indicator.tsx
+++ b/editor/src/components/canvas/controls/comment-indicator.tsx
@@ -15,7 +15,7 @@ import {
multiplayerInitialsFromName,
normalizeMultiplayerName,
} from '../../../core/shared/multiplayer'
-import { MultiplayerWrap } from '../../../utils/multiplayer-wrap'
+import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
export const CommentIndicator = React.memo(() => {
const projectId = useEditorState(
@@ -30,9 +30,9 @@ export const CommentIndicator = React.memo(() => {
return (
-
+
-
+
)
})
diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx
index 33fdc0693512..c6358eb871f6 100644
--- a/editor/src/components/canvas/controls/comment-popup.tsx
+++ b/editor/src/components/canvas/controls/comment-popup.tsx
@@ -13,7 +13,7 @@ import {
useMyMultiplayerColorIndex,
} from '../../../core/commenting/comment-hooks'
import { isLoggedIn } from '../../editor/action-types'
-import { MultiplayerWrap } from '../../../utils/multiplayer-wrap'
+import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
export const CommentPopup = React.memo(() => {
const mode = useEditorState(
@@ -42,12 +42,12 @@ export const CommentPopup = React.memo(() => {
onKeyUp={stopPropagation}
onMouseUp={stopPropagation}
>
- Can not load comments}
suspenseFallback={Loading…
}
>
-
+
)
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index e5c25a970a2b..e6602f8722f8 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -32,7 +32,7 @@ import { FlexRow } from 'utopia-api'
import type { StoredPanel } from './stored-layout'
import { MultiplayerCursors } from './multiplayer-cursors'
import { useStatus } from '../../../liveblocks.config'
-import { MultiplayerWrap } from '../../utils/multiplayer-wrap'
+import { MultiplayerWrapper } from '../../utils/multiplayer-wrapper'
interface NumberSize {
width: number
@@ -146,9 +146,9 @@ const DesignPanelRootInner = React.memo(() => {
{when(
roomStatus === 'connected',
-
+
- ,
+ ,
)}
diff --git a/editor/src/components/user-bar.tsx b/editor/src/components/user-bar.tsx
index a5373687a55e..73600069f196 100644
--- a/editor/src/components/user-bar.tsx
+++ b/editor/src/components/user-bar.tsx
@@ -12,7 +12,7 @@ import {
import { Avatar, Tooltip, useColorTheme } from '../uuiui'
import { Substores, useEditorState } from './editor/store/store-hook'
import { unless, when } from '../utils/react-conditionals'
-import { MultiplayerWrap } from '../utils/multiplayer-wrap'
+import { MultiplayerWrapper } from '../utils/multiplayer-wrapper'
const MAX_VISIBLE_OTHER_PLAYERS = 4
@@ -31,9 +31,9 @@ export const UserBar = React.memo(() => {
return
} else {
return (
-
+
-
+
)
}
})
diff --git a/editor/src/utils/multiplayer-wrap.tsx b/editor/src/utils/multiplayer-wrapper.tsx
similarity index 91%
rename from editor/src/utils/multiplayer-wrap.tsx
rename to editor/src/utils/multiplayer-wrapper.tsx
index ae30225daad4..1b37aaf1ec94 100644
--- a/editor/src/utils/multiplayer-wrap.tsx
+++ b/editor/src/utils/multiplayer-wrapper.tsx
@@ -4,7 +4,7 @@ import { ClientSideSuspense } from '@liveblocks/react'
type Fallback = NonNullable | null
-export const MultiplayerWrap = React.memo(
+export const MultiplayerWrapper = React.memo(
(props: { errorFallback: Fallback; suspenseFallback: Fallback; children: any }) => {
return (