refactoring

frontend-react/src/components/filters/NekretnineFilter/AllFiltersDefined.js

@@ -0,0 +1,73 @@
+export const vrstaElements = [
+  {
+    value: "",
+    name: "Sve",
+    type: "radio",
+    optionName: "vrsta"
+  },
+  {
+    value: "samoprodaja",
+    name: "Prodaja",
+    type: "radio",
+    optionName: "vrsta"
+  },
+  {
+    value: "samoizdavanje",
+    name: "Iznajmljivanje",
+    type: "radio",
+    optionName: "vrsta"
+  },
+  {
+    value: "samopotraznja",
+    name: "Potražnja",
+    type: "radio",
+    optionName: "vrsta"
+  }
+];
+
+export const lokacijaOptions = {
+  choices: [
+    { value: "9", label: "Sarajevo" },
+    { value: "2", label: "Posavski" }
+  ],
+  value: "kanton",
+  optionName: "kanton"
+};
+
+export const cijenaRangeOptions = {
+  min: 0,
+  max: 100000,
+  defaultValues: [0, 100000],
+  step: 100,
+  optionNames: ["od", "do"]
+};
+
+export const velicinaRangeOptions = {
+  min: 0,
+  max: 1000,
+  defaultValues: [0, new Date().getFullYear()],
+  step: 1,
+  optionNames: ["kvadrata_min", "kvadrata_max"]
+};
+
+export const gradoviOptions = {
+  parentOptionName: "kanton",
+  checkboxOptions: {
+    "9": {
+      elements: [
+        {
+          type: "checkbox",
+          name: "Ilidza",
+          optionName: "grad-ilidza",
+          value: "3879"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Centar",
+          optionName: "grad-centar",
+          value: "3812"
+        }
+      ]
+    }
+  }
+};

frontend-react/src/components/filters/NekretnineFilter/Cijena.js

@@ -1,7 +0,0 @@
-export const rangeOptions = {
-  min: 0,
-  max: 100000,
-  defaultValues: [0, 100000],
-  step: 100,
-  optionNames: ["od", "do"]
-};

frontend-react/src/components/filters/NekretnineFilter/Lokacija.js

@@ -1,8 +0,0 @@
-export const lokacijaOptions = {
-  choices: [
-    { value: "9", label: "Sarajevo" },
-    { value: "2", label: "Posavski" }
-  ],
-  value: "kanton",
-  optionName: "kanton"
-};

frontend-react/src/components/filters/NekretnineFilter/Velicina.js

@@ -1,7 +0,0 @@
-export const rangeOptions = {
-  min: 0,
-  max: 1000,
-  defaultValues: [0, new Date().getFullYear()],
-  step: 1,
-  optionNames: ["kvadrata_min", "kvadrata_max"]
-};

frontend-react/src/components/filters/NekretnineFilter/Vrsta.js

@@ -1,26 +0,0 @@
-export const elements = [
-  {
-    value: "",
-    name: "Sve",
-    type: "radio",
-    optionName: "vrsta"
-  },
-  {
-    value: "samoprodaja",
-    name: "Prodaja",
-    type: "radio",
-    optionName: "vrsta"
-  },
-  {
-    value: "samoizdavanje",
-    name: "Iznajmljivanje",
-    type: "radio",
-    optionName: "vrsta"
-  },
-  {
-    value: "samopotraznja",
-    name: "Potražnja",
-    type: "radio",
-    optionName: "vrsta"
-  }
-];

frontend-react/src/components/filters/NekretnineFilter/index.js

@@ -1,9 +1,7 @@
 import React from "react";
-import * as Vrsta from "./Vrsta";
+import * as Filters from "./AllFiltersDefined";
-import * as Lokacija from "./Lokacija";
-import * as Cijena from "./Cijena";
-import * as Velicina from "./Velicina";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
+import SelectDisplayCheckboxWrapper from "components/widgets/SelectDisplayCheckboxWrapper";
 import RangeWrapper from "components/widgets/RangeWrapper";
 import SelectWrapper from "components/widgets/SelectWrapper";
 
