import React, { useState } from "react"
import './App.css';
import { useDispatch } from "react-redux";
import { useGetExerciseIds } from "./websocket/getExerciseIds";
import { ErrorPopup } from "./components/errorPopup";
import MapBox from './components/map'
import SideBar from "./components/sideBar";
import Popup from "./components/popup";
import { useGetPartyData } from "./websocket/getPartyData";

function App() {
  const [createPopupOpen, setCreatePopupOpen] = useState(false)
     
  const dispatch = useDispatch()
  useGetExerciseIds(dispatch)
  useGetPartyData(42, dispatch)
  return (
    <div>
      <ErrorPopup />
      <Popup createPopupState={createPopupOpen} setPopupState={setCreatePopupOpen} />
      <SideBar createPopupStateChanger={setCreatePopupOpen} />
      <MapBox />
    </div>
  );
}

export default App;