Simple object

kivi-cars/src/containers/LocationPage.js

@@ -1,25 +1,85 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './css/LocationPage.css';
 import Header from "../components/Header/Header";
-import Filter from '../components/Filters/Filter/Filter';
 import Location from '../data/location';
 import LocationFilter from '../components/Location/LocationFilter';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import LocationCheckbox from '../components/Filters/Filter/LocationCheckbox';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';
 
 const LocationPage = (props) => {
 
-    const {filtersData, setFiltersData} = props.data
+    const {data, setData} = props.data
+    const [locationData, setLocationData] = useState({})
+    const [locationInfo, setLocationInfo] = useState({"gradovi": []})
+    const [checkboxStatus, setCheckboxStatus] = useState({})
+    const [location, setLocation] = useState({});
     const naslov = "Dodajte lokaciju"
 
+    let id = 0;
 
+    useEffect(() => {
+        if(locationData.kanton){
+            Location.entiteti.map(entity => {
+                return entity.kantoni.map(kantony => {
+                    if(locationData.kanton === kantony.kanton){
+                        return setLocationInfo({
+                            "entitet": entity.entitet,
+                            "kanton": kantony.kanton,
+                            "gradovi": kantony.gradovi
+                        })
+                    }
+                })
+            })
+        }setCheckboxStatus({})
+            console.log("locationInfo", locationInfo)
+    }, [locationData])
 
+    useEffect(() => {
+        if(locationData.kanton === 'Distrikt Brcko'){
+            setLocation(
+                {
+                "entitet": "Distrikt Brcko",
+                "kanton": "Distrikt Brcko",
+                "gradovi": "Brcko"
+                }
+            )
+        }else{
+            setLocation( prevData => ({
+                ...prevData,
+                "entitet": locationInfo.entitet,
+                "kanton": locationInfo.kanton,
+                "gradovi": checkboxStatus
+            }))}
+            console.log("location", location)
+    }, [checkboxStatus])
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Location": location
+        }))
+        console.log("data", data)
+    }, [location])
+
+    
     return (
-        <div>
+        <div className='location-div'>
             <Header header={naslov}/>
             <ButtonsToolbar routes={props.routes}/>
-            <LocationFilter data={{filtersData, setFiltersData}}/>
-
-            
+            <LocationFilter data={{setLocationData}}/>
+            <div className='checkbox-div'>
+                {locationInfo.gradovi.map((grad) => {
+                    id += 1
+                    return(
+                        <LocationCheckbox key={id} title={grad} data={{checkboxStatus, setCheckboxStatus}}/>
+                    )
+                })}
+            </div>
+            <Link to="/email">
+                <TitleBtn title="Naredna stranica"/>
+            </Link>
         </div>
     );
 }