Mock re-scan, detail-view

2 files changed, 34 insertions, 13 deletions

diff --git a/src/components/ScanView.js b/src/components/ScanView.js
index 4efb209..d12874b 100644
--- a/src/components/ScanView.js
+++ b/src/components/ScanView.js
@@ -3,6 +3,7 @@ import React from "react";
 import Alert from "@mui/material/Alert";
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
+import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
 
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
@@ -15,10 +16,12 @@ class ScanView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            object: null
+            object: null,
+            rescanInProgress: false
         };
 
         this.getData = this.getData.bind(this);
+        this.rescan = this.rescan.bind(this);
     }
 
     componentDidMount() {
@@ -54,6 +57,19 @@ class ScanView extends React.Component {
             .catch(e => this.props.setError(e));
     }
 
+    // TODO: Trigger a real re-scan
+    rescan() {
+        this.setState({ rescanInProgress: true });
+        setTimeout(
+            () =>
+                this.setState(prevState => ({
+                    rescanInProgress: false,
+                    object: { ...prevState.object, timestamp_in_utc: Date.now() }
+                })),
+            2000
+        );
+    }
+
     render() {
         return this.state.object === null ? null : (
             <Card className="scan-detail" variant="outlined">
@@ -118,8 +134,23 @@ class ScanView extends React.Component {
                             "isoUtcDateTime"
                         )}
                     </div>
-                    <div>
-                        <Button variant="contained">Re-scan</Button>
+                    <div
+                        style={{
+                            width: "93px",
+                            height: "37px",
+                            display: "flex",
+                            flexDirection: "vertical",
+                            justifyContent: "center",
+                            alignItems: "center"
+                        }}
+                    >
+                        {this.state.rescanInProgress ? (
+                            <CircularProgress size="37px" />
+                        ) : (
+                            <Button variant="contained" onClick={this.rescan}>
+                                Re-scan
+                            </Button>
+                        )}
                     </div>
                 </h2>
 
diff --git a/src/index.js b/src/index.js
index 8eda015..977f360 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,16 +22,6 @@ let global = createTheme({
                     }
                 }
             ]
-        },
-        // Disable all animations
-        // https://mui.com/getting-started/faq/#how-can-i-disable-transitions-globally
-        MuiCssBaseline: {
-            styleOverrides: {
-                "*, *::before, *::after": {
-                    transition: "none !important",
-                    animation: "none !important"
-                }
-            }
         }
     }
 });