72 lines
1.9 KiB
JavaScript
72 lines
1.9 KiB
JavaScript
|
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);
|