Configured wizard

frontend-react/src/components/App.js

@@ -13,7 +13,7 @@ import logo from "../assets/img/reactlogo.png";
 import Sidebar from "../components/Sidebar.js";
 import ItemsContainer from "./items/itemscontainer/ItemsContainer";
 import NotificationModal from "./NotificationModal";
-
+import StepWizard from 'react-step-wizard';
 import dashboardStyle from "../assets/dashboardStyle.js";
 
 const mapStateToProps = state => {
@@ -35,47 +35,11 @@ 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,
-          onUserDataChange
-        } = this.props;
-        let url = createOlxLink(category, subcategory, options);
-        url = encodeURI(url);
-        onUserDataChange({ info: "olx_url", value: url });
-        if (url) {
-          axios
-            .get(`/items/${url}`)
-            .then(response => {
-              onItemsChanged(response.data.items);
-              onUserDataChange({
-                info: "last_date",
-                value: response.data.last_date
-              });
-            })
-            .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();
-    }
   }
 
   render() {
@@ -83,11 +47,10 @@ class App extends React.Component {
 
     return (
       <div className={classes.wrapper}>
-        <Sidebar logoText={"Market Alarm"} logo={logo} image={image} />
-        <div className={classes.mainPanel}>
-          {items.length && <h3 className={classes.itemsCountTitle}>Pronađeno {items.length} nekretnina. Napravite notifikaciju i primite vise detalja na vas emailu adresu.</h3>}
-          {items.length ? <NotificationModal /> : null}
-        </div>
+        <StepWizard>
+           <Sidebar />
+           <NotificationModal />
+        </StepWizard>
       </div>
     );
   }

frontend-react/src/components/OldApp.js

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from "prop-types";
+import withStyles from "@material-ui/core/styles/withStyles";
+import { connect } from "react-redux";
+import { ITEMS_CHANGED, USER_DATA_CHANGED } from "../constants/actionTypes";
+import { areObjectEqual } from "../utils/helpers";
+import { createOlxLink } from "../utils/createOlxLink";
+import axios from "axios";
+
+import image from "../assets/img/sidebar-1.jpg";
+import logo from "../assets/img/reactlogo.png";
+
+import Sidebar from "../components/Sidebar.js";
+import ItemsContainer from "./items/itemscontainer/ItemsContainer";
+import NotificationModal from "./NotificationModal";
+
+import dashboardStyle from "../assets/dashboardStyle.js";
+
+const mapStateToProps = state => {
+  return {
+    category: state.category,
+    options: state.options,
+    subcategory: state.subcategory,
+    items: state.items,
+    userdata: state.userdata
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onItemsChanged: items => dispatch({ type: ITEMS_CHANGED, items }),
+  onUserDataChange: change => dispatch({ type: USER_DATA_CHANGED, ...change })
+});
+
+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,
+          onUserDataChange
+        } = this.props;
+        let url = createOlxLink(category, subcategory, options);
+        url = encodeURI(url);
+        onUserDataChange({ info: "olx_url", value: url });
+        if (url) {
+          axios
+            .get(`/items/${url}`)
+            .then(response => {
+              onItemsChanged(response.data.items);
+              onUserDataChange({
+                info: "last_date",
+                value: response.data.last_date
+              });
+            })
+            .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();
+    }
+  }
+
+  render() {
+    const { items, classes } = this.props;
+
+    return (
+      <div className={classes.wrapper}>
+        <Sidebar logoText={"Market Alarm"} logo={logo} image={image} />
+        <div className={classes.mainPanel}>
+          {items.length && <h3 className={classes.itemsCountTitle}>Pronađeno {items.length} nekretnina. Napravite notifikaciju i primite vise detalja na vas emailu adresu.</h3>}
+          {items.length ? <NotificationModal /> : null}
+        </div>
+      </div>
+    );
+  }
+}
+App.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(dashboardStyle)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(App)
+);