complete frontend restyling

frontend-react/src/components/App.js

@@ -1,26 +1,20 @@
 import React from "react";
-import Select from "react-select";
+import PropTypes from "prop-types";
+import withStyles from "@material-ui/core/styles/withStyles";
 import { connect } from "react-redux";
-import {
-  CATEGORY_SELECT,
-  ITEMS_CHANGED,
-  USER_DATA_CHANGED
-} from "constants/actionTypes";
-import { hoc, areObjectEqual } from "utils/helpers";
+import { ITEMS_CHANGED, USER_DATA_CHANGED } from "constants/actionTypes";
+import { areObjectEqual } from "utils/helpers";
 import { createOlxLink } from "utils/createOlxLink";
 import axios from "axios";
 
-import * as Vozila from "./categories/Vozila";
-import * as Nekretnine from "./categories/Nekretnine";
+import image from "assets/img/sidebar-1.jpg";
+import logo from "assets/img/reactlogo.png";
 
-import DeepCategoryWrapper from "components/widgets/DeepCategoryWrapper";
+import Sidebar from "components/Sidebar.js";
 import ItemsContainer from "./items/itemscontainer/ItemsContainer";
 import NotificationModal from "./NotificationModal";
 
-const options = [
-  { value: "Vozila", label: "Vozila" },
-  { value: "Nekretnine", label: "Nekretnine" }
-];
+import dashboardStyle from "assets/dashboardStyle.js";
 
 const mapStateToProps = state => {
   return {
@@ -33,7 +27,6 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-  onCategoryChanged: option => dispatch({ type: CATEGORY_SELECT, option }),
   onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items }),
   onUserDataChange: change => dispatch({ type: USER_DATA_CHANGED, ...change })
 });
@@ -84,32 +77,29 @@ class App extends React.Component {
       lastUpdateTime = Date.now();
     }
   }
-  handleChange = selectedOption => {
-    this.props.onCategoryChanged(selectedOption);
-  };
 
   render() {
-    const { category, items } = this.props;
+    const { items, classes } = this.props;
 
     return (
-      <div>
-        <Select
-          value={category}
-          onChange={this.handleChange}
-          options={options}
-        />
-        {hoc(category && category.value, {
-          Vozila: <DeepCategoryWrapper {...Vozila.properties} />,
-          Nekretnine: <DeepCategoryWrapper {...Nekretnine.properties} />
-        })}
-        <ItemsContainer />
-        {items.length ? <NotificationModal /> : null}
+      <div className={classes.wrapper}>
+        <Sidebar logoText={"Market Alarm"} logo={logo} image={image} />
+
+        <div className={classes.mainPanel}>
+          <ItemsContainer />
+          {items.length ? <NotificationModal /> : null}
+        </div>
       </div>
     );
   }
 }
+App.propTypes = {
+  classes: PropTypes.object.isRequired
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+export default withStyles(dashboardStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(App)
+);