@@ -13,11 +11,12 @@ class NekretnineFilter extends React.Component {
       <div>
         <CheckboxAndRadioWrapper
           componentName="vrsta"
-          elements={Vrsta.elements}
+          elements={Filters.vrstaElements}
         />
-        <SelectWrapper {...Lokacija.lokacijaOptions} />
+        <SelectWrapper {...Filters.lokacijaOptions} />
-        <RangeWrapper {...Cijena.rangeOptions} optionName="cijena" />
+        <SelectDisplayCheckboxWrapper {...Filters.gradoviOptions} />
-        <RangeWrapper {...Velicina.rangeOptions} optionName="velicina" />
+        <RangeWrapper {...Filters.cijenaRangeOptions} optionName="cijena" />
+        <RangeWrapper {...Filters.velicinaRangeOptions} optionName="velicina" />
       </div>
     );
   }

frontend-react/src/components/filters/VozilaFilter/AllFiltersDefined.js

@@ -0,0 +1,104 @@
+export const cijenaRangeOptions = {
+  min: 0,
+  max: 100000,
+  defaultValues: [0, 100000],
+  step: 100,
+  optionNames: ["od", "do"]
+};
+
+export const godisteRangeOptions = {
+  min: 1960,
+  max: new Date().getFullYear(),
+  defaultValues: [1960, new Date().getFullYear()],
+  step: 1,
+  optionNames: ["godiste_min", "godiste_max"]
+};
+
+export const gorivoElements = [
+  {
+    name: "Dizel",
+    optionName: "gorivo_select_dizel",
+    type: "checkbox",
+    value: "Dizel"
+  },
+  {
+    name: "Benzin",
+    optionName: "gorivo_select_benzin",
+    type: "checkbox",
+    value: "Benzin"
+  },
+  {
+    name: "Plin",
+    optionName: "gorivo_select_plin",
+    type: "checkbox",
+    value: "Plin"
+  },
+  {
+    name: "Hibrid",
+    optionName: "gorivo_select_hibrid",
+    type: "checkbox",
+    value: "Hibrid"
+  },
+  {
+    name: "Elektro",
+    optionName: "gorivo_select_elektro",
+    type: "checkbox",
+    value: "Elektro"
+  }
+];
+
+export const kilometrazaOptions = {
+  kilometraMin: {
+    choices: [{ value: 5000, label: "5000" }, { value: 10000, label: "10000" }],
+    value: "kilometra-a_min",
+    optionName: "kilometra-a_min"
+  },
+  kilometraMax: {
+    choices: [
+      { value: 15000, label: "15000" },
+      { value: 200000, label: "200000" }
+    ],
+    value: "kilometra-a_max",
+    optionName: "kilometra-a_max"
+  }
+};
+
+export const lokacijaOptions = {
+  choices: [
+    { value: "9", label: "Sarajevo" },
+    { value: "2", label: "Posavski" }
+  ],
+  value: "kanton",
+  optionName: "kanton"
+};
+export const proizvodacOptions = {
+  choices: [{ value: "1900", label: "Audi" }, { value: "9000", label: "Ford" }],
+  value: "v_b",
+  optionName: "v_b"
+};
+export const stanjeElements = [
+  {
+    type: "radio",
+    value: "",
+    name: "Nova i polovna vozila",
+    optionName: "stanje"
+  },
+  {
+    type: "radio",
+    value: 1,
+    name: "Nova",
+    optionName: "stanje"
+  },
+  {
+    type: "radio",
+    value: 2,
+    name: "Polovna vozila",
+    optionName: "stanje"
+  },
+  {
+    type: "checkbox",
+    name: "Udarena vozila",
+    optionName: "udaren_checkbox",
+    value: "on"
+  }
+];

frontend-react/src/components/filters/VozilaFilter/Cijena.js

@@ -1,7 +0,0 @@
-export const rangeOptions = {
-  min: 0,
-  max: 100000,
-  defaultValues: [0, 100000],
-  step: 100,
-  optionNames: ["od", "do"]
-};

