added loading component for prices close #22

frontend/src/components/resourcechart/resourcechart.js

@@ -5,25 +5,25 @@ import {
 import {
     useParams
 } from "react-router-dom";
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
 
-export default function ResourceChart(props) {
+const useStyles = makeStyles((theme) => ({
-
+    root: {
-    const [data, setData] = React.useState(null);
+        display: 'flex',
-    let { id } = useParams();
+    },
-    const loadData = async () => {
+}));
-        let nextData = await fetch(`/simcompanies/API/day?date=${props["day"]}&kind=${id}`);
-        nextData = await nextData.json();
-        for (let i = 0; i < nextData.length; i++) {
-            nextData[i]["time"] = new Date(nextData[i]["time"]);
-            nextData[i]["time"] = nextData[i]["time"].toLocaleTimeString();
-        }
-        setData(nextData)
-    }
 
+const output = (data) => {
     if (data === null) {
-        loadData();
+        return (
-    }
+            <CircularProgress color="secondary" />
-
+        )
+    } else {
         return (
             <LineChart
                 width={900}
@@ -40,5 +40,49 @@ export default function ResourceChart(props) {
                 <Legend />
                 <Line type="monotone" dataKey="price" stroke="#8884d8" dot={false} />
             </LineChart>
+        )
+    }
+}
+
+export default function ResourceChart(props) {
+    const classes = useStyles();
+    const [data, setData] = React.useState(null);
+    let { id } = useParams();
+    const loadData = async () => {
+        let nextData = await fetch(`/simcompanies/API/day?date=${props["day"]}&kind=${id}`);
+        nextData = await nextData.json();
+        for (let i = 0; i < nextData.length; i++) {
+            nextData[i]["time"] = new Date(nextData[i]["time"]);
+            nextData[i]["time"] = nextData[i]["time"].toLocaleTimeString();
+        }
+        setData(nextData)
+    }
+
+    if (data === null) {
+        loadData();
+    }
+
+
+
+    return (
+        <div className={classes.root}>
+            <Grid container spacing={2}>
+                <Grid item xs={12}>
+                    <Typography variant="h4">
+                        Resource Chart
+                    </Typography>
+                </Grid>
+                <Grid item xs={12}>
+                    <Card>
+                        <CardContent>
+                            {output(data)}
+                        </CardContent>
+                    </Card>
+                </Grid>
+            </Grid>
+
+        </div>
+
+
     );
 }

frontend/src/components/selectResource/index.js

@@ -1,14 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
-import { Link } from 'react-router-dom';
-import Link1 from '@material-ui/core/Link';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import CardMedia from '@material-ui/core/CardMedia';
 import ResourceCard from './resourceCard';