fix: refresh whiteboard

100mslive · Jul 11, 2024 · 638d678 · 638d678
1 parent 499b15f
commit 638d678
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/hms-whiteboard/src/ErrorFallback.tsx b/packages/hms-whiteboard/src/ErrorFallback.tsx
@@ -1,16 +1,17 @@
 import React, { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useValue } from '@tldraw/state';
-import { Editor, hardResetEditor, refreshPage } from '@tldraw/tldraw';
+import { Editor, hardResetEditor } from '@tldraw/tldraw';
 import classNames from 'classnames';
 
 const DISCORD_URL = 'https://discord.gg/pTge2BwDBq';
 
 export type TLErrorFallbackComponent = ComponentType<{
   error: unknown;
+  refresh: () => void;
   editor?: Editor;
 }>;
 
-export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
+export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor, refresh }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV !== 'production');
   const [didCopy, setDidCopy] = useState(false);
@@ -81,10 +82,6 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
     setDidCopy(true);
   };
 
-  const refresh = () => {
-    refreshPage();
-  };
-
   const resetLocalState = async () => {
     hardResetEditor();
   };
@@ -152,11 +149,8 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
                 {shouldShowError ? 'Hide details' : 'Show details'}
               </button>
               <div className="tl-error-boundary__content__actions__group">
-                <button className="tl-error-boundary__reset" onClick={() => setShouldShowResetConfirmation(true)}>
-                  Reset data
-                </button>
                 <button className="tl-error-boundary__refresh" onClick={refresh}>
-                  Refresh Page
+                  Refresh
                 </button>
               </div>
             </div>

diff --git a/packages/hms-whiteboard/src/Whiteboard.tsx b/packages/hms-whiteboard/src/Whiteboard.tsx
@@ -11,7 +11,20 @@ export interface WhiteboardProps {
   transparentCanvas?: boolean;
   onMount?: (args: { store?: unknown; editor?: unknown }) => void;
 }
-export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas, onMount }: WhiteboardProps) {
+export function Whiteboard(props: WhiteboardProps) {
+  const [key, setKey] = useState(Date.now() + props.token);
+
+  return <CollaborativeEditor key={key} refresh={() => setKey(Date.now() + props.token)} {...props} />;
+}
+
+function CollaborativeEditor({
+  endpoint,
+  token,
+  zoomToContent,
+  transparentCanvas,
+  onMount,
+  refresh,
+}: WhiteboardProps & { refresh: () => void }) {
   const [editor, setEditor] = useState<Editor>();
   const store = useCollaboration({
     endpoint,
@@ -33,7 +46,9 @@ export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas,
       autoFocus
       store={store}
       onMount={handleMount}
-      components={{ ErrorFallback }}
+      components={{
+        ErrorFallback: ({ error, editor }) => <ErrorFallback editor={editor} error={error} refresh={refresh} />,
+      }}
       hideUi={editor?.getInstanceState()?.isReadonly}
       initialState={editor?.getInstanceState()?.isReadonly ? 'hand' : 'select'}
     />