From 73baacb13722aec95ea95f97ece4932e3b579736 Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Wed, 11 May 2022 13:27:11 +0200
Subject: [PATCH 1/2] Convert LinearDeterminate component to Typescript

---
 frontend/.eslintrc.json                       |  3 +-
 frontend/src/components/LinearDeterminate.js  | 26 --------------
 .../LinearDeterminate/LinearDeterminate.tsx   | 36 +++++++++++++++++++
 .../src/components/LinearDeterminate/index.ts |  1 +
 frontend/src/components/OrderPage.js          |  8 ++---
 5 files changed, 43 insertions(+), 31 deletions(-)
 delete mode 100644 frontend/src/components/LinearDeterminate.js
 create mode 100644 frontend/src/components/LinearDeterminate/LinearDeterminate.tsx
 create mode 100644 frontend/src/components/LinearDeterminate/index.ts

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index b48bf325..4c0590c1 100644
--- a/frontend/.eslintrc.json
+++ b/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": {
diff --git a/frontend/src/components/LinearDeterminate.js b/frontend/src/components/LinearDeterminate.js
deleted file mode 100644
index de631314..00000000
--- a/frontend/src/components/LinearDeterminate.js
+++ /dev/null
@@ -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>
-  );
-}
\ No newline at end of file
diff --git a/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx b/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx
new file mode 100644
index 00000000..b9adad9b
--- /dev/null
+++ b/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx
@@ -0,0 +1,36 @@
+import { 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;
diff --git a/frontend/src/components/LinearDeterminate/index.ts b/frontend/src/components/LinearDeterminate/index.ts
new file mode 100644
index 00000000..6c78d4aa
--- /dev/null
+++ b/frontend/src/components/LinearDeterminate/index.ts
@@ -0,0 +1 @@
+export { default } from "./LinearDeterminate";
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 10d9e0ec..35caf185 100644
--- a/frontend/src/components/OrderPage.js
+++ b/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 */}

From 523d89948212b41c5a48eaed07474ed54055b0c7 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 16 May 2022 01:34:03 -0700
Subject: [PATCH 2/2] Add import React on LinearDeterminate

---
 frontend/src/components/LinearDeterminate/LinearDeterminate.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx b/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx
index b9adad9b..57db47f8 100644
--- a/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx
+++ b/frontend/src/components/LinearDeterminate/LinearDeterminate.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Box, LinearProgress } from "@mui/material"
 import { calcTimeDelta } from 'react-countdown';