"Room Closed" UI with "Reconnect" btn

holium · Aug 3, 2023 · d58f4ef · d58f4ef
1 parent cb2eed1
commit d58f4ef
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 10 deletions.
diff --git a/app/src/renderer/apps/Notes/components/Editor/Editor.tsx b/app/src/renderer/apps/Notes/components/Editor/Editor.tsx
@@ -1,7 +1,8 @@
 import debounce from 'lodash/debounce';
 import { observer } from 'mobx-react';
 
-import { Flex, Spinner, Text } from '@holium/design-system/general';
+import { Button, Flex, Spinner, Text } from '@holium/design-system/general';
+import { useToggle } from '@holium/design-system/util';
 import { PresenceBroadcast } from '@holium/realm-presence';
 
 import { DataPacketKind } from 'renderer/apps/Rooms/store/room.types';
@@ -33,11 +34,14 @@ const EditorPresenter = () => {
   const { loggedInAccount } = useAppState();
   const { notesStore, spacesStore } = useShipStore();
 
+  const reconnecting = useToggle(false);
+
   const selectedSpace = spacesStore.selected;
   const {
     selectedNote,
     selectedAwareness,
     initializing,
+    connectingToNoteRoom,
     createNoteUpdateLocally,
     saveNoteUpdates,
   } = notesStore;
@@ -93,24 +97,71 @@ const EditorPresenter = () => {
     return null;
   }
 
-  const isPersonalNote =
-    selectedNote.space === `/${loggedInAccount.serverId}/our`;
-  const alreadyInRoom =
-    roomsStore.currentRoom?.path === selectedSpace.path + selectedNote.id;
-
-  if (initializing || (!isPersonalNote && !alreadyInRoom)) {
+  if (initializing) {
     return (
       <Flex flex={1} justifyContent="center" alignItems="center" height="100%">
         <Flex flexDirection="column" alignItems="center" gap="12px">
           <Spinner size="19px" width={2} />
-          <Text.Body opacity={0.5}>
-            {initializing ? 'Syncing updates' : 'Connecting to peers'}
-          </Text.Body>
+          <Text.Body opacity={0.5}>Syncing updates</Text.Body>
         </Flex>
       </Flex>
     );
   }
 
+  const isSpaceNote = selectedNote.space !== `/${loggedInAccount.serverId}/our`;
+  const roomPath = selectedSpace.path + selectedNote.id;
+  const existingRoom = roomsStore.getRoomByPath(roomPath);
+
+  const onClickReconnect = async () => {
+    reconnecting.toggleOn();
+
+    await roomsStore.createRoom(
+      `Notes: ${selectedNote.title}`,
+      'public',
+      roomPath
+    );
+
+    reconnecting.toggleOff();
+  };
+
+  if (isSpaceNote && !existingRoom) {
+    if (connectingToNoteRoom) {
+      return (
+        <Flex
+          flex={1}
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+        >
+          <Flex flexDirection="column" alignItems="center" gap="12px">
+            <Spinner size="19px" width={2} />
+            <Text.Body opacity={0.5}>Connecting to peers</Text.Body>
+          </Flex>
+        </Flex>
+      );
+    } else {
+      return (
+        <Flex
+          flex={1}
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+        >
+          <Flex flexDirection="column" alignItems="center" gap="12px">
+            <Text.H5 opacity={0.5}>Room Closed</Text.H5>
+            {reconnecting.isOn ? (
+              <Spinner size="19px" width={2} />
+            ) : (
+              <Button.Primary onClick={onClickReconnect}>
+                Reconnect
+              </Button.Primary>
+            )}
+          </Flex>
+        </Flex>
+      );
+    }
+  }
+
   return (
     <EditorView
       ydoc={selectedAwareness.doc}

diff --git a/app/src/renderer/apps/Notes/components/NotesSidebar/NotesSidebar.tsx b/app/src/renderer/apps/Notes/components/NotesSidebar/NotesSidebar.tsx
@@ -33,6 +33,7 @@ const NotesSidebarPresenter = () => {
     searchQuery,
     searchedNotes,
     initializing,
+    setConnectingToNoteRoom,
     setSelectedNoteId,
     setSearchquery,
     getNotePreview,
@@ -74,6 +75,8 @@ const NotesSidebarPresenter = () => {
       roomsStore.currentRoom && roomsStore.currentRoom?.path === noteRoomPath;
     if (areWeAlreadyInTheRoom) return;
 
+    setConnectingToNoteRoom(true);
+
     // DELETE/LEAVE CURRENT ROOM
     roomsStore.cleanUpCurrentRoom();
 
@@ -96,6 +99,8 @@ const NotesSidebarPresenter = () => {
       await roomsStore.joinRoom(newRoomRid);
     }
 
+    setConnectingToNoteRoom(false);
+
     // In Notes rooms everyone should be muted by default.
     roomsStore.ourPeer.mute();
   };

diff --git a/app/src/renderer/stores/notes/notes.store.ts b/app/src/renderer/stores/notes/notes.store.ts
@@ -35,6 +35,7 @@ export const NotesStore = types
     searchQuery: types.optional(types.string, ''),
     saving: types.optional(types.boolean, false),
     initializing: types.optional(types.boolean, false),
+    connectingToNoteRoom: types.optional(types.boolean, false),
   })
   .volatile(() => ({
     awarenesses: new Map<string, Awareness>(),
@@ -260,6 +261,10 @@ export const NotesStore = types
       self.searchQuery = query;
     },
 
+    setConnectingToNoteRoom: (connecting: boolean) => {
+      self.connectingToNoteRoom = connecting;
+    },
+
     applyBroadcastedYdocUpdate(from: string, edit: string) {
       if (!self.selectedNoteId) return;
 
@@ -352,6 +357,7 @@ export const notesStore = NotesStore.create({
   selectedNoteId: null,
   saving: false,
   initializing: false,
+  connectingToNoteRoom: false,
 });
 
 // -------------------------------