Showing rooms works

frontend/src/components/jitsi/JitsiEntrypoint.tsx

@@ -1,13 +1,19 @@
 import { JitsiMeeting } from "@jitsi/react-sdk";
 import { JITSI_DOMAIN } from "../../background/constants";
 import { UserInfo } from "./types";
+import curry from "just-curry-it";
+import {
+    ConferenceData,
+    videoConferenceJoinedListener,
+} from "../../background/jitsi/eventListeners";
 
 interface Props {
     roomName: string;
     userInfo: UserInfo;
+    setConferenceData: (newData: ConferenceData) => void;
 }
 
-function JitsiEntrypoint({ roomName, userInfo }: Props) {
+function JitsiEntrypoint({ roomName, userInfo, setConferenceData }: Props) {
     return (
         <JitsiMeeting
             domain={JITSI_DOMAIN}
@@ -24,6 +30,11 @@ function JitsiEntrypoint({ roomName, userInfo }: Props) {
             onApiReady={(externalApi) => {
                 // here you can attach custom event listeners to the Jitsi Meet External API
                 // you can also store it locally to execute commands
+
+                externalApi.addEventListener(
+                    "videoConferenceJoined",
+                    curry(videoConferenceJoinedListener)(setConferenceData)
+                );
             }}
             getIFrameRef={(iframeRef) => {
                 iframeRef.style.height = "100%";

frontend/src/components/jitsi/types.ts

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

frontend/src/components/meeting/Meeting.tsx

@@ -1,23 +1,32 @@
 import { useCallback, useState } from "react";
+import { ConferenceData } from "../../background/jitsi/eventListeners";
 import { useRoomName } from "../../hooks/useRoomName";
 import JitsiEntrypoint from "../jitsi/JitsiEntrypoint";
 import { UserInfo } from "../jitsi/types";
 import MeetingNameInput from "./MeetingNameInput";
 
-function Meeting() {
+interface Props {
+  setConferenceData: (newData: ConferenceData) => void;
+  userInfo: UserInfo;
+}
+
+function Meeting({ setConferenceData, userInfo }: Props) {
   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 roomName={roomName} userInfo={userInfo} />;
+    return (
+      <JitsiEntrypoint
+        roomName={roomName}
+        userInfo={userInfo}
+        setConferenceData={setConferenceData}
+      />
+    );
   }
 
   return (

frontend/src/components/sidebar/Sidebar.tsx

@@ -1,14 +1,37 @@
 import SidebarHeader from "./SidebarHeader";
 import useSidebarVisibility from "./useSidebarVisibility";
 import "./Sidebar.css";
+import { UsersData } from "../../background/types/roomData";
 
-function Sidebar() {
+interface Props {
+  usersData: UsersData;
+}
+
+function Sidebar(props: Props) {
   const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } =
     useSidebarVisibility();
 
   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>
+              {roomData.participants.map((participant) => (
+                <div> {participant.displayName} </div>
+              ))}
+            </>
+          );
+        })}
+      </div>
       <div className="sidebar-footer">
         <button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
       </div>