old-web/frontend-react/src/components/App.js

import React from "react";
import Select from "react-select";
import { connect } from "react-redux";
import { CATEGORY_SELECT, ITEMS_CHANGED } from "constants/actionTypes";
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 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 })
});

let lastUpdateTime = null;
let interval = null;
class App extends React.Component {
  componentDidMount() {
    interval = setInterval(() => {
      if (lastUpdateTime && Date.now() - lastUpdateTime > 2000) {
        const { category, options, subcategory, onItemsChanged } = this.props;
        let url = createOlxLink(category, subcategory, options);
        url = encodeURI(url);
        if (url) {
          axios
            .get(`/api/${url}`)
            .then(response => onItemsChanged(response.data))
            .catch(error => console.log(error));
        }
        lastUpdateTime = null;
      }
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(interval);
  }
  componentWillReceiveProps(newProps) {
    const { subcategory, category, options } = this.props;
    if (
      newProps.subcategory !== subcategory ||
      newProps.category !== category ||
      !areObjectEqual(newProps.options, options)
    ) {
      lastUpdateTime = Date.now();
    }
  }
  handleChange = selectedOption => {
    this.props.onCategoryChanged(selectedOption);
  };

  render() {
    const { category } = this.props;

    return (
      <div>
        <Select
          value={category}
          onChange={this.handleChange}
          options={options}
        />
        {hoc(category && category.value, {
          Vozila: <Vozila />,
          Nekretnine: <Nekretnine />
        })}
        <ItemsContainer />
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);