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 * as Vozila from "./categories/Vozila";
-import Nekretnine from "./categories/Nekretnine";
+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 />,
+          Vozila: <DeepCategoryWrapper {...Vozila.properties} />,
-          Nekretnine: <Nekretnine />
+          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 {
+export const properties = {
-  handleChange = selectedOption => {
+  options,
-    this.props.onSubCategoryChanged(selectedOption);
+  depth,
-  };
+  childrenComponents
-
+};
-  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);

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 {
+export const properties = {
-  handleChange = selectedOption => {
+  options,
-    this.props.onSubCategoryChanged(selectedOption);
+  depth,
-  };
+  childrenComponents
-
+};
-  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);

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);

frontend-react/src/reducers/subcategory.js

@@ -1,12 +1,12 @@
 import { SUBCATEGORY_SELECT, CATEGORY_SELECT } from "constants/actionTypes";
 
-export default (state = null, action) => {
+export default (state = {}, action) => {
-	switch (action.type) {
+  switch (action.type) {
-		case SUBCATEGORY_SELECT:
+    case SUBCATEGORY_SELECT:
-			return action.option;
+      return { ...state, [action.option.depth]: action.option.selectedOption };
-		case CATEGORY_SELECT:
+    case CATEGORY_SELECT:
-			return null;
+      return {};
-		default:
+    default:
-			return state;
+      return state;
-	}
+  }
 };

frontend-react/src/utils/createOlxLink.js

@@ -6,10 +6,16 @@ const mapOptionToLink = (options, option) =>
       }&`
     : "";
 
-export const createOlxLink = (category, subcategory, options) =>
+export const createOlxLink = (category, subcategory, options) => {
-  subcategory.value
+  const deepSubCategory =
+    Boolean(Object.keys(subcategory).length) &&
+    subcategory[
+      Object.keys(subcategory).reduce((max, key) => (max < key ? key : max))
+    ];
+  return deepSubCategory
     ? Object.keys(options).reduce(
         (link, option) => link + mapOptionToLink(options, option),
-        `kategorija=${subcategory.value}&`
+        `kategorija=${deepSubCategory.value}&`
       )
     : "";
+};

frontend-react/src/utils/helpers.js

@@ -1,4 +1,4 @@
-export const hoc = (option, componentList) => componentList[option] || null;
+export const hoc = (option, componentList) => componentList[option];
 export const areObjectEqual = function checkEquality(objectA, objectB) {
   return (
     Object.keys(objectA).length === Object.keys(objectB).length &&