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

61
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,35 +67,37 @@ const TimeElapsed = ({ startTime, endTime }: Props) => {
> >
<code>{hoursString}</code> <code>{hoursString}</code>
</pre> </pre>
<MediaQuery {isClient && (
smallerThan="sm" <MediaQuery
styles={{ smallerThan="sm"
display: 'none' styles={{
}} display: 'none'
>
<p
style={{
fontSize: '0.75rem',
margin: 0
}} }}
> >
<span> <p
{Intl.DateTimeFormat(user?.dateFormat || 'en-GB', { style={{
hour: '2-digit', fontSize: '0.75rem',
minute: '2-digit' margin: 0
}).format(new Date(startTime))} }}
</span> >
<span dangerouslySetInnerHTML={{ __html: '&nbsp;&mdash;&nbsp;' }} /> <span>
<span> {Intl.DateTimeFormat(user?.dateFormat || 'en-GB', {
{endTime hour: '2-digit',
? Intl.DateTimeFormat(user?.dateFormat || 'en-GB', { minute: '2-digit'
hour: '2-digit', }).format(new Date(startTime))}
minute: '2-digit' </span>
}).format(new Date(endTime)) <span dangerouslySetInnerHTML={{ __html: '&nbsp;&mdash;&nbsp;' }} />
: 'now'} <span>
</span> {endTime
</p> ? Intl.DateTimeFormat(user?.dateFormat || 'en-GB', {
</MediaQuery> hour: '2-digit',
minute: '2-digit'
}).format(new Date(endTime))
: 'now'}
</span>
</p>
</MediaQuery>
)}
</Box> </Box>
); );
}; };