Merge branch 'linear-determinate-to-ts' into main (#132)

frontend/.eslintrc.json

@@ -15,7 +15,8 @@
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
   },
   "settings": {
     "react": {

frontend/src/components/LinearDeterminate.js

@@ -1,26 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Box, LinearProgress } from "@mui/material"
-import { calcTimeDelta } from 'react-countdown';
-
-export default function LinearDeterminate(props) {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((oldProgress) => {
-        var left = calcTimeDelta( new Date(props.expires_at)).total /1000;
-        return (left / props.total_secs_exp) * 100;
-      });
-    }, 1000);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <LinearProgress variant="determinate" value={progress} />
-    </Box>
-  );
-}

frontend/src/components/LinearDeterminate/LinearDeterminate.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from "react";
+import { Box, LinearProgress } from "@mui/material"
+import { calcTimeDelta } from 'react-countdown';
+
+type Props = {
+  expiresAt: string;
+  totalSecsExp: number;
+};
+
+const LinearDeterminate = ({
+  expiresAt,
+  totalSecsExp,
+}: Props): JSX.Element => {
+  const [progress, setProgress] = useState<number>(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const left = calcTimeDelta(new Date(expiresAt)).total / 1000;
+      const newProgress = (left / totalSecsExp) * 100;
+
+      setProgress(newProgress);
+    }, 1000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [expiresAt, totalSecsExp]);
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgress variant="determinate" value={progress} />
+    </Box>
+  );
+};
+
+export default LinearDeterminate;

frontend/src/components/LinearDeterminate/index.ts

@@ -0,0 +1 @@
+export { default } from "./LinearDeterminate";

frontend/src/components/OrderPage.js

@@ -362,9 +362,9 @@ class OrderPage extends Component {
         onClickCopy={()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
         copyIconColor={this.props.copiedToken ? "inherit" : "primary"}
         onClickBack={() => this.setState({openStoreToken:false})}
-        onClickDone={() => this.setState({openStoreToken:false}) & 
-            (this.state.maker_status=='Inactive' ? 
-            this.handleClickOpenInactiveMakerDialog() 
+        onClickDone={() => this.setState({openStoreToken:false}) &
+            (this.state.maker_status=='Inactive' ?
+            this.handleClickOpenInactiveMakerDialog()
             : this.takeOrder())
           }/>
       :
@@ -614,7 +614,7 @@ class OrderPage extends Component {
                 <Countdown date={new Date(this.state.expires_at)} renderer={this.countdownRenderer} />
               </ListItemText>
             </ListItem>
-              <LinearDeterminate key={this.state.expires_at} total_secs_exp={this.state.total_secs_exp} expires_at={this.state.expires_at}/>
+              <LinearDeterminate totalSecsExp={this.state.total_secs_exp} expiresAt={this.state.expires_at}/>
             </List>
 
             {/* If the user has a penalty/limit */}