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