diff --git a/package-lock.json b/package-lock.json index f552d86..b6de06a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6109,6 +6109,11 @@ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" }, + "eventlistener": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/eventlistener/-/eventlistener-0.0.1.tgz", + "integrity": "sha1-7Suqu4UiJ68rz4iRUscsY8pTLrg=" + }, "events": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz", @@ -7172,6 +7177,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7182,6 +7200,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -9919,6 +9945,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -9946,6 +9977,11 @@ "lodash._reinterpolate": "^3.0.0" } }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -10181,6 +10217,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -12729,11 +12774,68 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lazy-load": { + "version": "3.1.13", + "resolved": "https://registry.npmjs.org/react-lazy-load/-/react-lazy-load-3.1.13.tgz", + "integrity": "sha512-eAVNUn3vhNj79Iv04NOCwy/sCLyqDEhL3j9aJKV7VJuRBDg6rCiB+BIWHuG7VXJGCgb//6nX/soR8PTyWRhFvQ==", + "requires": { + "eventlistener": "0.0.1", + "lodash.debounce": "^4.0.0", + "lodash.throttle": "^4.0.0", + "prop-types": "^15.5.8" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.0.tgz", @@ -13209,6 +13311,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -14951,6 +15058,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -15439,6 +15556,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -16979,6 +17101,24 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" } } + }, + "zingchart": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/zingchart/-/zingchart-2.9.1.tgz", + "integrity": "sha512-LYCiqkzdDn5OxPqShfvUNcTtXxVgZDVqEztGINBb0EA9a1b1TOrLbW/BdJPpeobBahXSxvHYLO6NV/Dbw309Vw==" + }, + "zingchart-constants": { + "version": "github:zingchart/zingchart-constants#2cb0b3a55bbae8ee6fb943161fdd5b71618bc95f", + "from": "github:zingchart/zingchart-constants#master" + }, + "zingchart-react": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/zingchart-react/-/zingchart-react-3.1.0.tgz", + "integrity": "sha512-emVB4wEmyR9TlZV1LzksSZ+NwG6voroDqJaMTbOpLF5JDSw/nppf4HWn4rLgQYsdb6uizEp2Pacqj+IXhFZtKg==", + "requires": { + "zingchart": "^2.9.1", + "zingchart-constants": "github:zingchart/zingchart-constants#master" + } } } } diff --git a/package.json b/package.json index ef05c89..cea239f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "axios-react": "^2.0.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-lazy-load": "^3.1.13", + "react-router-dom": "^5.2.0", "react-scripts": "4.0.0", "web-vitals": "^0.2.4" }, diff --git a/src/components/App.css b/src/components/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/components/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@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; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/components/App.js b/src/components/App.js index ce7902e..6923ed9 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,55 +1,33 @@ import React, { Component } from 'react'; -import './App.css'; -import Migrations from './Migrations/Migrations'; -import SideMigrations from './Migrations/SideMigrations'; +import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; + + +// Routes +import Upcoming from './root/Upcoming'; +import Reports from './root/Reports'; +import Historical from './root/Historical'; + +// Components +import Home from './root/Home' +import Navigation from './root/Navigation'; class App extends Component { - constructor(props) { - super(props); - this.state = { - migs1: { - type: 'top-headlines', - query: 'migration_status' - }, - migs2: { - type: 'top-headlines', - query: 'country=us&category=business' - }, - migs3: { - type: 'top-headlines', - query: 'sources=bbc-news' - } - }; - } render() { return ( -
-
-
-
-
- - -
-
- -
-
- -
+ ); } } diff --git a/src/components/Migrations/Error.js b/src/components/Migrations/Error.js index 9719c74..86f6f33 100644 --- a/src/components/Migrations/Error.js +++ b/src/components/Migrations/Error.js @@ -4,10 +4,10 @@ const Error = () => (
-
-
+
+
- do_not_disturb + do_not_disturb
diff --git a/src/components/Migrations/MigrationSingle.js b/src/components/Migrations/MigrationSingle.js index b5ddc2c..8c6803e 100644 --- a/src/components/Migrations/MigrationSingle.js +++ b/src/components/Migrations/MigrationSingle.js @@ -1,21 +1,22 @@ -import React from 'react'; +import React from "react"; const MigrationSingle = ({ item }) => ( - -
-
-
- - -
-
+
+
+
+ +
- +
); export default MigrationSingle; diff --git a/src/components/Migrations/Migrations.js b/src/components/Migrations/Migrations.js index e823fdd..1e499cb 100644 --- a/src/components/Migrations/Migrations.js +++ b/src/components/Migrations/Migrations.js @@ -1,58 +1,98 @@ -import React, { Component } from 'react'; -import axios from 'axios'; -import MigrationSingle from './MigrationSingle'; -import Error from './Error'; +import React, { Component } from "react"; +import axios from "axios"; + +import MigrationSingle from "./MigrationSingle"; +import Error from "./Error"; class Migrations extends Component { - constructor(props) { - super(props); - this.state = { - migs: [], - error: false, - }; + constructor(props) { + super(props); + this.state = { + migs: [], + migs1: [], + error: false, + }; + } + + componentDidMount() { + const url = `https://devapi.benjamyn.love/migrations/`; + + axios + .get(url) + .then((response) => { + this.setState({ + migs: response.data, + migs1: response.data.migration_status, + }); + }) + + .catch((error) => { + this.setState({ + error: true, + }); + }); + } + + renderItems() { + if (!this.state.error) { + return this.state.migs.map((item) => ( + + )); + } else { + return ; } + } - componentDidMount() { - const url = `https://devapi.benjamyn.love/migrations/`; + bookedMig() { + return this.state.migs.filter( + (booked) => booked.migration_status === "Booked" + ).length; + } + waitingMig() { + return this.state.migs.filter( + (waiting) => waiting.migration_status === "Waiting Termination" + ).length; + } + completedMig() { + return this.state.migs.filter( + (complete) => complete.migration_status === "Completed" + ).length; + } - axios.get(url) - .then((response) => { - this.setState({ - migs: response.data - }); - - }) - - .catch((error) => { - this.setState({ - error: true - }) - }) - - } - - - renderItems() { - if (!this.state.error) { - return this.state.migs.map((item) => ( - - )); - } else { - return - } - } - - render() { - return ( -
- {this.state.migs.filter(mig => mig.migration_status = ('Booked')).map(filteredMig => ( -
- {filteredMig.migration_status} -
- ))}; + render() { + return ( +
+
+
+
+ Booked Migrations + {this.bookedMig()} +
+
View all...
- ); - } +
+
+
+
+ Waiting Termination + {this.waitingMig()} +
+
View all...
+
+
+ +
+
+
+ Completed + {this.completedMig()} +
+
View all...
+
+
+
+ ); + } } export default Migrations; diff --git a/src/components/Migrations/Stats.js b/src/components/Migrations/Stats.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/root/Historical.js b/src/components/root/Historical.js new file mode 100644 index 0000000..4b7e01d --- /dev/null +++ b/src/components/root/Historical.js @@ -0,0 +1,9 @@ +import React from 'react' + +const Historical = () => { + return ( +

Historical

+ ); +} + +export default Historical; diff --git a/src/components/root/Home.js b/src/components/root/Home.js new file mode 100644 index 0000000..f8c750c --- /dev/null +++ b/src/components/root/Home.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react'; + +import Migrations from '../Migrations/Migrations'; +import SideMigrations from '../Migrations/SideMigrations'; + +export class Home extends Component { + + constructor(props) { + super(props); + this.state = { + migs1: { + type: 'top-headlines', + query: 'migration_status' + }, + migs2: { + type: 'top-headlines', + query: 'country=us&category=business' + }, + migs3: { + type: 'top-headlines', + query: 'sources=bbc-news' + } + }; + } + + render() { + return ( +
+
+ + +
+
+ +
+
+ ) + } +} + +export default Home diff --git a/src/components/root/Navigation.js b/src/components/root/Navigation.js new file mode 100644 index 0000000..6d2cbca --- /dev/null +++ b/src/components/root/Navigation.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; + +export class Navigation extends Component { + render() { + return ( + + ) + } +} + +export default Navigation diff --git a/src/components/root/Reports.js b/src/components/root/Reports.js new file mode 100644 index 0000000..716c7a1 --- /dev/null +++ b/src/components/root/Reports.js @@ -0,0 +1,9 @@ +import React from 'react' + +const Reports = () => { + return ( +

Reports

+ ); +} + +export default Reports; diff --git a/src/components/root/Upcoming.js b/src/components/root/Upcoming.js new file mode 100644 index 0000000..70b898a --- /dev/null +++ b/src/components/root/Upcoming.js @@ -0,0 +1,9 @@ +import React from 'react' + +const Upcoming = () => { + return ( +

Upcoming

+ ); +} + +export default Upcoming;