frontend-react/src/components/filters/VozilaFilter/Godiste.js

@@ -1,7 +0,0 @@
-export const rangeOptions = {
-  min: 1960,
-  max: new Date().getFullYear(),
-  defaultValues: [1960, new Date().getFullYear()],
-  step: 1,
-  optionNames: ["godiste_min", "godiste_max"]
-};

frontend-react/src/components/filters/VozilaFilter/Gorivo.js

@@ -1,32 +0,0 @@
-export const elements = [
-  {
-    name: "Dizel",
-    optionName: "gorivo_select_dizel",
-    type: "checkbox",
-    value: "Dizel"
-  },
-  {
-    name: "Benzin",
-    optionName: "gorivo_select_benzin",
-    type: "checkbox",
-    value: "Benzin"
-  },
-  {
-    name: "Plin",
-    optionName: "gorivo_select_plin",
-    type: "checkbox",
-    value: "Plin"
-  },
-  {
-    name: "Hibrid",
-    optionName: "gorivo_select_hibrid",
-    type: "checkbox",
-    value: "Hibrid"
-  },
-  {
-    name: "Elektro",
-    optionName: "gorivo_select_elektro",
-    type: "checkbox",
-    value: "Elektro"
-  }
-];

frontend-react/src/components/filters/VozilaFilter/Kilometraza.js

@@ -1,15 +0,0 @@
-export const kilometrazaOptions = {
-  kilometraMin: {
-    choices: [{ value: 5000, label: "5000" }, { value: 10000, label: "10000" }],
-    value: "kilometra-a_min",
-    optionName: "kilometra-a_min"
-  },
-  kilometraMax: {
-    choices: [
-      { value: 15000, label: "15000" },
-      { value: 200000, label: "200000" }
-    ],
-    value: "kilometra-a_max",
-    optionName: "kilometra-a_max"
-  }
-};

frontend-react/src/components/filters/VozilaFilter/Lokacija.js

@@ -1,8 +0,0 @@
-export const lokacijaOptions = {
-  choices: [
-    { value: "9", label: "Sarajevo" },
-    { value: "2", label: "Posavski" }
-  ],
-  value: "kanton",
-  optionName: "kanton"
-};

frontend-react/src/components/filters/VozilaFilter/Proizvodac.js

@@ -1,5 +0,0 @@
-export const proizvodacOptions = {
-  choices: [{ value: "1900", label: "Audi" }, { value: "9000", label: "Ford" }],
-  value: "v_b",
-  optionName: "v_b"
-};

frontend-react/src/components/filters/VozilaFilter/Stanje.js

@@ -1,26 +0,0 @@
-export const elements = [
-  {
-    type: "radio",
-    value: "",
-    name: "Nova i polovna vozila",
-    optionName: "stanje"
-  },
-  {
-    type: "radio",
-    value: 1,
-    name: "Nova",
-    optionName: "stanje"
-  },
-  {
-    type: "radio",
-    value: 2,
-    name: "Polovna vozila",
-    optionName: "stanje"
-  },
-  {
-    type: "checkbox",
-    name: "Udarena vozila",
-    optionName: "udaren_checkbox",
-    value: "on"
-  }
-];

frontend-react/src/components/filters/VozilaFilter/index.js

@@ -1,11 +1,5 @@
 import React from "react";
-import * as Stanje from "./Stanje";
+import * as Filters from "./AllFiltersDefined";
-import * as Proizvodac from "./Proizvodac";
-import * as Cijena from "./Cijena";
-import * as Lokacija from "./Lokacija";
-import * as Godiste from "./Godiste";
-import * as Kilometraza from "./Kilometraza";
-import * as Gorivo from "./Gorivo";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
 import RangeWrapper from "components/widgets/RangeWrapper";
 import SelectWrapper from "components/widgets/SelectWrapper";
