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";

function App() {
  const { userInfo, setUserInfo } = useLocalUser();
  const { roomData, sendMessage } = useBackendData(userInfo);
  const { conferenceData, setConferenceData } = useConferenceData(
    sendMessage,
    setUserInfo
  );

  console.log(roomData);

  if (roomData && userInfo) {
    return (
      <div className="App">
        <Sidebar usersData={roomData} />
        <Meeting setConferenceData={setConferenceData} userInfo={userInfo} />
      </div>
    );
  }
  return <h2>🌀 Loading...</h2>;
}

export default App;