diff --git a/app/src/renderer/apps/Notes/components/Editor/Editor.tsx b/app/src/renderer/apps/Notes/components/Editor/Editor.tsx index add35f5547..7e5b97b4fd 100644 --- 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 ( - - {initializing ? 'Syncing updates' : 'Connecting to peers'} - + Syncing updates ); } + 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 ( + + + + Connecting to peers + + + ); + } else { + return ( + + + Room Closed + {reconnecting.isOn ? ( + + ) : ( + + Reconnect + + )} + + + ); + } + } + return ( { 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 index fb139a92ee..1270c0e81d 100644 --- 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(), @@ -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, }); // -------------------------------