majic / src /App.tsx
nolual's picture
Upload 55 files
0c20ea8
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;