Simple object

kivi-cars/src/containers/App.js

@@ -12,12 +12,12 @@ import LinkR from '../data/routes';
 
 function App() {
 
-  const info = 'Dobrodosli na stranicu kivi!'
-  const [filtersData, setFiltersData] = useState({})
+  // const info = 'Dobrodosli na stranicu kivi!'
+  const [data, setData] = useState({})
 
   useEffect(() => {
-    console.log(filtersData)
-  }, [filtersData])
+    console.log(data)
+  }, [data])
 
 
   return (
@@ -26,11 +26,11 @@ function App() {
         <Routes>
         
           <Route path='/' element={<LandingPage />} />
-          <Route path='category' element={<CategoryPage data={{filtersData, setFiltersData}} routes={LinkR.category} />}/>
-          <Route path='filters' element={<FiltersPage data={{filtersData, setFiltersData}} routes={LinkR.filters}/>}/>
-          <Route path='location' element={<LocationPage data={{filtersData, setFiltersData}} routes={LinkR.location}/>}/>
-          <Route path='email' element={<EmailPage data={{filtersData, setFiltersData}} routes={LinkR.email} />}/>
-          <Route path='congrats' element={<CongratsPage data={{filtersData, setFiltersData}} routes={LinkR.congrats} />}/>
+          <Route path='category' element={<CategoryPage data={{data, setData}} routes={LinkR.category} />}/>
+          <Route path='filters' element={<FiltersPage data={{data, setData}} routes={LinkR.filters}/>}/>
+          <Route path='location' element={<LocationPage data={{data, setData}} routes={LinkR.location}/>}/>
+          <Route path='email' element={<EmailPage data={{data, setData}} routes={LinkR.email} />}/>
+          <Route path='congrats' element={<CongratsPage data={{data, setData}} routes={LinkR.congrats} />}/>
         
         </Routes>
       </Router>

kivi-cars/src/containers/CategoryPage.js

@@ -5,7 +5,7 @@ import './css/CategoryPage.css'
 
 function CategoryPage(props) {
 
-  const {filtersData, setFiltersData} = props.data
+  const {data, setData} = props.data
 
   const naslov = 'IZABERITE KATEGORIJU'
   return (
@@ -13,7 +13,7 @@ function CategoryPage(props) {
         <Header header={naslov}/>
         <ButtonsToolbar routes={props.routes}/>
         <div className='category-buttons'>
-          <CategoryBtns data={{filtersData, setFiltersData}}/>
+          <CategoryBtns data={{data, setData}}/>
         </div>
     </div>
   );

kivi-cars/src/containers/DataContext.js

@@ -1,3 +0,0 @@
-import {createContext} from 'react';
-
-

kivi-cars/src/containers/EmailPage.js

@@ -1,5 +1,4 @@
-import {useContext, useState, useEffect} from 'react';
-import { DataContext } from './DataContext';
+import { useState, useEffect} from 'react';
 import './css/EmailPage.css'
 import Header from '../components/Header/Header';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
@@ -10,7 +9,7 @@ import { Link } from 'react-router-dom';
 
 function EmailPage(props) {
 
-    const {filtersData, setFiltersData} = props.data
+    const {data, setData} = props.data
     const [error, setError] = useState(false)
 
 
@@ -30,9 +29,9 @@ function EmailPage(props) {
     const emailCheck = (e, ec) => {
         if(e !== "" && e === ec){
             setError(false)
-            setFiltersData(prevData => ({
+            setData(prevData => ({
                 ...prevData,
-                "email": state.email
+                "Email": state.email
             }))
             return error
         }else {
@@ -60,8 +59,8 @@ function EmailPage(props) {
                 <h2 className='h2'>Slanje obavještenja</h2>
             </div>
             <div className='buttons-container'>
-                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title1}/>
-                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title2}/>
+                <StandardBtn data={{data, setData, filter}} title={title1}/>
+                <StandardBtn data={{data, setData, filter}} title={title2}/>
             </div>
             <div className='form'>
                 <form method="POST" id="form-email">

kivi-cars/src/containers/FiltersPage.js

@@ -1,4 +1,4 @@
-import {React, useState} from "react";
+import {React, useEffect, useState} from "react";
 import './css/FiltersPage.css';
 import Header from "../components/Header/Header";
 import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar";
@@ -10,13 +10,22 @@ const FiltersPage = (props) => {
 
     const naslov = "Filteri za pretrazivanje"
     const [toggle, setToggle] = useState(true)
-    const {filtersData, setFiltersData} = props.data
+    const [filters, setFilters] = useState({});
+    const {data, setData} = props.data
     
+
+    useEffect(() => {
+        setData( prevData => ({
+            ...prevData,
+            "Filters": filters
+        }))
+    }, [filters])
+
     const showFilters = (toggle) => {
         if(toggle){
-            return <StandardFilters data={{filtersData, setFiltersData}}/>
+            return <StandardFilters data={{filters, setFilters}}/>
         }
-        return <AdvancedFilters data={{filtersData, setFiltersData}}/>;
+        return <AdvancedFilters data={{filters, setFilters}}/>;
     }
 
     return(

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>
     );
 }

kivi-cars/src/containers/css/LocationPage.css

@@ -1,4 +1,19 @@
 *{
     margin: 0;
     padding: 0;
+}
+
+.checkbox-div{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+}
+
+@media only screen and (min-width: 541px){
+    .checkbox-div{
+        flex-direction: row;
+        justify-content: space-around;
+    }
 }