Minor refactoring

src/components/jitsi/JitsiEntrypoint.tsx

@@ -1,11 +1,17 @@
 import { JitsiMeeting } from "@jitsi/react-sdk";
 import { JITSI_DOMAIN } from "../../background/constants";
+import { UserInfo } from "./types";
 
-function JitsiEntrypoint() {
+interface Props {
+    roomName: string;
+    userInfo: UserInfo;
+}
+
+function JitsiEntrypoint({ roomName, userInfo }: Props) {
     return (
         <JitsiMeeting
             domain={JITSI_DOMAIN}
-            roomName="PleaseUseAGoodRoomName"
+            roomName={roomName}
             configOverwrite={{
                 startWithAudioMuted: true,
                 disableModeratorIndicator: true,
@@ -14,10 +20,7 @@ function JitsiEntrypoint() {
                 prejoinConfig: { enabled: false },
             }}
             interfaceConfigOverwrite={{}}
-            userInfo={{
+            userInfo={userInfo}
-                displayName: "YOUR_USERNAME",
-                email: "",
-            }}
             onApiReady={(externalApi) => {
                 // here you can attach custom event listeners to the Jitsi Meet External API
                 // you can also store it locally to execute commands

src/components/jitsi/types.ts

@@ -0,0 +1,7 @@
+
+interface UserInfo {
+  displayName: string;
+  email: string
+}
+
+export { UserInfo }

src/components/meeting/Meeting.tsx

@@ -1,19 +1,23 @@
 import { useCallback, useState } from "react";
 import { useRoomName } from "../../hooks/useRoomName";
 import JitsiEntrypoint from "../jitsi/JitsiEntrypoint";
+import { UserInfo } from "../jitsi/types";
 import MeetingNameInput from "./MeetingNameInput";
 
 function Meeting() {
   const { roomName, updateRoomName, submitRoomName } = useRoomName();
   const [meetingStarted, setMeetingStarted] = useState(false);
 
+  const userInfo: UserInfo = { displayName: "unknown traveller", email: "" }
+
+
   const startMeeting = useCallback(() => {
     submitRoomName();
     setMeetingStarted(true);
   }, [submitRoomName, setMeetingStarted]);
 
   if (meetingStarted) {
-    return <JitsiEntrypoint />;
+    return <JitsiEntrypoint roomName={roomName} userInfo={userInfo} />;
   }
 
   return (
@@ -21,7 +25,7 @@ function Meeting() {
       roomName={roomName}
       setName={updateRoomName}
       submit={startMeeting}
-      currentUser="unknown traveller"
+      currentUser={userInfo.displayName}
     />
   );
 }

src/components/sidebar/Sidebar.css

@@ -7,12 +7,12 @@
   margin-top: auto;
 }
 
-.sidebar.small {
+.sidebar-small {
   min-width: 60px;
   max-width: 60px;
 }
 
-.sidebar.hidden > .sidebar-footer {
+.sidebar-hidden > .sidebar-footer {
   position: absolute;
   bottom: 0;
 }

src/components/sidebar/Sidebar.tsx

@@ -7,7 +7,7 @@ function Sidebar() {
     useSidebarVisibility();
 
   return (
-    <div className={"sidebar " + sidebarVisibility}>
+    <div className={`sidebar ${sidebarVisibility}`}>
       <SidebarHeader sidebarVisibility={sidebarVisibility} />
       <div className="sidebar-footer">
         <button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>

src/components/sidebar/useSidebarVisibility.ts

@@ -9,11 +9,11 @@ function useSidebarVisibility() {
   const sidebarToggleText = getSidebarToggleText(sidebarVisibility);
 
   const toggleSidebarVisibility = useCallback(() => {
-    if (sidebarVisibility == "full") {
+    if (sidebarVisibility === "full") {
       setSideBarVisibility("small");
-    } else if (sidebarVisibility == "small") {
+    } else if (sidebarVisibility === "small") {
       setSideBarVisibility("hidden");
-    } else if (sidebarVisibility == "hidden") {
+    } else if (sidebarVisibility === "hidden") {
       setSideBarVisibility("full");
     }
   }, [setSideBarVisibility, sidebarVisibility, sidebarToggleText]);