feat: added error modal when peers cant be loaded

blenderskool · Oct 14, 2024 · 058b467 · 058b467
1 parent 8149cd5
commit 058b467
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/client/src/routes/App/FileTransfer/FileTransfer.js b/client/src/routes/App/FileTransfer/FileTransfer.js
@@ -452,7 +452,7 @@ class FileTransfer extends PureComponent {
           <>
             <h2>Connection Error!</h2>
             <p class="message">Unable to load QR code, try refreshing this page</p>
-            <button class="btn wide" onClick={this.handleNewRoom}>
+            <button class="btn wide" onClick={() => window.location.reload()}>
               Refresh page
             </button>
           </>

diff --git a/client/src/routes/App/Rooms/Rooms.js b/client/src/routes/App/Rooms/Rooms.js
@@ -15,6 +15,7 @@ import NewRoomModal from './components/NewRoomModal/NewRoomModal';
 import LocalRoomHelpModal from './components/LocalRoomHelpModal/LocalRoomHelpModal';
 import { RoomContainer, RoomSecondaryAction, RoomDescription, RoomName, RoomPeers } from './components/Room/Room';
 import roomsDispatch from '../../../reducers/rooms';
+import Modal from '../../../components/Modal/Modal';
 
 import './Rooms.scoped.scss';
 
@@ -23,6 +24,7 @@ const RoomsList = memo(function RoomsList({ isOnline, onRoomJoin }) {
   const { queuedFiles } = useContext(QueuedFiles);
   const [localPeers, setLocalPeers] = useState([]);
   const [showLocalRoomModal, setShowLocalRoomModal] = useState(false);
+  const [errorModal, setErrorModal] = useState({ isOpen: false, message: '' });
 
   useEffect(() => {
     if (!isOnline) return;
@@ -31,6 +33,14 @@ const RoomsList = memo(function RoomsList({ isOnline, onRoomJoin }) {
       setLocalPeers(JSON.parse(data));
     };
     const localPeersSource = new EventSource(`${urls.SERVER_HOST}/sse/local-peers`);
+
+    localPeersSource.onerror = () => {
+      setErrorModal({
+        isOpen: true,
+        message: 'Failed to load local peers. Please check your connection and try again.'
+      });
+    };
+
     localPeersSource.addEventListener('message', handlePeersStream);
 
     return () => {
@@ -39,6 +49,11 @@ const RoomsList = memo(function RoomsList({ isOnline, onRoomJoin }) {
     };
   }, [isOnline]);
 
+  const handleCloseErrorModal = () => {
+    setErrorModal({ isOpen: false, message: '' });
+    window.location.reload();
+  };
+
   if (!isOnline) {
     return <div class="message">Connect to the internet to start sharing files</div>;
   } else {
@@ -96,6 +111,16 @@ const RoomsList = memo(function RoomsList({ isOnline, onRoomJoin }) {
           onClose={() => setShowLocalRoomModal(false)}
           onRoomJoin={onRoomJoin}
         />
+
+        <Modal isOpen={errorModal.isOpen} onClose={handleCloseErrorModal}>
+          <div class="socket-error">
+            <h2>Connection closed</h2>
+            <p class="message">{errorModal.message}</p>
+            <button class="btn wide" onClick={handleCloseErrorModal}>
+              Refresh Page
+            </button>
+          </div>
+        </Modal>
       </>
     );
   }