From 0087a7ee0c8c157c5ea33206d731fd411a1ff3e3 Mon Sep 17 00:00:00 2001
From: lion <ehvan@saburly.com>
Date: Wed, 6 Feb 2019 14:55:48 +0100
Subject: [PATCH] some refactoring and enabling payment (final)

---
 backend/index.js                              |  52 +-
 backend/package-lock.json                     |   8 +
 backend/package.json                          |   1 +
 frontend-react/public/index.html              |   4 +
 .../src/components/NotificationModal.js       | 126 ++++-
 .../NekretnineFilter/AllFiltersDefined.js     | 235 ++++++--
 .../NekretnineFilter/KuceFilter/index.js      |  67 ---
 .../NekretnineFilter/StanoviFilter/index.js   |  74 ---
 .../filters/NekretnineFilter/index.js         | 102 ++--
 .../filters/VozilaFilter/AllFiltersDefined.js | 196 +++++--
 .../components/filters/VozilaFilter/index.js  | 126 +++--
 .../subcategories/nekretnine/Kuce.js          |  35 +-
 .../subcategories/nekretnine/Stanovi.js       |  34 +-
 .../subcategories/vozila/Automobili.js        |  38 +-
 .../subcategories/vozila/Motocikli.js         |  36 +-
 .../components/widgets/CollapseWrapperAll.js  |  13 +
 package-lock.json                             | 511 +++++++++++++++---
 17 files changed, 1199 insertions(+), 459 deletions(-)
 delete mode 100644 frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js
 delete mode 100644 frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js
 create mode 100644 frontend-react/src/components/widgets/CollapseWrapperAll.js

diff --git a/backend/index.js b/backend/index.js
index 6345cc6..dfa36bc 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -5,6 +5,7 @@ const MarketAlert = require("./MarketAlert");
 const sendNotification = require("./utils/sendnotification");
 const scrapTheItems = require("./utils/scraptheitems");
 const sequelize = require("./db.js");
+const Twocheckout = require("2checkout-node");
 
 const app = express();
 app.use(bodyParser.json());
@@ -23,7 +24,7 @@ app.get("/sendnotifications", async function(req, res) {
       })
       .map(sendNotification)
   );
