Skip to content
Snippets Groups Projects
Commit 5127d286 authored by M2947's avatar M2947 :sunglasses:
Browse files

created nav bar

parent c48b7d5b
No related branches found
No related tags found
1 merge request!1Jaber v01
Hide whitespace changes
Inline Side-by-side
Showing
with 312 additions and 98 deletions
.vscode/settings.json deleted 100644 → 0
+ 0
− 11
View file @ c48b7d5b
{
"spellright.language": [
"en",
"fi"
],
"spellright.documentTypes": [
"markdown",
"latex",
"plaintext"
]
}
\ No newline at end of file
Tavara- raskaan liikenne/frontend/traffic/package-lock.json
+ 96
− 0
View file @ 5127d286
......@@ -6360,6 +6360,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",
......@@ -6370,6 +6383,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"
}
},
"hosted-git-info": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
......@@ -8277,6 +8298,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.0",
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
"integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
"requires": {
"@babel/runtime": "^7.5.5",
"tiny-warning": "^1.0.3"
}
},
"mini-css-extract-plugin": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
......@@ -10843,6 +10873,52 @@
"warning": "^4.0.3"
}
},
"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": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
......@@ -11257,6 +11333,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
"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",
......@@ -12788,6 +12869,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",
......@@ -13170,6 +13261,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",
......
Tavara- raskaan liikenne/frontend/traffic/package.json
+ 1
− 0
View file @ 5127d286
......@@ -15,6 +15,7 @@
"react-bootstrap": "^1.0.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
......
Tavara- raskaan liikenne/frontend/traffic/src/App.css
+ 28
− 3
View file @ 5127d286
......@@ -13,8 +13,8 @@
grid-template-columns: 30% 600px ;
grid-auto-rows: 100px;
column-gap: 5px;
row-gap: 5px;
column-gap: 4px;
row-gap: 4px;
padding: 50px;
justify-content: center;
margin: auto;
......@@ -38,7 +38,7 @@
font-size: 2em;
font-weight: bold;
color: #cc3b31 ;
box-shadow: 5px 5px 10px #c4c4c4c0;
}
.grid-item-form {
grid-column-start: 1;
......@@ -51,6 +51,7 @@
text-align: left;
font-size: 18px;
color: rgba(15, 48, 75, 0.685) ;
box-shadow: 5px 5px 10px #c4c4c4c0;
}
......@@ -74,6 +75,7 @@ margin-top: 2.5em;
align-content: center;
font-size: 1em;
color: rgba(15, 48, 75, 0.685) ;
box-shadow: 5px 5px 10px #c4c4c4c0;
}
......@@ -91,6 +93,7 @@ margin-top: 2.5em;
align-content: center;
font-size: 1em;
color: rgba(15, 48, 75, 0.685) ;
box-shadow: 5px 5px 10px #c4c4c4c0;
}
.grid-item-graph2 {
......@@ -105,6 +108,7 @@ margin-top: 2.5em;
text-align: left;
font-size: 1em;
color: rgba(15, 48, 75, 0.685) ;
box-shadow: 5px 5px 10px #c4c4c4c0;
}
.grid-item-graph-child{
margin: auto;
......@@ -119,5 +123,26 @@ margin-top: 2.5em;
}
.navbarmenu{
background-color: #b3403a;
padding: 1em 2.5em;
}
.nav-brand{
font-weight: bolder;
font-size: 2em;
margin-right: 2em;
}
.link{
font-weight: bold;
font-size: 1.2em;
}
.nav-link {
color: wheat;
}
Tavara- raskaan liikenne/frontend/traffic/src/App.js
+ 33
− 10
View file @ 5127d286
import React from 'react';
import React from "react";
import Navbar from "react-bootstrap/Navbar"
import Nav from "react-bootstrap/Nav"
//import NavDropdown from "react-bootstrap/NavDropdown"
import { Route, BrowserRouter as Router } from "react-router-dom";
import OneDayGraph from './components/OneDayGraph_v2';
import MultipleDayGraph from "./components/MultipleDayGraph";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
//import Linechart from './components/Linechart';
//import CarsGraph from './components/CarsGraph';
//import TestRequest from './components/TestRequest';
//import OneDayGraph from './components/OneDayGraph_v2';
import MultipleDayGraph from './components/MultipleDayGraph';
//import LAMpoints from './components/LAMpoints'
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
//<Linechart /> <CarsGraph /> <TestRequest /> <LAMpoints /> <OneDayGraph />
//<Linechart /> <CarsGraph /> <TestRequest /> <LAMpoints /> <OneDayGraph /> <MultipleDayGraph />
function App() {
return (
<div className="App">
<MultipleDayGraph />
<Router>
<Navbar expand="lg" className="navbarmenu" variant="dark">
<Navbar.Brand className="nav-brand" href="/">Traffic Analysis</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" style={{color : '#ffe6e3'}} >
<Nav.Link className="link" href="/">Home</Nav.Link>
<Nav.Link className="link" href="/onedaygraph">One Day Analysis</Nav.Link>
<Nav.Link className="link" href="/multipledaygraph">Multiple Day Analysis</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Route exact path="/" component={OneDayGraph} />
<Route path="/onedaygraph" component={OneDayGraph} />
<Route path="/multipledaygraph" component={MultipleDayGraph} />
</Router>
</div>
);
......
Tavara- raskaan liikenne/frontend/traffic/src/components/MultipleDayGraph.js
+ 95
− 69
View file @ 5127d286
......@@ -5,6 +5,7 @@ import Table from "react-bootstrap/Table"
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import LAMpoints from "./LAMpoints";
import serverURL from "./Url"
var year = "";
var interval;
......@@ -26,6 +27,7 @@ export class MultipleDayGraph extends Component {
year: "",
month:"",
day:"",
endDay:"",
areaID: "",
lamID: "",
startDayNumber: "",
......@@ -58,86 +60,110 @@ export class MultipleDayGraph extends Component {
var startDayNumber_ = this.state.startDayNumber;
var endDayNumber_ = this.state.endDayNumber;
var escapedDays = 0;
interval = endDayNumber_ - startDayNumber_
var counter= 0;
//console.log({interval})
var url = `http://localhost:3030/api/vehicle/?year=${year_}&areaID=${areaID}&lamID=${lamID}&startDayNumber=${startDayNumber_}&endDayNumber=${endDayNumber_}`;//&vehicleClass=${vehicleClass}
var url = `${serverURL}/api/vehicle/?year=${year_}&areaID=${areaID}&lamID=${lamID}&startDayNumber=${startDayNumber_}&endDayNumber=${endDayNumber_}`;//&vehicleClass=${vehicleClass}
//var url = `http://localhost:3030/api/vehicle/?year=2019&areaID=01&lamID=101&startDayNumber=5&endDayNumber=30`;//&vehicleClass=${vehicleClass}
try {
// Step 1: start the fetch and obtain a reader
let response = await fetch(url);
const reader = response.body.getReader();
// Step 2: get total length
//const contentLength = +response.headers.get('Content-Length');
// Step 3: read the data
var resultList = [];
//let receivedLength = 0; // received that many bytes at the moment
//let chunks = []; // array of received binary chunks (comprises the body)
while(true) {
var response = await fetch(url);
const {done, value} = await reader.read();
if (done) {
break;
}
//chunks.push(value);
//receivedLength += value.length;
//console.log(`Received ${receivedLength} of ${contentLength}`)
let result_ = new TextDecoder("utf-8").decode(value);
let result = JSON.parse(result_)
resultList.push(resultList);
if(response.status === 200){
const reader = response.body.getReader();
console.log(result)
//getting the vehicle number in each our based on vehicle class from response of the request
var vehicle_number = result.vehicle_number;
//filling the missing values of vehicle number to zero
let final_Vehicle_number = this.fillMissingValues(vehicle_number);
let vehicleNumber = this.filterData(final_Vehicle_number);
// Step 2: get total length
//const contentLength = +response.headers.get('Content-Length');
// Step 3: read the data
var resultList = [];
//let receivedLength = 0; // received that many bytes at the moment
//let chunks = []; // array of received binary chunks (comprises the body)
while(true) {
//getting the cars average speed based on car category
var avg_speed = result.avg_speed_km_h;
//filling the missing values of average speed to zero
let final_avg_speed = this.fillMissingValues(avg_speed);
//filtering the data and making it as a nested object
let avgSpeed_ = this.filterData(final_avg_speed);
//using the calculateAvgSpeed function it will claculate the avarage speed for each vehicle class
let avgSpeed = this.calculateAvgSpeed(avgSpeed_)
let date = (Object.keys(avgSpeed))[0]
//saving all days in one object
VehicleNumberDataObjectForMultipleDay[date]= vehicleNumber[date]
AvgSpeedDataObjectForMultipleDay[date]= avgSpeed[date]
//using setDataForGraph function to set the filtered and sorted data as graph's data set
this.setDataForGraph(VehicleNumberDataObjectForMultipleDay,AvgSpeedDataObjectForMultipleDay);
counter++;
this.setState({counter})
//console.log({vehicleNumber,avgSpeed});
const {done, value} = await reader.read();
if (done) {
break;
}
//chunks.push(value);
//receivedLength += value.length;
//console.log(`Received ${receivedLength} of ${contentLength}`)
try {
let result_ = new TextDecoder("utf-8").decode(value);
var result = JSON.parse(result_)
resultList.push(resultList);
//console.log(result)
//getting the vehicle number in each our based on vehicle class from response of the request
var vehicle_number = result.vehicle_number;
//filling the missing values of vehicle number to zero
let final_Vehicle_number = this.fillMissingValues(vehicle_number);
let vehicleNumber = this.filterData(final_Vehicle_number);
//getting the cars average speed based on car category
var avg_speed = result.avg_speed_km_h;
//filling the missing values of average speed to zero
let final_avg_speed = this.fillMissingValues(avg_speed);
//filtering the data and making it as a nested object
let avgSpeed_ = this.filterData(final_avg_speed);
//using the calculateAvgSpeed function it will claculate the avarage speed for each vehicle class
let avgSpeed = this.calculateAvgSpeed(avgSpeed_)
let date = (Object.keys(avgSpeed))[0]
//saving all days in one object
VehicleNumberDataObjectForMultipleDay[date]= vehicleNumber[date]
AvgSpeedDataObjectForMultipleDay[date]= avgSpeed[date]
//using setDataForGraph function to set the filtered and sorted data as graph's data set
this.setDataForGraph(VehicleNumberDataObjectForMultipleDay,AvgSpeedDataObjectForMultipleDay);
counter++;
this.setState({counter })
//console.log({vehicleNumber,avgSpeed});
} catch (error) {
console.log("escaped one day!")
escapedDays++;
continue
}
}
console.log("all days; ",VehicleNumberDataObjectForMultipleDay)
this.setState({toggleDisabled: false,btnDisabled:false, toggleHide : false, message : `Faulty days: ${escapedDays}`});
}
console.log("all days; ",VehicleNumberDataObjectForMultipleDay)
this.setState({toggleDisabled: false,btnDisabled:false, toggleHide : false, message : ""});
else {
this.setState({btnDisabled:false, message :"" });
let errormsg="";
if(response.status === 404){
errormsg = "No data found for the selected date! Error code "+response.status;
}
else errormsg = "Oops something went wrong! Error code "+ response.status;
this.setState({error: errormsg})
//alert("Could not connect to server! no data found for selected date and location! code:",response.status)
}
}
catch(er){
this.setState({btnDisabled:false, message :"" });
console.log(er);
let errormsg="";
//errormsg = "No data found for the selected date! Error code ";
errormsg = "Oops something went wrong! Error code ";
if(response.status === 404){
errormsg = "No data found for the selected date! Error code "+response.status;
}
else errormsg = "Oops something went wrong! Error code "+ response.status;
this.setState({error: errormsg})
}
}
......@@ -367,7 +393,7 @@ export class MultipleDayGraph extends Component {
}
endDaynumberHandler = (e)=>{
console.log(e)
this.setState({endDayNumber:e})
this.setState({endDay:e})
}
vehicleClassHandler(e) {
......@@ -421,9 +447,9 @@ export class MultipleDayGraph extends Component {
let selectedYear = this.state.year;
let selectedMonth = this.state.month;
let selectedDay = this.state.day;
let selectedEndDay = this.state.endDayNumber;
let selectedEndDay = this.state.endDay;
let dayNumber = this.dateTodaynumber(selectedYear,selectedMonth,selectedDay);
let startDayNumber = this.dateTodaynumber(selectedYear,selectedMonth,selectedDay);
let endDayNumber = this.dateTodaynumber(selectedYear,selectedMonth,selectedEndDay)
var inputs = [
......@@ -432,7 +458,7 @@ export class MultipleDayGraph extends Component {
this.state.lamID,
this.state.month,
this.state.day,
this.state.endDayNumber,
this.state.endDay,
this.state.childReady
];
......@@ -451,7 +477,7 @@ export class MultipleDayGraph extends Component {
});
}
else if( dayNumber === endDayNumber | dayNumber > endDayNumber){
else if( startDayNumber === endDayNumber | startDayNumber > endDayNumber){
this.setState({error:
"End day can not be equal or smaller then the start day!",
});
......@@ -463,7 +489,7 @@ export class MultipleDayGraph extends Component {
message : "Please wait while the data is beeing processed!",
btnDisabled : true
})
this.setState({startDayNumber:dayNumber,endDayNumber},()=>{
this.setState({startDayNumber,endDayNumber},()=>{
this.getDataAsStream();
console.log("Sending request to server!")
});
......
Tavara- raskaan liikenne/frontend/traffic/src/components/NavBarMenu.js 0 → 100644
+ 49
− 0
View file @ 5127d286
import React, { Component } from "react";
import Navbar from "react-bootstrap/Navbar"
import Nav from "react-bootstrap/Nav"
import NavDropdown from "react-bootstrap/NavDropdown"
import Form from "react-bootstrap/Form"
import FormControl from "react-bootstrap/FormControl"
import Button from "react-bootstrap/Button"
class NavBarMenu extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<Navbar expand="lg" className="navbar" variant="dark">
<Navbar.Brand href="#home">Traffic Analysis</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/" >Home</Nav.Link>
<Nav.Link href="/onedaygraph">Road Traffic</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
export default NavBarMenu;
Tavara- raskaan liikenne/frontend/traffic/src/components/OneDayGraph_v2.js
+ 3
− 3
View file @ 5127d286
......@@ -7,6 +7,8 @@ import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import LAMpoints from "./LAMpoints";
import serverURL from "./Url"
var year = "";
......@@ -18,8 +20,6 @@ export class OneDayGraph extends Component {
constructor(props) {
super(props);
this.state = {
options: {},
series: [],
......@@ -59,7 +59,7 @@ export class OneDayGraph extends Component {
var startDayNumber_ = this.state.startDayNumber;
var endDayNumber_ = this.state.endDayNumber;
var url = `http://localhost:3030/api/vehicle/?year=${year_}&areaID=${areaID}&lamID=${lamID}&startDayNumber=${startDayNumber_}&endDayNumber=${endDayNumber_}`;//&vehicleClass=${vehicleClass}
var url = `${serverURL}/api/vehicle/?year=${year_}&areaID=${areaID}&lamID=${lamID}&startDayNumber=${startDayNumber_}&endDayNumber=${endDayNumber_}`;//&vehicleClass=${vehicleClass}
axios
.get(url)
.then((res) => {
......
Tavara- raskaan liikenne/frontend/traffic/src/components/Url.js 0 → 100644
+ 5
− 0
View file @ 5127d286
const serverURL = "http://localhost:3030";
export default serverURL;
\ No newline at end of file
Tavara- raskaan liikenne/frontend/traffic/src/index.js
+ 2
− 2
View file @ 5127d286
......@@ -5,9 +5,9 @@ import App from './App';
ReactDOM.render(
<React.StrictMode>
<React.Fragment>
<App />
</React.StrictMode>,
</React.Fragment>,
document.getElementById('root')
);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment