diff --git a/kivi-cars/src/components/Filters/Filter/Filter.js b/kivi-cars/src/components/Filters/Filter/Filter.js index c1e9cce..7c76020 100644 --- a/kivi-cars/src/components/Filters/Filter/Filter.js +++ b/kivi-cars/src/components/Filters/Filter/Filter.js @@ -1,10 +1,9 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import './css/Filter.css'; const Filter = (props) => { - const {filters, setFilters} = props.data - const [filtersData, setFiltersData] = useState({}) + const {setFilters} = props.data const changeHandler = ( e ) => { setFilters( prevData => ({ diff --git a/kivi-cars/src/components/Filters/Filters.css b/kivi-cars/src/components/Filters/Filters.css index f64b7f1..a6b472e 100644 --- a/kivi-cars/src/components/Filters/Filters.css +++ b/kivi-cars/src/components/Filters/Filters.css @@ -9,7 +9,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: center; + justify-content: space-between; } .filters-content{ @@ -36,9 +36,11 @@ padding: 2em 5em; } - .checkbox-content{ + + + /* .checkbox-content{ width: ; - } + } */ } diff --git a/kivi-cars/src/components/Filters/Standard-filters.js b/kivi-cars/src/components/Filters/Standard-filters.js index fd4d4f2..ea00150 100644 --- a/kivi-cars/src/components/Filters/Standard-filters.js +++ b/kivi-cars/src/components/Filters/Standard-filters.js @@ -4,94 +4,51 @@ 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 Trucks from "../../data/trucks-brands"; -import Motors from "../../data/motors-brands" -import Cubes from "../../data/cubes"; -import Type from "../../data/type"; -import Fuel from "../../data/fuel"; -import Transmission from "../../data/transmission"; -import Drive from "../../data/drive"; -import Condition from "../../data/condition"; -import Doors from "../../data/doors"; -import Year from "../../data/year"; -import Price from "../../data/price"; -import HorsePower from "../../data/horsepower"; -import Kilowats from "../../data/kilowats"; -import Kilometers from "../../data/kilometers"; +import vehicleService from "../../services/vehicle-service"; const StandardFilters = (props) => { const {data, filters, setFilters} = props.data; const [brandIndex, setBrandIndex] = useState(0); - const [model, showModel] = useState(true); let index = 0; - let brands; + let details, marke; - // if(data.Category.Vozilo === "Auto"){ - // showModel(true) - // return - // }) + details = vehicleService(data.Category.Vozilo); + const {show, brands, data1, data2, data3} = details; - // }else if(data.Category.Vozilo === "Motor"){ - // showModel(false) - // return brands = Motors.map(brand => { - // return brand.brand - // }) - // }else if(data.Category.Vozilo === "Teretno vozilo"){ - // return brands = Trucks.map(brand => { - // return brand.brand - // }) - // } - - brands = Cars.map(brand => { - return brand.brand}) + const [model, setModel] = useState(show); useEffect(() => { - if(filters.Marka)setBrandIndex(brands.indexOf(filters.Marka)) + if(filters.Marka)setBrandIndex(marke.indexOf(filters.Marka)) }, [filters]) - const models = Cars[brandIndex].models - - const Brands = { - "ime": "Marka", - "tipovi": brands - } - - const Models = { - "ime": "Model", - "tipovi": models - } - - const data1 = [Transmission, Drive, Condition, Doors] - const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats] - const data3 = [Fuel, Type] + marke = brands.map(marka => {return marka.brand}) return(
- - {model ? (): null} + + {model ? (): null} - {data3.map(item => { + {data1.map(item => { index += 1; return( - + ) })} {data2.map(item => { index += 1; return( - + ) })} - {data1.map(item => { + {data3.map(item => { index += 1; return( - + ) })} diff --git a/kivi-cars/src/services/vehicle-service.js b/kivi-cars/src/services/vehicle-service.js new file mode 100644 index 0000000..c530126 --- /dev/null +++ b/kivi-cars/src/services/vehicle-service.js @@ -0,0 +1,50 @@ +import Cars from "../data/cars-brands"; +import Trucks from "../data/trucks-brands"; +import Motors from "../data/motors-brands" +import Cubes from "../data/cubes"; +import Type from "../data/type"; +import Fuel from "../data/fuel"; +import Transmission from "../data/transmission"; +import Drive from "../data/drive"; +import Condition from "../data/condition"; +import Doors from "../data/doors"; +import Year from "../data/year"; +import Price from "../data/price"; +import HorsePower from "../data/horsepower"; +import Kilowats from "../data/kilowats"; +import Kilometers from "../data/kilometers"; + +const vehicleService = (vehicle) => { + let data1, data2, data3, brands, show; + if(vehicle === "Auto"){ + show = true; + data1 = [Fuel, Type] + data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats] + data3 = [Transmission, Drive, Condition, Doors] + brands = Cars.map(brand => { + return brand}) + } + else if(vehicle === "Motor"){ + show = false; + data1 = [Condition] + data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats] + data3 = [] + brands = Motors.map(brand => { + return brand + }) + } + else if(vehicle === "Teretno vozilo"){ + show = false; + data1 = [Condition, Fuel] + data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats] + data3 = [] + brands = Trucks.map(brand => { + return brand + }) + } + + + return {"show": show, "brands": brands, "data1": data1, "data2": data2, "data3": data3} +} + +export default vehicleService; \ No newline at end of file