49 lines
998 B
JavaScript
49 lines
998 B
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
timerBox: {
|
|
display: "flex",
|
|
marginLeft: 10,
|
|
marginRight: 10,
|
|
alignItems: "center",
|
|
},
|
|
}));
|
|
|
|
const RecordingTimer = () => {
|
|
const classes = useStyles();
|
|
const initialState = {
|
|
minutes: 0,
|
|
seconds: 0,
|
|
};
|
|
const [timer, setTimer] = useState(initialState);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(
|
|
() =>
|
|
setTimer(prevState => {
|
|
if (prevState.seconds === 59) {
|
|
return { ...prevState, minutes: prevState.minutes + 1, seconds: 0 };
|
|
}
|
|
return { ...prevState, seconds: prevState.seconds + 1 };
|
|
}),
|
|
1000
|
|
);
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
const addZero = n => {
|
|
return n < 10 ? "0" + n : n;
|
|
};
|
|
|
|
return (
|
|
<div className={classes.timerBox}>
|
|
<span>{`${addZero(timer.minutes)}:${addZero(timer.seconds)}`}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RecordingTimer;
|