basic frontend demo with react and redux

frontend-react/src/components/App.js

@@ -0,0 +1,71 @@
+import React from "react";
+import Select from "react-select";
+import { connect } from "react-redux";
+import { CATEGORY_SELECT, ITEMS_CHANGED } from "constants/actionTypes";
+import { hoc } from "utils/hoc";
+import { createOlxLink } from "utils/createOlxLink";
+import axios from "axios";
+
+import Vozila from "./categories/Vozila";
+import Nekretnine from "./categories/Nekretnine";
+import ItemsContainer from "./items/itemscontainer/ItemsContainer";
+
+const options = [
+  { value: "Vozila", label: "Vozila" },
+  { value: "Nekretnine", label: "Nekretnine" }
+];
+
+const mapStateToProps = state => {
+  return {
+    category: state.category,
+    options: state.options,
+    subcategory: state.subcategory,
+    items: state.items
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option }),
+  onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items })
+});
+
+class App extends React.Component {
+  handleChange = selectedOption => {
+    this.props.onCategoryChanged(selectedOption);
+  };
+
+  getDataFromOlx = () => {
+    const { category, options, subcategory, onItemsChanged } = this.props;
+    let url = createOlxLink(category, subcategory, options);
+    url = encodeURI(url);
+    axios
+      .get(`/api/${url}`)
+      .then(response => onItemsChanged(response.data))
+      .catch(error => console.log(error));
+  };
+
+  render() {
+    const { category } = this.props;
+
+    return (
+      <div>
+        <Select
+          value={category}
+          onChange={this.handleChange}
+          options={options}
+        />
+        {hoc(category && category.value, {
+          Vozila: <Vozila />,
+          Nekretnine: <Nekretnine />
+        })}
+        <button onClick={this.getDataFromOlx}>Get Data from OLX </button>
+        <ItemsContainer />
+      </div>
+    );
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(App);