Join room via sidebar

frontend/src/App.tsx

@@ -1,28 +1,42 @@
+import { useState } from "react";
 import "./App.css";
 import Meeting from "./components/meeting/Meeting";
 import Sidebar from "./components/sidebar/Sidebar";
 import useBackendData from "./hooks/useBackendData";
 import useConferenceData from "./hooks/useConferenceData";
 import useLocalUser from "./hooks/useLocalUser";
+import { useRoomName } from "./hooks/useRoomName";
 
 function App() {
   const { userInfo, setUserInfo } = useLocalUser();
+  const { roomName, updateRoomName, updateAndSubmitRoomName, submitRoomName } = useRoomName();
   const { roomData, sendMessage } = useBackendData(userInfo);
   const { conferenceData, setConferenceData } = useConferenceData(
     sendMessage,
     setUserInfo
   );
+  const [meetingStarted, setMeetingStarted] = useState(false);
 
   console.log(roomData);
 
   if (roomData && userInfo) {
     return (
       <div className="App">
-        <Sidebar usersData={roomData} />
+        <Sidebar usersData={roomData}
+          updateAndSubmitRoomName={(roomName: string) => {
+            updateAndSubmitRoomName(roomName)
+            setMeetingStarted(true)
+          }}
+        />
         <Meeting
           conferenceData={conferenceData}
           setConferenceData={setConferenceData}
           userInfo={userInfo}
+          roomName={roomName}
+          updateRoomName={updateRoomName}
+          submitRoomName={submitRoomName}
+          meetingStarted={meetingStarted}
+          setMeetingStarted={setMeetingStarted}
         />
       </div>
     );

frontend/src/background/constants.ts

@@ -1,7 +1,5 @@
 const ISPROD = window.location.protocol == "https:";
-const JITSI_DOMAIN = ISPROD
-  ? "thisisnotajitsi.filefighter.de"
-  : "localhost:8443";
+const JITSI_DOMAIN = "thisisnotajitsi.filefighter.de";
 const WEBSOCKET_URL =
   "ws" +
   (ISPROD ? "s" : "") +

frontend/src/components/meeting/Meeting.tsx

@@ -9,11 +9,12 @@ interface Props {
   conferenceData: ConferenceData | undefined;
   setConferenceData: (newData: ConferenceData) => void;
   userInfo: UserInfo;
+  //@ts-ignore
+  roomName, updateRoomName, submitRoomName
+  meetingStarted: Boolean, setMeetingStarted: Function
 }
 
-function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
-  const { roomName, updateRoomName, submitRoomName } = useRoomName();
-  const [meetingStarted, setMeetingStarted] = useState(false);
+function Meeting({ conferenceData, setConferenceData, userInfo, roomName, updateRoomName, submitRoomName, meetingStarted, setMeetingStarted }: Props) {
 
   const startMeeting = useCallback(() => {
     submitRoomName();

frontend/src/components/sidebar/Sidebar.tsx

@@ -5,6 +5,7 @@ import { UsersData } from "../../background/types/roomData";
 
 interface Props {
   usersData: UsersData;
+  updateAndSubmitRoomName: Function
 }
 
 function Sidebar(props: Props) {
@@ -14,17 +15,17 @@ function Sidebar(props: Props) {
   return (
     <div className={`sidebar sidebar-${sidebarVisibility}`}>
       <SidebarHeader sidebarVisibility={sidebarVisibility} />
-      <div>
-        <h3> No room</h3>
-        {props.usersData.usersWithOutRoom.map((username) => (
-          <div>{username}</div>
-        ))}
-      </div>
       <div>
         {props.usersData.roomsData.map((roomData) => {
           return (
             <>
-              <h3> {roomData.roomName} </h3>
+              <h3>
+                <a href="#" onClick={() => {
+                  props.updateAndSubmitRoomName(roomData.roomName)
+                }}>
+                  {roomData.roomName}
+                </a>
+              </h3>
               {roomData.participants.map((participant) => (
                 <div> {participant.displayName} </div>
               ))}
@@ -32,6 +33,12 @@ function Sidebar(props: Props) {
           );
         })}
       </div>
+      <div>
+        <h3> No room</h3>
+        {props.usersData.usersWithOutRoom.map((username) => (
+          <div>{username}</div>
+        ))}
+      </div>
       <div className="sidebar-footer">
         <button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
       </div>

frontend/src/hooks/useRoomName.ts

@@ -11,12 +11,22 @@ function useRoomName() {
     [setRoomName]
   );
 
+  const updateAndSubmitRoomName = useCallback(
+    (newName: string) => {
+      setRoomName(newName);
+      setRoomNameInUrl(newName);
+      setRoomNameInTitle(newName);
+      console.log("[Rooms] update and submit room name", newName);
+    },
+    [setRoomName]
+  )
+
   const submitRoomName = useCallback(() => {
     setRoomNameInUrl(roomName);
     setRoomNameInTitle(roomName);
   }, [roomName]);
 
-  return { roomName, updateRoomName, submitRoomName };
+  return { roomName, updateRoomName, updateAndSubmitRoomName, submitRoomName };
 }
 
 function getRoomNameFromUrl(): string {