|
import React, { useState, useEffect } from "react"; |
|
import { useDispatch } from "react-redux"; |
|
import { fetchPoiRequest } from "./redux/actions/poiActions"; |
|
import { poiList } from "./data/data"; |
|
import { Poi } from "./redux/types/Poi"; |
|
|
|
import DropDown from "./components/generalInformation/dropdown/DropDown"; |
|
import DemographicsSection from "./sections/demographics"; |
|
import FootfallSection from "./sections/footfall"; |
|
import ModeSection from "./sections/mode"; |
|
import DescriptionSection from "./sections/description"; |
|
import InformationSection from "./sections/information"; |
|
import DrawerSection from "./sections/drawer"; |
|
import TraficSection from "./sections/trafic"; |
|
import MapSection from "./sections/map"; |
|
import GraphSections from "./components/main/GraphSections"; |
|
|
|
import "./styles/global/App.css"; |
|
import "./styles/global/customScrollBar.css"; |
|
|
|
const App = () => { |
|
const [selectedPoi, setSelectedPoi] = useState<Poi>(poiList.items[0]); |
|
const [isFootfallSection, setFootfallSection] = useState(true); |
|
const [isModeSection, setModeSection] = useState(true); |
|
const [isDemographicsSection, setDemographicsSection] = useState(true); |
|
const [isInformationSection, setInformationSection] = useState(true); |
|
const [isTraficSection, setTraficSection] = useState(true); |
|
const [isMapView, setIsMapView] = useState(false); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
useEffect(() => { |
|
dispatch(fetchPoiRequest()); |
|
}, [dispatch]); |
|
|
|
return ( |
|
<div className="rootContent"> |
|
<DrawerSection |
|
poiList={poiList.items} |
|
setSelectedPoi={setSelectedPoi} |
|
isFootfallSection={isFootfallSection} |
|
setFootfallSection={setFootfallSection} |
|
isModeSection={isModeSection} |
|
setModeSection={setModeSection} |
|
isDemographicsSection={isDemographicsSection} |
|
setDemographicsSection={setDemographicsSection} |
|
isInformationSection={isInformationSection} |
|
setInformationSection={setInformationSection} |
|
isTraficSection={isTraficSection} |
|
setTraficSection={setTraficSection} |
|
isMapView={isMapView} |
|
setIsMapView={setIsMapView} |
|
/> |
|
|
|
{isMapView ? ( |
|
<MapSection selectedPoi={selectedPoi} /> |
|
) : ( |
|
<div className="mainContent"> |
|
<br></br> |
|
<DropDown |
|
poiList={poiList.items} |
|
selectedPoi={selectedPoi} |
|
setSelectedPoi={setSelectedPoi} |
|
/> |
|
<GraphSections |
|
selectedPoi={selectedPoi} |
|
isDemographicsSection={isDemographicsSection} |
|
isFootfallSection={isFootfallSection} |
|
isModeSection={isModeSection} |
|
isInformationSection={isInformationSection} |
|
isTraficSection={isTraficSection} |
|
/> |
|
</div> |
|
)} |
|
</div> |
|
); |
|
}; |
|
|
|
export default App; |
|
|