RoboSats/robosats
1
1
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-26 13:55:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

Convert LinearDeterminate component to Typescript

Browse Source
This commit is contained in:
Fernando Porazzi 2022-05-11 13:27:11 +02:00
parent ce0f5f8f74
commit 73baacb137
No known key found for this signature in database
GPG Key ID: 9A3B39858C514F12
5 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/.eslintrc.json
View File

@ -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": {

26
frontend/src/components/LinearDeterminate.js
View File

@ -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>
);
}

36
frontend/src/components/LinearDeterminate/LinearDeterminate.tsx Normal file
View File

@ -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;

1
frontend/src/components/LinearDeterminate/index.ts Normal file
View File

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

8
frontend/src/components/OrderPage.js
View File

@ -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 */}