deep subcategory solution

frontend-react/src/components/App.js

@@ -6,8 +6,9 @@ import { hoc, areObjectEqual } from "utils/helpers";
 import { createOlxLink } from "utils/createOlxLink";
 import axios from "axios";
 
-import Vozila from "./categories/Vozila";
-import Nekretnine from "./categories/Nekretnine";
+import * as Vozila from "./categories/Vozila";
+import * as Nekretnine from "./categories/Nekretnine";
+import DeepCategoryWrapper from "components/widgets/DeepCategoryWrapper";
 import ItemsContainer from "./items/itemscontainer/ItemsContainer";
 
 const options = [
@@ -77,8 +78,8 @@ class App extends React.Component {
           options={options}
         />
         {hoc(category && category.value, {
-          Vozila: <Vozila />,
-          Nekretnine: <Nekretnine />
+          Vozila: <DeepCategoryWrapper {...Vozila.properties} />,
+          Nekretnine: <DeepCategoryWrapper {...Nekretnine.properties} />
         })}
         <ItemsContainer />
       </div>

frontend-react/src/components/categories/Nekretnine.js

@@ -1,35 +1,17 @@
 import React from "react";
-import Select from "react-select";
-import { subcategorywrapper } from "utils/subcategorywrapper";
-import { hoc } from "utils/helpers";
 
 import Stanovi from "../subcategories/nekretnine/Stanovi";
 import Kuce from "../subcategories/nekretnine/Kuce";
 
 const options = [{ value: 23, label: "Stanovi" }, { value: 24, label: "Kuce" }];
+const depth = 0;
+const childrenComponents = {
+  23: <Stanovi />,
+  24: <Kuce />
+};
 
-class Nekretnine extends React.Component {
-  handleChange = selectedOption => {
-    this.props.onSubCategoryChanged(selectedOption);
-  };
-
-  render() {
-    const { subcategory } = this.props;
-
-    return (
-      <div>
-        <Select
-          value={subcategory}
-          onChange={this.handleChange}
-          options={options}
-        />
-        {hoc(subcategory && subcategory.value, {
-          23: <Stanovi />,
-          24: <Kuce />
-        })}
-      </div>
-    );
-  }
-}
-
-export default subcategorywrapper(Nekretnine);
+export const properties = {
+  options,
+  depth,
+  childrenComponents
+};

frontend-react/src/components/categories/Vozila.js

@@ -1,37 +1,20 @@
 import React from "react";
-import Select from "react-select";
+
 import Automobili from "../subcategories/vozila/Automobili";
 import Motocikli from "../subcategories/vozila/Motocikli";
-import { subcategorywrapper } from "utils/subcategorywrapper";
-import { hoc } from "utils/helpers";
 
 const options = [
   { value: 18, label: "Automobili" },
   { value: 21, label: "Motocikli" }
 ];
+const depth = 0;
+const childrenComponents = {
+  18: <Automobili />,
+  21: <Motocikli />
+};
 
-class Vozila extends React.Component {
-  handleChange = selectedOption => {
-    this.props.onSubCategoryChanged(selectedOption);
-  };
-
-  render() {
-    const { subcategory } = this.props;
-
-    return (
-      <div>
-        <Select
-          value={subcategory}
-          onChange={this.handleChange}
-          options={options}
-        />
-        {hoc(subcategory && subcategory.value, {
-          18: <Automobili />,
-          21: <Motocikli />
-        })}
-      </div>
-    );
-  }
-}
-
-export default subcategorywrapper(Vozila);
+export const properties = {
+  options,
+  depth,
+  childrenComponents
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import Select from "react-select";
+import { subcategorywrapper } from "utils/subcategorywrapper";
+import { hoc } from "utils/helpers";
+
+class DeepCategoryWrapper extends React.Component {
+  handleOptionChange = selectedOption => {
+    const { depth, onSubCategoryChanged } = this.props;
+    onSubCategoryChanged({ selectedOption, depth });
+  };
+
+  render() {
+    const { options, depth, childrenComponents } = this.props;
+    const {
+      subcategory: { [depth]: deepSubCategory }
+    } = this.props;
+
+    return (
+      <div>
+        <Select
+          value={deepSubCategory || null}
+          onChange={this.handleOptionChange}
+          options={options}
+        />
+        {hoc(deepSubCategory && deepSubCategory.value, childrenComponents)}
+      </div>
+    );
+  }
+}
+export default subcategorywrapper(DeepCategoryWrapper);