Merge branch 'next_button' into 'main'

add next button in filters

See merge request saburly/marketalarm/kivi-za-auta-react!23

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 {setFilters} = props.data
-    const [filtersData, setFiltersData] = useState({})
 
     const changeHandler = ( e ) => {
         setFilters( prevData => ({

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: ;
-    }
+    } */
 
 
 }

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 vehicleService from "../../services/vehicle-service";
-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 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"){
+    details = vehicleService(data.Category.Vozilo);
-    //     showModel(true)
+    const {show, brands, data1, data2, data3} = details;
-    //     return 
-    //     })
 
-    // }else if(data.Category.Vozilo === "Motor"){
+    const [model, setModel] = useState(show);
-    //     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})
 
 
     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 = {
+    marke = brands.map(marka => {return marka.brand})
-        "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]    
 
     return(
         <div className="filters-container">
-            <Filter ime={Brands.ime} tipovi={Brands.tipovi} data={{filters, setFilters}}/>
+            <Filter ime={"Marka"} tipovi={marke} data={{data, filters, setFilters}}/>
-            {model ? (<Filter ime={Models.ime} tipovi={Models.tipovi} data={{filters, setFilters}}/>): null}
+            {model ? (<Filter ime={"Model"} tipovi={brands[brandIndex].models} data={{data, filters, setFilters}}/>): null}
 
-            {data3.map(item => {
+            {data1.map(item => {
                 index += 1;
                 return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
                 )
             })}
 
             {data2.map(item => {
                 index += 1;
                 return(
-                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{filters, setFilters}}/>
+                    <DoubleFilter key={index} title={item.title} fields={item.fields} data={{data, filters, setFilters}}/>
                 )
             })}
             
-            {data1.map(item => {
+            {data3.map(item => {
                 index += 1;
                 return(
-                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{filters, setFilters}}/>
+                    <Filter key={index} ime={item.ime} tipovi={item.tipovi} data={{data, filters, setFilters}}/>
                 )
             })}
 

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;