@@ -16,17 +10,17 @@ class VozilaFilter extends React.Component {
       <div>
         <CheckboxAndRadioWrapper
           componentName="stanje"
-          elements={Stanje.elements}
+          elements={Filters.stanjeElements}
         />
-        <SelectWrapper {...Proizvodac.proizvodacOptions} />
+        <SelectWrapper {...Filters.proizvodacOptions} />
-        <RangeWrapper {...Cijena.rangeOptions} />
+        <RangeWrapper {...Filters.cijenaRangeOptions} />
-        <SelectWrapper {...Lokacija.lokacijaOptions} />
+        <SelectWrapper {...Filters.lokacijaOptions} />
-        <RangeWrapper {...Godiste.rangeOptions} />
+        <RangeWrapper {...Filters.godisteRangeOptions} />
-        <SelectWrapper {...Kilometraza.kilometrazaOptions.kilometraMin} />
+        <SelectWrapper {...Filters.kilometrazaOptions.kilometraMin} />
-        <SelectWrapper {...Kilometraza.kilometrazaOptions.kilometraMax} />
+        <SelectWrapper {...Filters.kilometrazaOptions.kilometraMax} />
         <CheckboxAndRadioWrapper
           componentName="gorivo"
-          elements={Gorivo.elements}
+          elements={Filters.gorivoElements}
         />
       </div>
     );

frontend-react/src/components/widgets/SelectDisplayCheckboxWrapper.js

@@ -0,0 +1,21 @@
+import React from "react";
+import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
+import { optionchangewrapper } from "utils/optionchangewrapper";
+
+class SelectDisplayCheckboxWrapper extends React.Component {
+  render() {
+    const { options, checkboxOptions, parentOptionName } = this.props;
+    let elements =
+      options[parentOptionName] &&
+      checkboxOptions[options[parentOptionName].value].elements;
+    return elements ? (
+      <div>
+        <CheckboxAndRadioWrapper
+          componentName={`${parentOptionName}-child`}
+          elements={elements}
+        />
+      </div>
+    ) : null;
+  }
+}
+export default optionchangewrapper(SelectDisplayCheckboxWrapper);

frontend-react/src/utils/createOlxLink.js

@@ -1,21 +1,38 @@
 const isObject = obj => obj === Object(obj);
-const mapOptionToLink = (options, option) =>
+const mapOptionsToLink = options => {
-  options[option] !== false
+  const multipleOptions = ["grad"];
-    ? `${option}=${
+  return Object.entries(options)
-        isObject(options[option]) ? options[option].value : options[option]
+    .filter(([optionName, optionValue]) => optionValue !== false)
-      }&`
+    .map(([optionName, optionValue]) =>
-    : "";
+      isObject(options[optionName])
+        ? [optionName, options[optionName].value]
+        : [optionName, optionValue]
+    )
+    .map(
+      ([optionName, optionValue]) =>
+        !console.log(optionName, optionValue) && [optionName, optionValue]
+    )
+    .reduce((acc, [optionName, optionValue]) => {
+      console.log(optionName, typeof optionName);
+      if (multipleOptions.some(option => ~optionName.indexOf(option))) {
+        const whatOption = multipleOptions.filter(
+          option => ~optionName.indexOf(option)
+        )[0];
+        return acc + `${whatOption}[]=${optionValue}&`;
+      }
+      return acc + `${optionName}=${optionValue}&`;
+    }, "");
+};
 
 export const createOlxLink = (category, subcategory, options) => {
-  const deepSubCategory =
+  const categoryChoice =
-    Boolean(Object.keys(subcategory).length) &&
+    (Boolean(Object.keys(subcategory).length) &&
-    subcategory[
+      subcategory[
-      Object.keys(subcategory).reduce((max, key) => (max < key ? key : max))
+        Object.keys(subcategory).reduce((max, key) => (max < key ? key : max))
-    ];
+      ]) ||
-  return deepSubCategory
+    category;
-    ? Object.keys(options).reduce(
+
-        (link, option) => link + mapOptionToLink(options, option),
+  return categoryChoice
-        `kategorija=${deepSubCategory.value}&`
+    ? `kategorija=${categoryChoice.value}&${mapOptionsToLink(options)}`
-      )
     : "";
 };