Merge branch 'issue/7' into 'developer'

Issue #7: Add filters to api request

See merge request !5

package-lock.json

@@ -1077,6 +1077,87 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.28",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
+      "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2539,6 +2620,23 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
@@ -2617,6 +2715,11 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
       "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3302,6 +3405,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4058,6 +4166,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.12.0.tgz",
+      "integrity": "sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -4323,6 +4436,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -5572,6 +5694,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -6297,6 +6424,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "humanize-duration": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.22.0.tgz",
+      "integrity": "sha512-kq2Ncl1E8I7LJtjWhraQS8/LCsdt6fTQ+fwrGJ8dLSNFITW5YQpGWAgPgzjfIErAID7QHv0PA+HZBPfAf6f7IA=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8304,6 +8436,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "materialize-css": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0-rc.2.tgz",
+      "integrity": "sha512-FuQmSyq4Qv0ov7A2qXw0E6/jbQzSWx2P1pg2/XQDYTkkSc/GyiFAxu3fw9zgShwuTvyumEiw5jkxQWT9siqMBQ=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8334,6 +8471,11 @@
         "p-is-promise": "^2.0.0"
       }
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -8544,6 +8686,19 @@
         "minipass": "^3.0.0"
       }
     },
+    "mireco": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/mireco/-/mireco-0.0.20.tgz",
+      "integrity": "sha512-Y2U5ZxF3uUZGI58fXNhiszUlNWw/zi71DNKE7EMEktzRCSHIGRCOIqkEBJcLXNIpvHT1gO0Lox0M3h108E8BaA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "date-fns": "^2.3.0",
+        "humanize-duration": "^3.20.1",
+        "parse-duration": "^0.1.1",
+        "prop-types": "^15.7.2",
+        "react-textarea-autosize": "^7.1.0"
+      }
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -8604,6 +8759,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -9264,6 +9424,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-duration": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/parse-duration/-/parse-duration-0.1.3.tgz",
+      "integrity": "sha512-hMOZHfUmjxO5hMKn7Eft+ckP2M4nV4yzauLXiw3PndpkASnx5r8pDAMcOAiqxoemqWjMWmz4fOHQM6n6WwETXw=="
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -10842,11 +11007,44 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
       "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
     },