-  if (lastDateUpdate.some(dateUpdate => !dateUpdate)) return;
+  lastDateUpdate = lastDateUpdate.filter(Boolean(dateUpdate));
   lastDateUpdate.length &&
     lastDateUpdate.forEach(dateUpdate =>
       MarketAlert.update(
@@ -47,14 +48,49 @@ app.get("/items/:url", async (req, res) => {
 
 app.post("/marketalerts", function(req, res) {
   const { email, last_date, olx_url } = req.body;
-  sequelize.sync().then(() =>
-    MarketAlert.create({
-      olx_url,
-      last_date,
-      email
-    })
-  );
+  console.log(email, last_date, olx_url);
   res.json({ message: "Market Alert Created!" });
+  // sequelize.sync().then(() =>
+  //   MarketAlert.create({
+  //     olx_url,
+  //     last_date,
+  //     email
+  //   })
+  // );
+  // res.json({ message: "Market Alert Created!" });
+});
+
+app.post("/payforalert", function(request, response) {
+  let tco = new Twocheckout({
+    sellerId: "901402692",
+    privateKey: "A28DCE5F-9292-405C-8161-F84D8BB83AFC",
+    sandbox: true
+  });
+
+  let params = {
+    merchantOrderId: "123",
+    token: request.body.token,
+    currency: "USD",
+    total: "2.00",
+    billingAddr: {
+      name: "Testing Tester",
+      addrLine1: "123 Test St",
+      city: "Sarajevo",
+      state: "BiH",
+      zipCode: "71000",
+      country: "BiH",
+      email: request.body.email,
+      phoneNumber: "5555555555"
+    }
+  };
+
+  tco.checkout.authorize(params, function(error, data) {
+    if (error) {
+      response.send(error.message);
+    } else {
+      response.send(data.response.responseMsg);
+    }
+  });
 });
 
 app.listen(port, () => console.log(`Example app listening on port ${port}!`));
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 52a9248..e3a96c5 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -4,6 +4,14 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "2checkout-node": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/2checkout-node/-/2checkout-node-0.0.1.tgz",
+      "integrity": "sha1-7a5MHUAIh6Y+hUXjf7mrBVeaaIU=",
+      "requires": {
+        "request": "2.x.x"
+      }
+    },
     "@sendgrid/client": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/@sendgrid/client/-/client-6.3.0.tgz",
diff --git a/backend/package.json b/backend/package.json
index 793dc4c..88ccdfb 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -9,6 +9,7 @@
   "author": "Ehvan Gradanin",
   "license": "ISC",
   "dependencies": {
+    "2checkout-node": "0.0.1",
     "@sendgrid/mail": "^6.3.1",
     "cheerio": "^1.0.0-rc.2",
     "express": "^4.16.4",
diff --git a/frontend-react/public/index.html b/frontend-react/public/index.html
index 5c3706e..1648ee8 100755
--- a/frontend-react/public/index.html
+++ b/frontend-react/public/index.html
@@ -19,6 +19,10 @@
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
     />
     <link rel="stylesheet" href="./style.css" />
+    <script
+      type="text/javascript"
+      src="https://www.2checkout.com/checkout/api/2co.min.js"
+    ></script>
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
diff --git a/frontend-react/src/components/NotificationModal.js b/frontend-react/src/components/NotificationModal.js
index a7b39ab..e829004 100644
--- a/frontend-react/src/components/NotificationModal.js
+++ b/frontend-react/src/components/NotificationModal.js
@@ -21,7 +21,12 @@ function Transition(props) {
   return <Slide direction="down" {...props} />;
 }
 
+let token = "";
 class NotificationModal extends React.Component {
+  componentDidMount() {
+    console.log("load sandbox");
+    window.TCO.loadPubKey("sandbox");
+  }
   handleOpen = () => {
     this.props.onModalOpen();
   };
@@ -34,7 +39,7 @@ class NotificationModal extends React.Component {
       email
     );
 
-  handleInput = e => {
+  handleEmail = e => {
     this.props.onUserDataChange({ info: "email", value: e.target.value });
     this.props.onUserDataChange({
       info: "validEmail",
@@ -42,6 +47,10 @@ class NotificationModal extends React.Component {
     });
   };
 
+  handleInput = (e, infoName) => {
+    this.props.onUserDataChange({ info: infoName, value: e.target.value });
+  };
+
   isChecked = optionName => Boolean(this.props.userdata[optionName]);
 
   optionChange = optionName => {
@@ -52,20 +61,62 @@ class NotificationModal extends React.Component {
     });
   };
 
-  handleSaveMarketAlert = () => {
+  successCallback = data => {
+    token = data.response.token.token;
     const {
       userdata: { email, last_date, olx_url }
     } = this.props;
+
     axios
       .post("/marketalerts", {
         email,
         last_date,
         olx_url
       })
-      .then(response => console.log(response.data))
+      .then(response =>
+        axios
+          .post("/payforalert", {
+            email,
+            token
+          })
+          .then(response => {
+            this.handleClose();
+            alert("Market Alert Created");
+          })
+          .catch(error => console.log(error))
+      )
       .catch(error => console.log(error));
   };
 
+  errorCallback = data => {
+    if (data.errorCode === 200) {
+      this.tokenRequest();
+    } else {
+      alert(data.errorMsg);
+    }
+  };
+
+  tokenRequest = () => {
+    const {
+      userdata: { ccNo, expYear, expMonth, cvv }
+    } = this.props;
+    const sellerId = "901402692";
+    const publishableKey = "93546B8D-B726-4376-A6DF-F698FD8893CA";
+    var args = {
+      sellerId,
+      publishableKey,
+      ccNo,
+      cvv,
+      expMonth,
+      expYear
+    };
+    window.TCO.requestToken(this.successCallback, this.errorCallback, args);
+  };
+
+  handleSaveMarketAlert = () => {
+    this.tokenRequest();
+  };
+
   render() {
     const {
       modal,
@@ -125,15 +176,66 @@ class NotificationModal extends React.Component {
             />
 
             {this.isChecked("emailChecked") ? (
-              <Input
-                className={classes.inputStyle}
-                placeholder="Email"
-                inputProps={{
-                  "aria-label": "Min"
-                }}
-                type="email"
-                onChange={this.handleInput}
-              />
+              <div>
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Email"
+                  inputProps={{
+                    "aria-label": "Email"
+                  }}
+                  type="email"
+                  onChange={this.handleEmail}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  type="hidden"
+                  value={token}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Card Number"
+                  inputProps={{
+                    "aria-label": "Card Number"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "ccNo")}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Expiration Year"
+                  inputProps={{
+                    "aria-label": "Expiration Year"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "expYear")}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="Expiration Month"
+                  inputProps={{
+                    "aria-label": "Expiration Month"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "expMonth")}
+                />
+                <Input
+                  className={classes.inputStyle}
+                  placeholder="CVV"
+                  inputProps={{
+                    "aria-label": "CVV"
+                  }}
+                  required
+                  autoComplete="off"
+                  type="number"
+                  onChange={e => this.handleInput(e, "cvv")}
+                />
+              </div>
             ) : null}
           </DialogContent>
           <DialogActions className={classes.modalFooter}>
diff --git a/frontend-react/src/components/filters/NekretnineFilter/AllFiltersDefined.js b/frontend-react/src/components/filters/NekretnineFilter/AllFiltersDefined.js
index fd9d619..34d9f52 100644
--- a/frontend-react/src/components/filters/NekretnineFilter/AllFiltersDefined.js
+++ b/frontend-react/src/components/filters/NekretnineFilter/AllFiltersDefined.js
@@ -1,3 +1,92 @@
+// Kanton/Regija
+export const lokacijaOptions = {
+  choices: [
+    { value: "9", label: "Sarajevo" },
+    { value: "2", label: "Posavski" }
+  ],
+  value: "kanton",
+  optionName: "kanton"
+};
+
+// Grad
+export const gradoviOptions = {
+  parentOptionName: "kanton",
+  checkboxOptions: {
+    "9": {
+      elements: [
+        {
+          type: "checkbox",
+          name: "Ilidza",
+          optionName: "grad-ilidza",
+          value: "3879"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Centar",
+          optionName: "grad-centar",
+          value: "3812"
+        },
+        {
+          type: "checkbox",
+          name: "Hadzici",
+          optionName: "grad-hadzici",
+          value: "3817"
+        },
+        {
+          type: "checkbox",
+          name: "Ilijas",
+          optionName: "grad-ilijas",
+          value: "3892"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Novi Grad",
+          optionName: "grad-novigrad",
+          value: "3969"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Novo Sarajevo",
+          optionName: "grad-novosarajevo",
+          value: "5896"
+        }
+      ]
+    }
+  }
+};
+
+// Cijena
+export const cijenaRangeOptions = {
+  min: 0,
+  max: 100000,
+  defaultValues: [0, 100000],
+  step: 100,
+  optionNames: ["od", "do"]
+};
+
+// Stanje
+export const stanjeElements = [
+  {
+    type: "radio",
+    value: 0,
+    name: "Sve",
+    optionName: "stanje"
+  },
+  {
+    type: "radio",
+    value: 1,
+    name: "Novo",
+    optionName: "stanje"
+  },
+  {
+    type: "radio",
+    value: 2,
+    name: "Koristeno",
+    optionName: "stanje"
+  }
+];
+
+// Vrsta Artikla
 export const vrstaElements = [
   {
     value: "",
@@ -25,23 +114,7 @@ export const vrstaElements = [
   }
 ];
 
-export const lokacijaOptions = {
-  choices: [
-    { value: "9", label: "Sarajevo" },
-    { value: "2", label: "Posavski" }
-  ],
-  value: "kanton",
-  optionName: "kanton"
-};
-
-export const cijenaRangeOptions = {
-  min: 0,
-  max: 100000,
-  defaultValues: [0, 100000],
-  step: 100,
-  optionNames: ["od", "do"]
-};
-
+// Kvadrata
 export const velicinaRangeOptions = {
   min: 0,
   max: 1000,
@@ -50,24 +123,112 @@ export const velicinaRangeOptions = {
   optionNames: ["kvadrata_min", "kvadrata_max"]
 };
 
-export const gradoviOptions = {
-  parentOptionName: "kanton",
-  checkboxOptions: {
-    "9": {
-      elements: [
-        {
-          type: "checkbox",
-          name: "Ilidza",
-          optionName: "grad-ilidza",
-          value: "3879"
-        },
-        {
-          type: "checkbox",
-          name: "Sarajevo-Centar",
-          optionName: "grad-centar",
-          value: "3812"
-        }
-      ]
-    }
+// Dodatno za kucu
+export const kucaElements = [
+  {
+    type: "checkbox",
+    name: "Uknjizeno",
+    optionName: "uknjizeno-zk_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Namjesteno",
+    optionName: "namjestena_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Nedavno adaptirano",
+    optionName: "nedavno-adaptirana_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Garaza",
+    optionName: "gara-a_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Balkon",
+    optionName: "balkon_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Voda",
+    optionName: "voda_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Plin",
+    optionName: "plin_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Bazen",
+    optionName: "bazen_checkbox",
+    value: "on"
   }
-};
+];
+
+// Dodatno za stan
+export const stanElements = [
+  {
+    type: "checkbox",
+    name: "Novogradnja",
+    optionName: "novogradnja_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Namjesten",
+    optionName: "namjesten_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Nedavno adaptiran",
+    optionName: "nedavno-adaptiran_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Uknjizeno",
+    optionName: "uknjizeno-zk_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Lift",
+    optionName: "lift_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Balkon",
+    optionName: "balkon_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Parking",
+    optionName: "parking_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "Plin",
+    optionName: "plin_checkbox",
+    value: "on"
+  },
+  {
+    type: "checkbox",
+    name: "kablovska",
+    optionName: "kablovska-tv_checkbox",
+    value: "on"
+  }
+];
diff --git a/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js b/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js
deleted file mode 100644
index 7e4afbb..0000000
--- a/frontend-react/src/components/filters/NekretnineFilter/KuceFilter/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "react";
-import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
-import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
-
-const elements = [
-  {
-    type: "checkbox",
-    name: "Uknjizeno",
-    optionName: "uknjizeno-zk_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Namjesteno",
-    optionName: "namjestena_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Nedavno adaptirano",
-    optionName: "nedavno-adaptirana_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Garaza",
-    optionName: "gara-a_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Balkon",
-    optionName: "balkon_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Voda",
-    optionName: "voda_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Plin",
-    optionName: "plin_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Bazen",
-    optionName: "bazen_checkbox",
-    value: "on"
-  }
-];
-class KuceFilter extends React.Component {
-  render() {
-    return (
-      <CollapseWrapperStyled componentName="Dodatno za kuce">
-        <CheckboxAndRadioWrapper
-          componentName="dodatno-za-kuce"
-          elements={elements}
-        />
-      </CollapseWrapperStyled>
-    );
-  }
-}
-export default KuceFilter;
diff --git a/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js b/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js
deleted file mode 100644
index fd50223..0000000
--- a/frontend-react/src/components/filters/NekretnineFilter/StanoviFilter/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
-import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
-
-const elements = [
-  {
-    type: "checkbox",
-    name: "Novogradnja",
-    optionName: "novogradnja_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Namjesten",
-    optionName: "namjesten_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Nedavno adaptiran",
-    optionName: "nedavno-adaptiran_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Uknjizeno",
-    optionName: "uknjizeno-zk_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Lift",
-    optionName: "lift_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Balkon",
-    optionName: "balkon_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Parking",
-    optionName: "parking_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "Plin",
-    optionName: "plin_checkbox",
-    value: "on"
-  },
-  {
-    type: "checkbox",
-    name: "kablovska",
-    optionName: "kablovska-tv_checkbox",
-    value: "on"
-  }
-];
-
-class StanoviFilter extends React.Component {
-  render() {
-    return (
-      <CollapseWrapperStyled componentName="Dodatno za stan">
-        <CheckboxAndRadioWrapper
-          componentName="dodatno-za-stan"
-          elements={elements}
-        />
-      </CollapseWrapperStyled>
-    );
-  }
-}
-export default StanoviFilter;
diff --git a/frontend-react/src/components/filters/NekretnineFilter/index.js b/frontend-react/src/components/filters/NekretnineFilter/index.js
index fb281e8..d130f98 100644
--- a/frontend-react/src/components/filters/NekretnineFilter/index.js
+++ b/frontend-react/src/components/filters/NekretnineFilter/index.js
@@ -2,51 +2,71 @@ import React from "react";
 import * as Filters from "./AllFiltersDefined";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
 import SelectDisplayCheckboxWrapper from "components/widgets/SelectDisplayCheckboxWrapper";
-import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
 import RangeWrapper from "components/widgets/RangeWrapper";
 import DropDownWrapper from "components/widgets/DropDownWrapper";
 
-class NekretnineFilter extends React.Component {
-  render() {
-    return (
-      <div>
-        {[
-          <CheckboxAndRadioWrapper
-            componentName="Vrsta"
-            elements={Filters.vrstaElements}
-          />,
+const Kanton = (
+  <DropDownWrapper componentName="Lokacija" {...Filters.lokacijaOptions} />
+);
 
-          <DropDownWrapper
-            componentName="Lokacija"
-            {...Filters.lokacijaOptions}
-          />,
+const Grad = (
+  <SelectDisplayCheckboxWrapper
+    componentName="Grad"
+    {...Filters.gradoviOptions}
+  />
+);
 
-          <SelectDisplayCheckboxWrapper
-            componentName="Grad"
-            {...Filters.gradoviOptions}
-          />,
+const Cijena = (
+  <RangeWrapper
+    componentName="Cijena"
+    {...Filters.cijenaRangeOptions}
+    optionName="cijena"
+  />
+);
 
-          <RangeWrapper
-            componentName="Cijena"
-            {...Filters.cijenaRangeOptions}
-            optionName="cijena"
-          />,
+const Stanje = (
+  <CheckboxAndRadioWrapper
+    componentName="Stanje"
+    elements={Filters.stanjeElements}
+  />
+);
 
-          <RangeWrapper
-            componentName="Velicina"
-            {...Filters.velicinaRangeOptions}
-            optionName="velicina"
-          />
-        ].map(comp => (
-          <CollapseWrapperStyled
-            key={comp.props.componentName}
-            componentName={comp.props.componentName}
-          >
-            {comp}
-          </CollapseWrapperStyled>
-        ))}
-      </div>
-    );
-  }
-}
-export default NekretnineFilter;
+const Vrsta = (
+  <CheckboxAndRadioWrapper
+    componentName="Vrsta"
+    elements={Filters.vrstaElements}
+  />
+);
+
+const Kvadratura = (
+  <RangeWrapper
+    componentName="Velicina"
+    {...Filters.velicinaRangeOptions}
+    optionName="velicina"
+  />
+);
+
+const DodatnoZaStan = (
+  <CheckboxAndRadioWrapper
+    componentName="dodatno-za-stan"
+    elements={Filters.stanElements}
+  />
+);
+
+const DodatnoZaKucu = (
+  <CheckboxAndRadioWrapper
+    componentName="dodatno-za-kucu"
+    elements={Filters.kucaElements}
+  />
+);
+
+export {
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Kvadratura,
+  DodatnoZaStan,
+  DodatnoZaKucu
+};
diff --git a/frontend-react/src/components/filters/VozilaFilter/AllFiltersDefined.js b/frontend-react/src/components/filters/VozilaFilter/AllFiltersDefined.js
index d9a0692..10be050 100644
--- a/frontend-react/src/components/filters/VozilaFilter/AllFiltersDefined.js
+++ b/frontend-react/src/components/filters/VozilaFilter/AllFiltersDefined.js
@@ -1,3 +1,68 @@
+// Proizvodac
+export const proizvodacOptions = {
+  choices: [{ value: "1900", label: "Audi" }, { value: "9000", label: "Ford" }],
+  value: "v_b",
+  optionName: "v_b"
+};
+
+// Kanton/Regija
+export const lokacijaOptions = {
+  choices: [
+    { value: "9", label: "Sarajevo" },
+    { value: "2", label: "Posavski" }
+  ],
+  value: "kanton",
+  optionName: "kanton"
+};
+
+// Grad
+export const gradoviOptions = {
+  parentOptionName: "kanton",
+  checkboxOptions: {
+    "9": {
+      elements: [
+        {
+          type: "checkbox",
+          name: "Ilidza",
+          optionName: "grad-ilidza",
+          value: "3879"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Centar",
+          optionName: "grad-centar",
+          value: "3812"
+        },
+        {
+          type: "checkbox",
+          name: "Hadzici",
+          optionName: "grad-hadzici",
+          value: "3817"
+        },
+        {
+          type: "checkbox",
+          name: "Ilijas",
+          optionName: "grad-ilijas",
+          value: "3892"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Novi Grad",
+          optionName: "grad-novigrad",
+          value: "3969"
+        },
+        {
+          type: "checkbox",
+          name: "Sarajevo-Novo Sarajevo",
+          optionName: "grad-novosarajevo",
+          value: "5896"
+        }
+      ]
+    }
+  }
+};
+
+// Cijena
 export const cijenaRangeOptions = {
   min: 0,
   max: 100000,
@@ -6,6 +71,63 @@ export const cijenaRangeOptions = {
   optionNames: ["od", "do"]
 };
 
+// Stanje
+export const stanjeElements = [
+  {
+    type: "radio",
+    value: "",
+    name: "Nova i polovna vozila",
+    optionName: "stanje"
+  },
+  {
+    type: "radio",
+    value: 1,
+    name: "Nova",
+    optionName: "stanje"
+  },
+  {
+    type: "radio",
+    value: 2,
+    name: "Polovna vozila",
+    optionName: "stanje"
+  },
+  {
+    type: "checkbox",
+    name: "Udarena vozila",
+    optionName: "udaren_checkbox",
+    value: "on"
+  }
+];
+
+// Vrsta Artikla
+export const vrstaElements = [
+  {
+    value: "",
+    name: "Sve",
+    type: "radio",
+    optionName: "vrsta"
+  },
+  {
+    value: "samoprodaja",
+    name: "Prodaja",
+    type: "radio",
+    optionName: "vrsta"
+  },
+  {
+    value: "samoizdavanje",
+    name: "Iznajmljivanje",
+    type: "radio",
+    optionName: "vrsta"
+  },
+  {
+    value: "samopotraznja",
+    name: "Potražnja",
+    type: "radio",
+    optionName: "vrsta"
+  }
+];
+
+// Godiste
 export const godisteRangeOptions = {
   min: 1960,
   max: new Date().getFullYear(),
@@ -14,6 +136,24 @@ export const godisteRangeOptions = {
   optionNames: ["godiste_min", "godiste_max"]
 };
 
+// Kilometraza
+export const kilometrazaOptions = {
+  kilometraMin: {
+    choices: [{ value: 5000, label: "5000" }, { value: 10000, label: "10000" }],
+    value: "kilometra-a_min",
+    optionName: "kilometra-a_min"
+  },
+  kilometraMax: {
+    choices: [
+      { value: 15000, label: "15000" },
+      { value: 200000, label: "200000" }
+    ],
+    value: "kilometra-a_max",
+    optionName: "kilometra-a_max"
+  }
+};
+
+// Gorivo
 export const gorivoElements = [
   {
     name: "Dizel",
@@ -46,59 +186,3 @@ export const gorivoElements = [
     value: "Elektro"
   }
 ];
-
-export const kilometrazaOptions = {
-  kilometraMin: {
-    choices: [{ value: 5000, label: "5000" }, { value: 10000, label: "10000" }],
-    value: "kilometra-a_min",
-    optionName: "kilometra-a_min"
-  },
-  kilometraMax: {
-    choices: [
-      { value: 15000, label: "15000" },
-      { value: 200000, label: "200000" }
-    ],
-    value: "kilometra-a_max",
-    optionName: "kilometra-a_max"
-  }
-};
-
-export const lokacijaOptions = {
-  choices: [
-    { value: "9", label: "Sarajevo" },
-    { value: "2", label: "Posavski" }
-  ],
-  value: "kanton",
-  optionName: "kanton"
-};
-export const proizvodacOptions = {
-  choices: [{ value: "1900", label: "Audi" }, { value: "9000", label: "Ford" }],
-  value: "v_b",
-  optionName: "v_b"
-};
-export const stanjeElements = [
-  {
-    type: "radio",
-    value: "",
-    name: "Nova i polovna vozila",
-    optionName: "stanje"
-  },
-  {
-    type: "radio",
-    value: 1,
-    name: "Nova",
-    optionName: "stanje"
-  },
-  {
-    type: "radio",
-    value: 2,
-    name: "Polovna vozila",
-    optionName: "stanje"
-  },
-  {
-    type: "checkbox",
-    name: "Udarena vozila",
-    optionName: "udaren_checkbox",
-    value: "on"
-  }
-];
diff --git a/frontend-react/src/components/filters/VozilaFilter/index.js b/frontend-react/src/components/filters/VozilaFilter/index.js
index 09925da..a8bcb61 100644
--- a/frontend-react/src/components/filters/VozilaFilter/index.js
+++ b/frontend-react/src/components/filters/VozilaFilter/index.js
@@ -1,57 +1,81 @@
 import React from "react";
 import * as Filters from "./AllFiltersDefined";
 import CheckboxAndRadioWrapper from "components/widgets/CheckboxAndRadioWrapper";
+import SelectDisplayCheckboxWrapper from "components/widgets/SelectDisplayCheckboxWrapper";
 import RangeWrapper from "components/widgets/RangeWrapper";
-import CollapseWrapperStyled from "components/widgets/CollapseWrapperStyled";
 import DropDownWrapper from "components/widgets/DropDownWrapper";
 
-class VozilaFilter extends React.Component {
-  render() {
-    return (
-      <div>
-        {[
-          <CheckboxAndRadioWrapper
-            componentName="Stanje"
-            elements={Filters.stanjeElements}
-          />,
-          <DropDownWrapper
-            componentName="Proizvodac"
-            {...Filters.proizvodacOptions}
-          />,
-          <RangeWrapper
-            componentName="Cijena"
-            {...Filters.cijenaRangeOptions}
-          />,
-          <DropDownWrapper
-            componentName="Lokacija"
-            {...Filters.lokacijaOptions}
-          />,
-          <RangeWrapper
-            componentName="Godiste"
-            {...Filters.godisteRangeOptions}
-          />,
-          <DropDownWrapper
-            componentName="Min kilometraza"
-            {...Filters.kilometrazaOptions.kilometraMin}
-          />,
-          <DropDownWrapper
-            componentName="Max kilometraza"
-            {...Filters.kilometrazaOptions.kilometraMax}
-          />,
-          <CheckboxAndRadioWrapper
-            componentName="Gorivo"
-            elements={Filters.gorivoElements}
-          />
-        ].map(comp => (
-          <CollapseWrapperStyled
-            key={comp.props.componentName}
-            componentName={comp.props.componentName}
-          >
-            {comp}
-          </CollapseWrapperStyled>
-        ))}
-      </div>
-    );
-  }
-}
-export default VozilaFilter;
+const Proizvodac = (
+  <DropDownWrapper componentName="Proizvodac" {...Filters.proizvodacOptions} />
+);
+
+const Kanton = (
+  <DropDownWrapper componentName="Lokacija" {...Filters.lokacijaOptions} />
+);
+
+const Grad = (
+  <SelectDisplayCheckboxWrapper
+    componentName="Grad"
+    {...Filters.gradoviOptions}
+  />
+);
+
+const Cijena = (
+  <RangeWrapper
+    componentName="Cijena"
+    {...Filters.cijenaRangeOptions}
+    optionName="cijena"
+  />
+);
+
+const Stanje = (
+  <CheckboxAndRadioWrapper
+    componentName="Stanje"
+    elements={Filters.stanjeElements}
+  />
+);
+
+const Vrsta = (
+  <CheckboxAndRadioWrapper
+    componentName="Vrsta"
+    elements={Filters.vrstaElements}
+  />
+);
+
+const Godiste = (
+  <RangeWrapper componentName="Godiste" {...Filters.godisteRangeOptions} />
+);
+
+const KilometraMin = (
+  <DropDownWrapper
+    componentName="Min kilometraza"
+    {...Filters.kilometrazaOptions.kilometraMin}
+  />
+);
+
+const KilometraMax = (
+  <DropDownWrapper
+    componentName="Max kilometraza"
+    {...Filters.kilometrazaOptions.kilometraMax}
+  />
+);
+
+const Gorivo = (
+  <CheckboxAndRadioWrapper
+    componentName="Gorivo"
+    elements={Filters.gorivoElements}
+  />
+);
+
+export {
+  Proizvodac,
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Godiste,
+  KilometraMin,
+  KilometraMax,
+  Gorivo
+};
diff --git a/frontend-react/src/components/subcategories/nekretnine/Kuce.js b/frontend-react/src/components/subcategories/nekretnine/Kuce.js
index 7c55ba2..d517524 100644
--- a/frontend-react/src/components/subcategories/nekretnine/Kuce.js
+++ b/frontend-react/src/components/subcategories/nekretnine/Kuce.js
@@ -1,14 +1,23 @@
-import React from "react";
-import NekretnineFilter from "components/filters/NekretnineFilter/index";
-import KuceFilter from "components/filters/NekretnineFilter/KuceFilter/index";
-class Kuce extends React.Component {
-  render() {
-    return (
-      <div>
-        <NekretnineFilter />
-        <KuceFilter />
-      </div>
-    );
-  }
-}
+import { WrapAll } from "components/widgets/CollapseWrapperAll";
+import {
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Kvadratura,
+  DodatnoZaKucu
+} from "components/filters/NekretnineFilter/index";
+
+const KuceFilters = [
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Kvadratura,
+  DodatnoZaKucu
+];
+const Kuce = () => WrapAll(KuceFilters);
+
 export default Kuce;
diff --git a/frontend-react/src/components/subcategories/nekretnine/Stanovi.js b/frontend-react/src/components/subcategories/nekretnine/Stanovi.js
index 2f1b946..9b904b8 100644
--- a/frontend-react/src/components/subcategories/nekretnine/Stanovi.js
+++ b/frontend-react/src/components/subcategories/nekretnine/Stanovi.js
@@ -1,15 +1,23 @@
-import React from "react";
-import NekretnineFilter from "components/filters/NekretnineFilter/index";
-import StanoviFilter from "components/filters/NekretnineFilter/StanoviFilter/index";
+import { WrapAll } from "components/widgets/CollapseWrapperAll";
+import {
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Kvadratura,
+  DodatnoZaStan
+} from "components/filters/NekretnineFilter/index";
+
+const StanFilters = [
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Kvadratura,
+  DodatnoZaStan
+];
+const Stanovi = () => WrapAll(StanFilters);
 
-class Stanovi extends React.Component {
-  render() {
-    return (
-      <div>
-        <NekretnineFilter />
-        <StanoviFilter />
-      </div>
-    );
-  }
-}
 export default Stanovi;
diff --git a/frontend-react/src/components/subcategories/vozila/Automobili.js b/frontend-react/src/components/subcategories/vozila/Automobili.js
index 419a211..4e067bb 100644
--- a/frontend-react/src/components/subcategories/vozila/Automobili.js
+++ b/frontend-react/src/components/subcategories/vozila/Automobili.js
@@ -1,13 +1,29 @@
-import React from "react";
-import VozilaFilter from "components/filters/VozilaFilter/index";
+import { WrapAll } from "components/widgets/CollapseWrapperAll";
+import {
+  Proizvodac,
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Godiste,
+  KilometraMin,
+  KilometraMax,
+  Gorivo
+} from "components/filters/VozilaFilter/index";
+
+const AutomobiliFilters = [
+  Proizvodac,
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Godiste,
+  KilometraMin,
+  KilometraMax,
+  Gorivo
+];
+const Automobili = () => WrapAll(AutomobiliFilters);
 
-class Automobili extends React.Component {
-  render() {
-    return (
-      <div>
-        <VozilaFilter />
-      </div>
-    );
-  }
-}
 export default Automobili;
diff --git a/frontend-react/src/components/subcategories/vozila/Motocikli.js b/frontend-react/src/components/subcategories/vozila/Motocikli.js
index 039fe20..d84ca48 100644
--- a/frontend-react/src/components/subcategories/vozila/Motocikli.js
+++ b/frontend-react/src/components/subcategories/vozila/Motocikli.js
@@ -1,13 +1,27 @@
-import React from "react";
-import VozilaFilter from "components/filters/VozilaFilter/index";
+import { WrapAll } from "components/widgets/CollapseWrapperAll";
+import {
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Godiste,
+  KilometraMin,
+  KilometraMax,
+  Gorivo
+} from "components/filters/VozilaFilter/index";
+
+const MotocikliFilters = [
+  Kanton,
+  Grad,
+  Cijena,
+  Stanje,
+  Vrsta,
+  Godiste,
+  KilometraMin,
+  KilometraMax,
+  Gorivo
+];
+const Motocikli = () => WrapAll(MotocikliFilters);
 
-class Motocikli extends React.Component {
-  render() {
-    return (
-      <div>
-        <VozilaFilter />
-      </div>
-    );
-  }
-}
 export default Motocikli;
diff --git a/frontend-react/src/components/widgets/CollapseWrapperAll.js b/frontend-react/src/components/widgets/CollapseWrapperAll.js
new file mode 100644
index 0000000..619b073
--- /dev/null
+++ b/frontend-react/src/components/widgets/CollapseWrapperAll.js
@@ -0,0 +1,13 @@
+import React from "react";
+import CollapseWrapperStyled from "./CollapseWrapperStyled";
+
+export const WrapAll = components => {
+  return components.map(comp => (
+    <CollapseWrapperStyled
+      key={comp.props.componentName}
+      componentName={comp.props.componentName}
+    >
+      {comp}
+    </CollapseWrapperStyled>
+  ));
+};
diff --git a/package-lock.json b/package-lock.json
index 895a28b..3074bc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,19 +2,207 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
-    "denque": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/denque/-/denque-1.3.0.tgz",
-      "integrity": "sha512-4SRaSj+PqmrS1soW5/Avd7eJIM2JJIqLLmwhRqIGleZM/8KwZq80njbSS2Iqas+6oARkSkLDHEk4mm78q3JlIg=="
-    },
-    "generate-function": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
-      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+    "@babel/runtime": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz",
+      "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==",
       "requires": {
-        "is-property": "^1.0.2"
+        "regenerator-runtime": "^0.12.0"
       }
     },
+    "@material-ui/core": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.0.tgz",
+      "integrity": "sha512-9fxu0B9zx/TfiU0OJmwRFk+I+2J7fcXzTfQl+ZPxqlVRrPDqTHnMZlqWRJjlHCe3AVXlgpJ6/a4QCvGEohEbIQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/system": "^3.0.0-alpha.0",
+        "@material-ui/utils": "^3.0.0-alpha.2",
+        "@types/jss": "^9.5.6",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "csstype": "^2.5.2",
+        "debounce": "^1.1.0",
+        "deepmerge": "^3.0.0",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^3.2.1",
+        "is-plain-object": "^2.0.4",
+        "jss": "^9.8.7",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "keycode": "^2.1.9",
+        "normalize-scroll-left": "^0.1.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^2.2.1",
+        "recompose": "0.28.0 - 0.30.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "@material-ui/system": {
+      "version": "3.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.1.tgz",
+      "integrity": "sha512-5EihYa6Ct5mA/shfFSjWO8e/whV+otbXAduYfiL34GH+Mh4vZs+wjcy0P80XA/cDIwSgkQ7vTvvY1x04AgIz4w==",
+      "requires": {
+        "@babel/runtime": "7.1.2",
+        "deepmerge": "^2.0.1",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
+          "integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        }
+      }
+    },
+    "@material-ui/utils": {
+      "version": "3.0.0-alpha.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
+      "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.6.3"
+      }
+    },
+    "@types/jss": {
+      "version": "9.5.7",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz",
+      "integrity": "sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==",
+      "requires": {
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
+    "@types/prop-types": {
+      "version": "15.5.8",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.8.tgz",
+      "integrity": "sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw=="
+    },
+    "@types/react": {
+      "version": "16.7.20",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.7.20.tgz",
+      "integrity": "sha512-Qd5RWkwl6SL7R2XzLk/cicjVQm1Mhc6HqXY5Ei4pWd1Vi8Fkbd5O0sA398x8fRSTPAuHdDYD9nrWmJMYTJI0vQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz",
+      "integrity": "sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "brcast": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+      "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+    },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
+    "core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+    },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
+    "csstype": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.1.tgz",
+      "integrity": "sha512-wv7IRqCGsL7WGKB8gPvrl+++HlFM9kxAM6jL1EXNPNTshEJYilMkbfS2SnuHha77uosp/YVK0wAp2jmlBzn1tg=="
+    },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
+    "deepmerge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.1.0.tgz",
+      "integrity": "sha512-/TnecbwXEdycfbsM2++O3eGiatEFHjjNciHEwJclM+T5Kd94qD1AP+2elP/Mq0L5b9VZJao5znR01Mz6eX8Seg=="
+    },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -23,79 +211,272 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "is-property": {
+    "indefinite-observable": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
+      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
     },
-    "long": {
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+    },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
+    "js-tokens": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
-    "lru-cache": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
-      "integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==",
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
       "requires": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "mysql2": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-1.6.4.tgz",
-      "integrity": "sha512-ZYbYgK06HKfxU45tYYLfwW5gKt8BslfE7FGyULNrf2K2fh+DuEX+e0QKsd2ObpZkMILefaVn8hsakVsTFqravQ==",
-      "requires": {
-        "denque": "1.3.0",
-        "generate-function": "^2.3.1",
-        "iconv-lite": "^0.4.24",
-        "long": "^4.0.0",
-        "lru-cache": "4.1.3",
-        "named-placeholders": "1.1.1",
-        "seq-queue": "0.0.5",
-        "sqlstring": "2.3.1"
-      }
-    },
-    "named-placeholders": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.1.tgz",
-      "integrity": "sha1-O3oNJiA910s6nfTJz7gnsvuQfmQ=",
-      "requires": {
-        "lru-cache": "2.5.0"
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
       },
       "dependencies": {
-        "lru-cache": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz",
-          "integrity": "sha1-2COIrpyWC+y+oMc7uet5tsbOmus="
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
         }
       }
     },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "popper.js": {
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
+      "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA=="
+    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-event-listener": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.5.tgz",
+      "integrity": "sha512-//lCxOM3DQ0+xmTa/u9mI9mm55zCPdIKp89d8MGjlNsOOnXQ5sFDD1eed+sMBzQXKiRBLBMtSg/2T9RJFtfovw==",
+      "requires": {
+        "@babel/runtime": "7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+          "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        }
+      }
+    },
+    "react-is": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
+      "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-transition-group": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",
+      "integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==",
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+      "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
     },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
-    "seq-queue": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
-      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
-    "sqlstring": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
-      "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
-    "yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
+    "warning": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+      "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
     }
   }
 }