Merge pull request #33 from iotum/jerry_hu/fix-bugs-and-clean-up-code

Jerry_hu/fix-bugs-and-clean-up-code

src/components/CredentialsForm.css

@@ -30,7 +30,7 @@ label {
   margin-bottom: 10px;
 }
 
-input {
+form.credentials input {
   width: 100%;
   padding: 8px;
   margin-top: 5px; /* Add space between label and input */
@@ -40,7 +40,7 @@ input {
 }
 
 /* Styling for the submit button */
-button[type="submit"] {
+form.credentials button[type="submit"] {
   margin-top: 20px;
   width: 100%;
   padding: 12px;
@@ -52,7 +52,7 @@ button[type="submit"] {
   cursor: pointer;
 }
 
-button[type="submit"]:hover {
+form.credentials button[type="submit"]:hover {
   background-color: #0056b3;
 }
 

src/components/CredentialsForm.js

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import './CredentialsForm.css'
 
 const CredentialsForm = ({ onSubmit }) => {
-  const [domain, setDomain] = useState('iotum.callbridge.rocks');
-  const [token, setToken] = useState('');
-  const [hostId, setHostId] = useState('');
+  const credentials = useSelector(state => state.credentials);
+
+  const [domain, setDomain] = useState(credentials.domain || 'iotum.callbridge.rocks');
+  const [token, setToken] = useState(credentials.token || '');
+  const [hostId, setHostId] = useState(credentials.hostId || '');
 
   // This function will be called when the form is submitted
   const handleSubmit = (e) => {
@@ -16,7 +19,7 @@ const CredentialsForm = ({ onSubmit }) => {
   return (
     <div className="form-wrapper">
       <h1 className="title">iotum Sample Apps</h1>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="credentials">
         <label>
           Domain:
           <input

src/components/hooks/useGuardedRoute.js

@@ -5,18 +5,18 @@ import { useNavigate } from 'react-router-dom';
 
 const useGuardedRoute = () => {
   const navigate = useNavigate();
-  const credentials = useSelector(state => state.credentials);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const { token } = useSelector(state => state.credentials);
+  const [isAuthenticated, setIsAuthenticated] = useState(Boolean(token));
 
   useEffect(() => {
-    if (!credentials.token) {
+    if (!token) {
       navigate('/iotum-samples/error-handling');
       console.log('New credentials input needed');
       setIsAuthenticated(false);
     } else {
       setIsAuthenticated(true);
     }
-  }, [credentials.token, navigate]);
+  }, [token, navigate]);
 
   return isAuthenticated;
 };

src/index.js

@@ -14,6 +14,7 @@ const ListWidgetUiApp = React.lazy(() => import('./pages/list-widget-ui/App.js')
 const SimpleMeetingApp = React.lazy(() => import("./pages/simple-meeting/App.js"));
 const PopoutChatApp = React.lazy(() => import("./pages/popout-chat/App.js"));
 const TabbedDashboardApp = React.lazy(() => import("./pages/tabbed-dashboard/App.js"));
+const MeetingDevicesApp = React.lazy(() => import("./pages/meeting-devices/App.js"));
 
 const router = createBrowserRouter([
   {
@@ -36,6 +37,10 @@ const router = createBrowserRouter([
     path: "/iotum-samples/simple-meeting",
     element: <SimpleMeetingApp />
   },
+  {
+    path: "/iotum-samples/meeting-devices",
+    element: <MeetingDevicesApp />
+  },
   {
     path: "/iotum-samples/popout-chat",
     element: <PopoutChatApp />

src/navigation/MenuPageButtons/MenuPageButton.js

@@ -5,9 +5,7 @@ const MenuPageButton = ({ text, path }) => {
   const navigate = useNavigate();
 
   return (
-    <div>
-      <button className="menu-button" onClick={() => navigate(path)}>{text}</button>
-    </div>
+    <button type="button" className="menu-button" onClick={() => navigate(path)}>{text}</button>
   );
 }
 

src/navigation/MenuPageButtons/MenuPageButtons.css

@@ -1,17 +1,9 @@
-.menu-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
 .menu-button {
-    width: 202px;
+    width: 200px;
     text-align: center;
     font-size: 18px; 
     font-weight: bold;
-    margin: 55px 0; /* Combining both margin properties you had */
-    padding: 10px 20px;
+    margin: 5px 0; /* Combining both margin properties you had */
     border: none;
     border-radius: 5px;
     background-color: #007bff;
@@ -22,7 +14,7 @@
     line-height: 1.5;
 }
 
-.nav-button:hover {
+.menu-button:hover {
     background-color: #0056b3; /* darken color on hover */
 }
 

src/pages/chat-room-list/App.js

@@ -1,18 +1,16 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import ChatRoomList from './ChatRoomList';
 import styles from './submitForm.module.css';
 import * as Callbridge from '@iotum/callbridge-js';
 import useGuardedRoute from '../../components/hooks/useGuardedRoute';
 
-export const App = () => {
+const App = () => {
   useGuardedRoute()
   const [allRooms, setAllRooms] = useState([]);
-  const widget = useRef(null);
-
+
   // Retrive credentials from Redux store
   const credentials = useSelector(state => state.credentials);
-  console.log("Credentials:", credentials);
 
   const handleRoomButtonClick = (path) => {
     setAllRooms(prevRooms => prevRooms.map(room => {
@@ -27,27 +25,26 @@ export const App = () => {
     }));
   };
 
-  const renderWidget = useCallback(() => {
+  const renderWidget = useCallback(({ domain, token, hostId }) => {
     console.log("renderWidget ran");
-    widget.current = new Callbridge.Dashboard(
+    const _widget = new Callbridge.Dashboard(
       {
-        domain: credentials.domain, // using the state variable for domain
+        domain,
         sso: {
-          token: credentials.token,
-          hostId: credentials.hostId
+          token,
+          hostId
         },
         container: '#chat',
       },
       'Team',
-      { layout: 'list', pathname: '/'}
+      { layout: 'list', pathname: '/' }
     );
-    console.log("dashboard rendered");
 
-    widget.current.once('dashboard.ROOM_LIST', (data) => {
+    _widget.once('dashboard.ROOM_LIST', (data) => {
       const uniqueAccountNames = []; // To keep track of account names that should have "(you)" added
       const allRoomsChange = Object.values(data.rooms).map((room) => {
         const accounts = room.accounts.map((account) => account.name);
-    
+
         // Check if the room has only one account
         if (accounts.length === 1) {
           const accountName = `${accounts[0]} (you)`;
@@ -58,7 +55,7 @@ export const App = () => {
             bool: false,
           };
         }
-    
+
         // Filter out account names that are in the unique list
         const filteredNames = accounts.filter((name) => !uniqueAccountNames.includes(name));
         return {
@@ -67,35 +64,35 @@ export const App = () => {
           bool: false,
         };
       });
-    
+
       setAllRooms(allRoomsChange);
     });
 
-    widget.current.on('dashboard.NAVIGATE', (data) => {
+    _widget.on('dashboard.NAVIGATE', (data) => {
       if (data.pathname !== "/") {
-        widget.current.load("Team", {layout: "list"})
+        _widget.load("Team", { layout: "list" })
         console.log("There was a navigate event to " + data.pathname + " in the list widget and the list widget was reloaded");
-      } 
+      }
 
       handleRoomButtonClick(data.pathname);
-      }
-    )
+    });
 
-    widget.current.on('dashboard.READY', () => {
+    _widget.on('dashboard.READY', () => {
       console.log("The list widget was rendered");
     });
-  }, [credentials]);
+
+    return _widget;
+  }, []);
 
   useEffect(() => {
     if (credentials && credentials.token && credentials.domain && credentials.hostId) {
-      renderWidget(credentials);
-    }
-
-    return () => {
-      widget.current?.unload();
+      const widget = renderWidget(credentials);
+      return () => {
+        widget.unload();
+      }
     }
   }, [credentials, renderWidget]);
- 
+
   return (
     <div className={styles.container}>
       <div id="chat" className={styles.roomListContainer}></div>
@@ -104,7 +101,6 @@ export const App = () => {
       </div>
     </div>
   );
-
 };
 
 export default App;

src/pages/list-widget-ui/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import ChatRoomList from './ChatRoomList';
 import * as Callbridge from '@iotum/callbridge-js';
@@ -7,43 +7,35 @@ import useGuardedRoute from '../../components/hooks/useGuardedRoute';
 const App = () => {
   useGuardedRoute()
   const [allRooms, setAllRooms] = useState([]);
-  const widget = useRef(null);
 
   // Retrieve credentials from Redux store
   const credentials = useSelector(state => state.credentials);
 
-  const handleRoomButtonClick = (path) => {
+  const toggleRoom = (path, open) => {
     setAllRooms(prevRooms => prevRooms.map(room => {
-      return room.path === path ? { ...room, bool: true } : room;
+      return room.path === path ? { ...room, bool: open } : room;
     }));
   };
 
-  const handleRoomClose = (path) => {
-    setAllRooms(prevRooms => prevRooms.map(room => {
-      return room.path === path ? { ...room, bool: false } : room;
-    }));
-  };
-
-  // Define the renderWidget function with useCallback
-  const renderWidget = useCallback(() => {
-    widget.current = new Callbridge.Dashboard(
+  const renderWidget = ({ domain, token, hostId }) => {
+    const _widget = new Callbridge.Dashboard(
       {
-        domain: credentials.domain,
+        domain,
         sso: {
-          token: credentials.token,
-          hostId: credentials.hostId
+          token,
+          hostId
         },
         container: '#chat',
       },
       'Team',
-      { layout: 'list', pathname: '/'}
+      { layout: 'list', pathname: '/' }
     );
 
-    widget.current.once('dashboard.ROOM_LIST', (data) => {
+    _widget.once('dashboard.ROOM_LIST', (data) => {
       const uniqueAccountNames = [];
       const allRoomsChange = Object.values(data.rooms).map((room) => {
         const accounts = room.accounts.map((account) => account.name);
-        
+
         if (accounts.length === 1) {
           const accountName = `${accounts[0]} (you)`;
           uniqueAccountNames.push(accounts[0]);
@@ -63,34 +55,36 @@ const App = () => {
       });
 
       setAllRooms(allRoomsChange);
+
+      document.querySelector('#loading')?.remove();
     });
 
-    widget.current.toggle(false);
-  }, [credentials]); 
+    return _widget;
+  };
 
   useEffect(() => {
     if (credentials && credentials.token && credentials.domain && credentials.hostId) {
-      const timer = setTimeout(() => {
-        renderWidget();
-      }, 100); // Delay the widget initialization to ensure the DOM element is available
-
+      const widget = renderWidget(credentials);
+
+      // NOTE: for whatever reason, calling toggle directly causes StrictMode to unmount the widget container.
+      setTimeout(() => widget.toggle(false));
+
       return () => {
-        clearTimeout(timer);
-        widget.current?.unload();
+        widget.unload();
       };
     }
-  }, [credentials, renderWidget]); // useEffect dependencies
+  }, [credentials]); // useEffect dependencies
 
   return (
     <div>
       <div id="room-buttons">
         <ChatRoomList
           rooms={allRooms}
-          onRoomButtonClick={handleRoomButtonClick}
-          onRoomClose={handleRoomClose}
+          onRoomButtonClick={(path) => toggleRoom(path, true)}
+          onRoomClose={(path) => toggleRoom(path, false)}
         />
       </div>
-      <div id="chat"></div>
+      <div id="chat"><div id="loading">Loading...</div></div>
     </div>
   );
 };