+    "react-input-autosize": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
+      "integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-materialize": {
+      "version": "3.8.10",
+      "resolved": "https://registry.npmjs.org/react-materialize/-/react-materialize-3.8.10.tgz",
+      "integrity": "sha512-d+vFSMdqkKVaa5cYXblRVTiq4yLajllqqiGPO1jWI/9bivk9GomZyUNSv0pkVHm73nc7JB3uXo/xdWk+qyPCwA==",
+      "requires": {
+        "classnames": "^2.2.6"
+      }
+    },
+    "react-month-picker": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/react-month-picker/-/react-month-picker-1.3.11.tgz",
+      "integrity": "sha512-re1h0DuiNaCwSqXWp3KYm7DBhOgFvIirLy8AnrZYOlpTsYlsgdhjvcMk+aNqYeQapZPPtMVeNrso813pipPVmQ==",
+      "requires": {
+        "react-tapper": "^0.1.16"
+      }
+    },
+    "react-object-list": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/react-object-list/-/react-object-list-0.2.9.tgz",
+      "integrity": "sha512-lMTz3GTxW8nGC/w/pwiFrk77j5muRb3kbVRpzGgGHrIRspzV7xxZPu9F8Lb9eqnGxrBCHJFyffpfXIwxP9L2xg==",
+      "requires": {
+        "date-fns": "^2.4.1",
+        "mireco": "^0.0.20"
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -10907,6 +11105,46 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-select": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz",
+      "integrity": "sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^2.2.2",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "react-tapper": {
+      "version": "0.1.20",
+      "resolved": "https://registry.npmjs.org/react-tapper/-/react-tapper-0.1.20.tgz",
+      "integrity": "sha512-jKfB/YMaOzrRkJ+yU99NHohFiEdz0XnVFRStVPzhc/tMq2XvwNmGE3gn4+83gZEvr6uhsI9PN4mc2st5msuPCQ=="
+    },
+    "react-textarea-autosize": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz",
+      "integrity": "sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+      "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",

package.json

@@ -7,9 +7,17 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
+    "classnames": "^2.2.6",
+    "materialize-css": "^1.0.0-rc.2",
+    "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-materialize": "^3.8.10",
+    "react-month-picker": "^1.3.11",
+    "react-object-list": "^0.2.9",
+    "react-scripts": "3.4.1",
+    "react-select": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -24,6 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
+
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>	
+
     <title>React App</title>
   </head>
   <body>
@@ -39,5 +48,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <!--JavaScript at end of body for optimized loading-->
+      <script type="text/javascript" src="js/materialize.min.js"></script>
   </body>
 </html>

src/App.css

-.App {
-  text-align: center;
+ul.dropdown-content.select-dropdown li span {
+  color: #005eed;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.input-field input[type=text]:focus + label, .materialize-textarea:focus:not([readonly]) + label {
+  color: #005eed !important;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.input-field input[type=text]:focus, .materialize-textarea:focus:not([readonly]) {
+  border-bottom: 1px solid #005eed !important;
+  box-shadow: 0 1px 0 0 #005eed !important;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+input[type="checkbox"]:checked + span:not(.lever)::before{
+  border:2px solid transparent;
+  border-bottom:2px solid #006AB5;
+  border-right:2px solid #006AB5;
+  background:transparent;
 }

src/App.js

 import React, { Component } from 'react';
-import './App.css';
+import { Select, Button, Checkbox, Row, Col, Card } from 'react-materialize'
+import './App.css'
 import axios from 'axios';
 
-const serverURL = '/api/opendata/data/json?metrics=Quantidade de máquinas&dimensions=Memória&filters=';
+import ObjectList from 'react-object-list'
+import {TextContainsFilter} from 'react-object-list/filters'
+
+// Information about the cpus release dates.
+const cpus = require('./data/cpu.json');
+
+const serverURL = '/api/opendata/data/json?metrics=Quantidade de máquinas&dimensions=Memória,Processador';
+const regions = ['','SUDESTE','NORDESTE','NORTE','SUL','CENTRO-OESTE']
 
 class App extends Component {
   constructor(props) {
@@ -11,26 +19,258 @@ class App extends Component {
     this.onSubmit = this.onSubmit.bind(this);
 
     this.state = {
-      data: ''
+      dataFromRequest: [],
+      data: [],
+      sortKeys: [],
+      currentPage: 1,
+      perPage: 10,
+      totalCount:0,
+      region: '',
+      telecentros: true,
+      gesac: true,
+      cidadesdigitais: true,
+      filters: [
+	{
+      	  Renderer: TextContainsFilter,
+	  filterKey: 'ano',
+	  active: false,
+	  name: 'Ano',
+      	  props: {
+      	    updateDelay: 0,
+      	  },
+      	},
+      	{
+      	  Renderer: TextContainsFilter,
+	  filterKey: 'proc',
+      	  active: false,
+      	  name: 'Processador',
+      	  props: {
+      	    updateDelay: 0,
+      	  },
+      	},
+      ],
     };
   }
 
   onSubmit(e) {
     e.preventDefault();
-    axios.get(`${serverURL}`)
+    axios.get(`${this.constructUrl()}`)
       .then(res =>{
-	console.log(res.data)
+	this.setState({ dataFromRequest: this.organizeData(res.data) });
       }).catch((error) => {
 	console.log(error)
       });
   }
 
+  organizeData(data) {
+    var tmp = [].concat(data)
+    .sort((a,b) => parseInt(a['Quantidade de máquinas']) < parseInt(b['Quantidade de máquinas']))
+    .map( (machine, i) => {
+      const qm = parseInt(machine['Quantidade de máquinas'])
+      const mem = machine['Memória']
+      const proc = machine['Processador']
+      const ano = this.getReleaseDate(proc);
+      return (
+	{
+	  qm: qm,
+	  mem: mem,
+	  proc: proc,
+	  ano: ano
+	}
+      )
+    });
+    return tmp;
+  }
+
+  constructUrl() {
+    let url = serverURL + '&filters=';
+    if (this.state.region !== '') {
+      url = url + 'Região==' + this.state.region + ';';
+    }
+    if (!this.state.telecentros) {
+      url = url + 'Telecentro==false;';
+    }
+    if (!this.state.gesac) {
+      url = url + 'Conexão GESAC==false;';
+    }
+    if (!this.state.cidadesdigitais) {
+      url = url + 'Cidade digital==false;';
+    }
+    return url;
+  }
+
+  getReleaseDate(processor) {
+    for (let i=0; i<cpus.length; i++) {
+      if (cpus[i].Processador === processor) {
+	return cpus[i].Ano;
+      }
+    }
+    return null;
+  }
+
+  renderResponse() {
+    const { currentPage, perPage, totalCount, sortKeys, data } = this.state;
+    return(
+      <ObjectList
+	columns={[
+	  {dataKey: 'qm', header:'Quantidade de Máquinas', sortKey:'qm'},
+	  {dataKey: 'mem', header:'Memória', sortKey:'mem'},
+	  {dataKey: 'proc', header:'Processador', sortKey:'proc'},
+	  {dataKey: 'ano', header:'Ano Estimado', sortKey:'ano'}
+	]}
+	data={data}
+	favouritesEnabled={false}
+	updateSorting={this.updateSorting}
+	updatePage={this.updatePage}
+	maxPages={0}
+	meta={{
+	  currentPage,perPage,totalCount,sortKeys
+	}}
+	addFilter={this.addFilter}
+	filters={this.state.filters}
+	removeFilter={this.removeFilter}
+	updateFilter={this.updateFilter}
+      />
+    )
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.filters !== this.state.filters) {
+      this.updateData(1)
+    }
+    if (prevState.dataFromRequest !== this.state.dataFromRequest) {
+      this.updateData(1)
+    }
+  }
+
+  updatePage = currentPage => this.updateData(currentPage)
+  updateSorting = sortKey => this.setState(prevState => {
+    let sortKeys = [...prevState.sortKeys]
+    const currentSort = sortKeys.find(sort => sort.sortKey === sortKey)
+    let value = true
+    if (currentSort !== undefined && currentSort.value === true) {
+      value = false
+    }
+    sortKeys = [{sortKey: sortKey, value}].concat(sortKeys.filter((k) => k.sortKey !== sortKey))
+
+    const offset = (prevState.currentPage - 1) * prevState.perPage
+    return {
+      sortKeys,
+      data: this.state.dataFromRequest.sort((a, b) => {
+        for (let i = 0; i < sortKeys.length; i++) {
+          const order = sortKeys[i].value ? 1 : -1
+          if (a[sortKeys[i].sortKey] > b[sortKeys[i].sortKey]) return -1 * order
+          if (a[sortKeys[i].sortKey] < b[sortKeys[i].sortKey]) return 1 * order
+        }
+        return 0
+      }).slice(offset, offset + prevState.perPage),
+    }
+  })
+  updateData = (currentPage) => {
+    let data = this.state.dataFromRequest
+    const activeFilters = this.state.filters.filter(filter => filter.active)
+    if (activeFilters.length > 0) { // filter data
+      data = data.filter(row => {
+        for (let i = 0; i < activeFilters.length; i++) {
+          const regex = RegExp(activeFilters[i].value, 'i')
+          const result = regex.test(row[activeFilters[i].filterKey])
+          return result === (activeFilters[i].comparison === 'contains')
+        }
+        return false
+      })
+    }
+    // paginate data
+    const offset = (currentPage - 1) * this.state.perPage
+    this.setState(prevState => ({
+      totalCount: data.length,
+      data: data.slice(offset, offset + prevState.perPage),
+      currentPage,
+    }))
+  }
+  addFilter = newFilter => this.setState(prevState => {
+    const filters = prevState.filters.map(filter => {
+      if (filter.filterKey === newFilter.filterKey) {
+        return {...filter, active: true}
+      } else {
+        return {...filter}
+      }
+    })
+    return {filters}
+  })
+  removeFilter = filterKey => this.setState(prevState => {
+    const filters = prevState.filters.map(filter => {
+      if (filter.filterKey === filterKey) {
+        return {...filter, active: false, value: ''}
+      } else {
+        return {...filter}
+      }
+    })
+    return {filters}
+  })
+  updateFilter = ({filter: filterKey, comparison, value}) => this.setState(prevState => {
+    const filters = prevState.filters.map(filter => {
+      if (filter.filterKey === filterKey) {
+        return {...filter, value, comparison}
+      } else {
+        return {...filter}
+      }
+    })
+    return {filters}
+  })
+
   render() {
     return (
       <div className="App">
-	<form onSubmit={this.onSubmit}>
-	  <input type="submit" value="Pesquisar"/>
-	</form>
+	<Card>
+	  <Row>
+	    <Col>
+	      <Select className='blue-text' label='Região:' value={this.state.region} 
+	        onChange={e => this.setState({region: e.target.value})}>
+	        {regions.map( region =>
+	          <option key={region} value={region}>{region}</option>
+	        )}
+	      </Select>
+	    </Col>
+	    <Col>
+	      <Checkbox
+	        id='telecentros'
+	        label='Telecentros'
+	        value={this.state.telecentros}
+	        checked={this.state.telecentros}
+	        onChange={e => this.setState({telecentros: !this.state.telecentros})}
+	      />
+	    </Col>
+	    <Col>
+	      <Checkbox
+	        id='gesac'
+	        label='Gesac'
+	        value={this.state.gesac}
+	        checked={this.state.gesac}
+	        onChange={e => this.setState({gesac: !this.state.gesac})}
+	      />
+	    </Col>
+	    <Col>
+	      <Checkbox
+	        id='cidades_digitais'
+	        label='Cidades Digitais'
+	        value={this.state.cidadesdigitais}
+	        checked={this.state.cidadesdigitais}
+	        onChange={e => this.setState({cidadesdigitais: !this.state.cidadesdigitais})}
+	      />
+	    </Col>
+	    <Col>
+	      <Button onClick={this.onSubmit} className='blue darken-1'>
+	        Gerar Relatório
+	      </Button>
+	    </Col>
+	  </Row>
+	</Card>
+	<Row>
+	  <Col s={12}>
+	    <Card>
+	      {this.renderResponse()}
+	    </Card>
+	  </Col>
+	</Row>
       </div>
     );
   }