jitsi-roomsv2/frontend/src/App.tsx

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}
          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>
    );
  }
  return <h2>🌀 Loading...</h2>;
}

export default App;