Merge branch 'simple_object' into 'main'

Simple object See merge request saburly/marketalarm/kivi-za-auta-react!21
2022-04-14 08:53:51 +00:00
parent c6a1e2b335 85169b63b5
commit 986ea5d18b
27 changed files with 326 additions and 105 deletions
--- a/kivi-cars/package-lock.json
+++ b/kivi-cars/package-lock.json
@@ -13,6 +13,7 @@
        "@testing-library/user-event": "^13.5.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
+        "react-hook-form": "^7.29.0",
        "react-router-dom": "^6.2.2",
        "react-scripts": "5.0.0",
        "web-vitals": "^2.1.4"
@@ -13172,6 +13173,21 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "node_modules/react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25388,6 +25404,12 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "requires": {}
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
--- a/kivi-cars/src/components/Button/StandardBtn.js
+++ b/kivi-cars/src/components/Button/StandardBtn.js
@@ -1,19 +1,21 @@
+import React from 'react'
 import './button.css'

 const StandardBtn = (props) => {

-    const {filtersData, setFiltersData, filter} = props.data
+    const {setData, filter} = props.data

    const clickHandler = ( e ) => {
-        setFiltersData(prevData => ({
-            ...prevData,
-            [e.target.name]: e.target.value
+        setData( prevState => ({
+            ...prevState,
+            "Category":{
+                [e.target.name]: e.target.value
+            }
        }))
    }

    return (
        <div className='standard-btn'>
-
           <button name={filter} value={props.title} className='standardBtn' onClick={e => clickHandler(e)}>{props.title}</button>
        </div>
    )
--- a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js
+++ b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js
@@ -1,7 +1,7 @@
 import './ButtonsToolbar.css';
 import { Link } from 'react-router-dom'
 import ArrowLeft from '../Button/leftBtn';
-import ArrowRigh from '../Button/rightBtn';
+// import ArrowRigh from '../Button/rightBtn';


 const ButtonsToolbar = (props) => {
@@ -12,12 +12,12 @@ const ButtonsToolbar = (props) => {
                    <ArrowLeft />
                </Link>
            </div>
-            <div className='right-group'>
+            {/* <div className='right-group'>
                <Link to={`${props.routes.next}`}>
                    <ArrowRigh/>
                </Link>
                
-            </div>
+            </div> */}
        </div>
    )
 } 
--- a/kivi-cars/src/components/CategoryBtns/categorybtns.js
+++ b/kivi-cars/src/components/CategoryBtns/categorybtns.js
@@ -1,6 +1,7 @@
 import './categorybtns.css'
 import StandardBtn from '../Button/StandardBtn'
 import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';


 const CategoryBtns = (props) => {
@@ -10,16 +11,20 @@ const CategoryBtns = (props) => {
    let kamion = 'Kamion';
    let filter = 'Vozilo'

-    const {filtersData, setFiltersData} = props.data;
+    const {data, setData} = props.data;

    return ( 
        <div className='category-btns'>
            <Link to='/filters'>
-                <StandardBtn title={auto} data={{filtersData, setFiltersData, filter}}/>
+                <StandardBtn title={auto} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={motor} data={{data, setData, filter}}/>
+            </Link>
+            <Link to='/filters'>
+                <StandardBtn title={kamion} data={{data, setData, filter}}/>
            </Link>
            
-            <StandardBtn title={motor} data={{filtersData, setFiltersData}}/>
-            <StandardBtn title={kamion} data={{filtersData, setFiltersData}}/>
        </div>
    )

--- a/kivi-cars/src/components/Filters/Advanced-filters.js
+++ b/kivi-cars/src/components/Filters/Advanced-filters.js
@@ -1,6 +1,8 @@
 import React from "react";
 import "./Filters.css";
 import Filter from "./Filter/Filter";
+import TitleBtn from "../Button/TitleBtn";
+import {Link} from 'react-router-dom';
 import Color from '../../data/color';
 import AirCondition from "../../data/air-condition";
 import Seats from "../../data/seats";
@@ -13,8 +15,8 @@ import CheckBox from "../../data/checkbox";

 const AdvancedFilters = (props) => {

-    const {filtersData, setFiltersData} = props.data
-    const data = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
+    const {filters, setFilters} = props.data
+    const data1 = [Color, AirCondition, Seats, Gearbox, Sensors, Lights]
    let index = 0


@@ -22,10 +24,10 @@ const AdvancedFilters = (props) => {
        <div className="filters-container">
            <div className="filters-content">
            {
-                data.map(item => {
+                data1.map(item => {
                    index += 1;
                    return(
-                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filtersData, setFiltersData}}/>
+                        <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
                    )
                })
            }
@@ -35,11 +37,17 @@ const AdvancedFilters = (props) => {
                CheckBox.map(item => {
                    index += 1;
                    return(
-                        <Checkbox key={index} title={item} data={{filtersData, setFiltersData}}/>
+                        <Checkbox key={index} title={item} data={{filters, setFilters}}/>
                    )
                })
            }
            </div>
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
        </div>
    )
 }
--- a/kivi-cars/src/components/Filters/Filter/Checkbox.js
+++ b/kivi-cars/src/components/Filters/Filter/Checkbox.js
@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from "react";
-import './Checkbox.css';
+import React, { useState } from "react";
+import './css/Checkbox.css';

 const Checkbox = (props) => {


-    const {filtersData, setFiltersData} = props.data
-    const [isChecked, setIsChecked] = useState(false)
+    const {setFilters} = props.data
+    const [isChecked, setIsChecked] = useState(true)


    const changeHandler = ( event ) => {
-        setFiltersData(prevData => ({
+        setFilters(prevData => ({
            ...prevData,
            [event.target.name]: isChecked
        }))
--- a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js
+++ b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js
@@ -1,21 +1,20 @@
 import React, {useEffect, useState} from "react";
-import "./DoubleFilter.css";
+import "./css/DoubleFilter.css";

 const DoubleFilter = (props) => {

-    const defaultV = 0
-    const {filtersData, setFiltersData} = props.data
+    const {setFilters} = props.data
    const [doubleFilterData, setDoubleFilterData] = useState({})

    const changeHandler = ( e ) => {
        setDoubleFilterData(prevData => ({
            ...prevData,
-            [e.target.name]: e.target.value          
+            [e.target.name]: e.target.value     
        }))
    }

    useEffect(() => {
-        setFiltersData(prevData => ({
+        setFilters(prevData => ({
            ...prevData,
            [props.title]: doubleFilterData
        }))
@@ -31,7 +30,7 @@ const DoubleFilter = (props) => {
                </div>
                <div className="filter"> 
                <label htmlFor="do" className="filter-info">Do</label>
-                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" max={props.fields.max} onChange={(e) => changeHandler(e)}/>
+                <input placeholder="Unesite" id="do" name="Do" className="filter-number" type="number" min={props.fields.min} max={props.fields.max} onChange={(e) => changeHandler(e)}/>
                </div>
            </div>
        </div>
--- a/kivi-cars/src/components/Filters/Filter/Filter.js
+++ b/kivi-cars/src/components/Filters/Filter/Filter.js
@@ -1,21 +1,22 @@
-import React from "react";
-import './Filter.css';
+import React, { useEffect, useState } from "react";
+import './css/Filter.css';

 const Filter = (props) => {

-    const {filtersData, setFiltersData} = props.data
+    const {filters, setFilters} = props.data
+    const [filtersData, setFiltersData] = useState({})

-    const changeHandler = ( event ) => {
-        setFiltersData( prevData => ({
+    const changeHandler = ( e ) => {
+        setFilters( prevData => ({
            ...prevData,
-            [event.target.name]: event.target.value
+            [e.target.name]: e.target.value
        }))
    }

    return(
        <div className="filter-component">
            <label htmlFor={props.ime} className="filter-name">{props.ime}</label>
-            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(event) => changeHandler(event)}>
+            <select className="dropdown-list" name={props.ime} id={props.ime} onChange={(e) => changeHandler(e)}>
                {props.tipovi.map((tip, i) => {
                    return (
                        <option key={i} value={tip} name={tip}>{tip}</option>
--- a/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
+++ b/kivi-cars/src/components/Filters/Filter/LocationCheckbox.js
@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+import './css/LocationCheckbox.css';
+
+const LocationCheckbox = (props) => {
+
+    const {setCheckboxStatus} = props.data;
+    const [checked, setChecked] = useState(true)
+
+    const changeHandler = (e) => {
+        setCheckboxStatus(prevStatus => ({
+            ...prevStatus,
+            [e.target.name]: checked
+        }))
+    }
+
+
+    return (
+        <div className="checkbox">
+            <label className="checkbox-title" htmlFor={props.title}>{props.title}</label>
+            <input className="check-box" type="checkbox" name={props.title} id={props.title} onChange={(e)=> {
+                setChecked(!checked)
+                changeHandler(e)
+                }}/>
+        </div>
+    )
+}
+
+export default LocationCheckbox;
--- a/kivi-cars/src/components/Filters/Filter/css/Checkbox.css
+++ b/kivi-cars/src/components/Filters/Filter/css/Checkbox.css
--- a/kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css
+++ b/kivi-cars/src/components/Filters/Filter/css/DoubleFilter.css
--- a/kivi-cars/src/components/Filters/Filter/css/Filter.css
+++ b/kivi-cars/src/components/Filters/Filter/css/Filter.css
--- a/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css
+++ b/kivi-cars/src/components/Filters/Filter/css/LocationCheckbox.css
@@ -0,0 +1,47 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.checkbox{
+    margin-top: 1em;
+    min-width: 60%;
+    height: 2em;
+    line-height: 1.5em;
+}
+
+.checkbox-title{
+    font-size: 16px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.check-box{
+    zoom: 1.5;
+    position: relative;
+    top: 3px;
+}
+
+
+
+@media only screen and (min-width: 541px){
+    .checkbox{
+        min-width: 40%;
+        max-width: 50%;
+    }
+
+    .checkbox-title{
+        font-size: 18px;
+    }
+
+}
+
+@media only screen and (min-width: 921px){
+    .checkbox{
+        min-width: 30%;
+        max-width: 35%;
+    }
+
+    .checkbox-title{
+        font-size: 20px;
+    }
+}
--- a/kivi-cars/src/components/Filters/Standard-filters.js
+++ b/kivi-cars/src/components/Filters/Standard-filters.js
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from "react";
+import {Link} from 'react-router-dom';
 import "./Filters.css";
 import Filter from "./Filter/Filter";
 import DoubleFilter from "./Filter/DoubleFilter";
+import TitleBtn from "../Button/TitleBtn";
 import Cars from "../../data/cars-brands";
 import Cubes from "../../data/cubes";
 import Type from "../../data/type";
@@ -18,7 +20,7 @@ import Kilometers from "../../data/kilometers";

 const StandardFilters = (props) => {

-    const {filtersData, setFiltersData} = props.data;
+    const {filters, setFilters} = props.data;
    const [brandIndex, setBrandIndex] = useState(0);
    let index = 0;

@@ -27,8 +29,9 @@ const StandardFilters = (props) => {
    })

    useEffect(() => {
-        if(filtersData.Marka)setBrandIndex(brands.indexOf(filtersData.Marka))
-    }, [filtersData])
+        if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka))
+        console.log("filters", filters)
+    }, [filters])

    const models = Cars[brandIndex].models

@@ -42,39 +45,41 @@ const StandardFilters = (props) => {
        "tipovi": models
    }

-    
-
-    
-    const data = [Fuel, Type]
    const data1 = [Transmission, Drive, Condition, Doors]
    const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats]
-        
+    const data3 = [Fuel, Type]    

    return(
        <div className="filters-container">
-            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filtersData, setFiltersData}}/>
-            <Filter ime={Models.ime} tipovi={Models.tipovi} data={{filtersData, setFiltersData}}/>
+            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filters, setFilters}}/>
+            <Filter ime={Models.ime} tipovi={Models.tipovi} data={{filters, setFilters}}/>

-            {data.map(item => {
+            {data3.map(item => {
                index += 1;
                return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filtersData, setFiltersData}}/>
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
                )
            })}

            {data2.map(item => {
                index += 1;
                return(
-                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filtersData, setFiltersData}}/>
+                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filters, setFilters}}/>
                )
            })}
            
            {data1.map(item => {
                index += 1;
                return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filtersData, setFiltersData}}/>
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
                )
            })}
+
+            <div style={{marginTop: 50}}>
+                <Link to="/location">
+                    <TitleBtn title="Dalje" />
+                </Link>
+            </div>
        </div>
    )
 }
--- a/kivi-cars/src/components/FiltersNavbar/FiltersNav.js
+++ b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js
@@ -9,10 +9,10 @@ const FiltersNav = (props) => {
        <div className="links-container">
            <ul className="filters-links">
                <li className={toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(true)}>
-                    <a id="standard-filters" >Filteri</a>
+                    <p id="standard-filters" >Filteri</p>
                </li> 
                <li className={!toggle ? `filters-link active`: `filters-link`} onClick={() => setToggle(false)}>
-                    <a id="advanced-filters" >Napredni filteri</a>
+                    <p id="advanced-filters" >Napredni filteri</p>
                </li>
            </ul>
        </div>
--- a/kivi-cars/src/components/Location/LocationFilter.css
+++ b/kivi-cars/src/components/Location/LocationFilter.css
@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.locationFilter-div{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: auto;
+    width: 80%;
+    padding: 3em;
+    border-bottom: 2px solid #02adba;
+}
+
+.location-title {
+    width: 30%;
+    font-size: 22px;
+    text-align: center;
+}
+
--- a/kivi-cars/src/components/Location/LocationFilter.js
+++ b/kivi-cars/src/components/Location/LocationFilter.js
@@ -1,44 +1,39 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import './LocationFilter.css';
 import Location from "../../data/location";

-const LocationFilter = () => {
+const LocationFilter = (props) => {

-    const [locationData, setLocationData] = useState({});
+    const {setLocationData} = props.data;

    const clickHandler = (e) => {
-        setLocationData( prevData => ({
-            ...prevData,
-            [e.target.name]: e.target.value
-        }))
+        setLocationData( prevData => ( {
+                ...prevData,
+                "kanton": e.target.value
+            }))
    }

-    console.log(locationData)
-
-    useEffect(() => {
-        console.log(locationData)
-    },[locationData])

    return (
-        <div>
-            <label htmlFor={Location.ime}>Izaberite lokaciju:</label>
-            <select name={Location.ime} id={Location.ime} onClick={(e) => clickHandler(e) }>
+        <div className="locationFilter-div">
+            <label className="location-title" htmlFor={Location.ime}>Izaberite lokaciju:</label>
+            <select name={Location.ime} id={Location.ime} onChange={(e) => clickHandler(e) }>
                <option value="Svi">Svi</option>
                <optgroup label={Location.entiteti[0].entitet}>
                    {Location.entiteti[0].kantoni.map((kanton, i) => {
                        return(
-                            <option key={i} value={kanton.kanton}>{kanton.kanton}</option>
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
                        )
                    })}
                </optgroup>
                <optgroup label={Location.entiteti[1].entitet}>
                    {Location.entiteti[1].kantoni.map((kanton, i) => {
                        return(
-                            <option key={i} value={kanton.kanton}>{kanton.kanton}</option>
+                            <option key={i} name="kanton" value={kanton.kanton}>{kanton.kanton}</option>
                        )
                    })}
                </optgroup>
-                <option style={{fontWeight: "bold"}} value={Location.entiteti[2].distrikt}>{Location.entiteti[2].distrikt}</option>
+                <option style={{fontWeight: "bold"}} name="distrikt" value={Location.entiteti[2].entitet}>{Location.entiteti[2].entitet}</option>
            </select>
        </div>
    )
--- a/kivi-cars/src/containers/App.js
+++ b/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>
--- a/kivi-cars/src/containers/CategoryPage.js
+++ b/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>
  );
--- a/kivi-cars/src/containers/DataContext.js
+++ b/kivi-cars/src/containers/DataContext.js
@@ -1,3 +0,0 @@
-import {createContext} from 'react';
-
-
--- a/kivi-cars/src/containers/EmailPage.js
+++ b/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">
--- a/kivi-cars/src/containers/FiltersPage.js
+++ b/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(
--- a/kivi-cars/src/containers/LocationPage.js
+++ b/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>
    );
 }
--- a/kivi-cars/src/containers/css/LocationPage.css
+++ b/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;
+    }
 }
--- a/kivi-cars/src/data/cars-brands.js
+++ b/kivi-cars/src/data/cars-brands.js
@@ -1,6 +1,6 @@
 const Cars = [
-    {"brand":"Izaberite",
-        "models": ["Izaberite"]
+    {"brand":"Odaberite",
+        "models": ["Odaberite"]
    },
    {"brand":"Alfa Romeo",
        "models": [
--- a/kivi-cars/src/data/fuel.js
+++ b/kivi-cars/src/data/fuel.js
@@ -4,7 +4,7 @@ const Fuel = {
        "Odaberite",
        "Dizel",
        "Benzin",
-        "Plin",
+        "Benzin/Plin",
        "Cng",
        "Hybrid",
        "Elektro"
--- a/kivi-cars/src/data/location.js
+++ b/kivi-cars/src/data/location.js
@@ -216,7 +216,15 @@ const Location = {
                }
            ]
        },
-        {"distrikt":"Distrikt Brcko"}
+        {"entitet":"Distrikt Brcko",
+            "kantoni": [
+                {"kanton": "Distrikt Brcko",
+                    "gradovi":[
+                        
+                    ]
+                }
+            ]
+        }
    ]
 }