nzambello/work-timer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: hydration error

Browse source
This commit is contained in:
Nicola Zambello 2024-04-09 19:09:11 +03:00
parent 760e56fcc3
commit fdf57fa6b6
Signed by: nzambello
GPG key ID: 56E4A92C2C1E50BA
1 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/components/TimeElapsed.tsx
View file

@ -37,6 +37,11 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
return () => clearInterval(interval); return () => clearInterval(interval);
}, [startTime, endTime]); }, [startTime, endTime]);
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
const hours = Math.floor(elapsed / 60 / 60); const hours = Math.floor(elapsed / 60 / 60);
const minutes = Math.floor((elapsed - hours * 60 * 60) / 60); const minutes = Math.floor((elapsed - hours * 60 * 60) / 60);
const seconds = Math.floor(elapsed - hours * 60 * 60 - minutes * 60); const seconds = Math.floor(elapsed - hours * 60 * 60 - minutes * 60);
@ -62,6 +67,7 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
> >
<code>{hoursString}</code> <code>{hoursString}</code>
</pre> </pre>
{isClient && (
<MediaQuery <MediaQuery
smallerThan="sm" smallerThan="sm"
styles={{ styles={{
@ -91,6 +97,7 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
</span> </span>
</p> </p>
</MediaQuery> </MediaQuery>
)}
</Box> </Box>
); );
}; };