tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: date hydration error if user locale is different to server (#6806)

Browse Source 
Closes https://github.com/payloadcms/payload/issues/6796

## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)
This commit is contained in:
Paul
2024-06-17 11:16:58 -04:00
committed by GitHub
parent 6612bd1c98
commit a3e1856bde
1 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/ui/src/elements/DocumentControls/index.tsx
View File

@@ -3,7 +3,7 @@ import type { CollectionPermission, GlobalPermission } from 'payload/auth'
import type { SanitizedCollectionConfig } from 'payload/types'
import { getTranslation } from '@payloadcms/translations'
import React, { Fragment } from 'react'
import React, { Fragment, useEffect } from 'react'
import { useComponentMap } from '../../providers/ComponentMap/index.js'
import { useConfig } from '../../providers/Config/index.js'
@@ -64,6 +64,19 @@ export const DocumentControls: React.FC<{
routes: { admin: adminRoute },
} = config
// Settings these in state to avoid hydration issues if there is a mismatch between the server and client
const [updatedAt, setUpdatedAt] = React.useState<string>('')
const [createdAt, setCreatedAt] = React.useState<string>('')
useEffect(() => {
if (data?.updatedAt) {
setUpdatedAt(formatDate({ date: data.updatedAt, i18n, pattern: dateFormat }))
}
if (data?.createdAt) {
setCreatedAt(formatDate({ date: data.createdAt, i18n, pattern: dateFormat }))
}
}, [data, i18n, dateFormat])
const hasCreatePermission =
permissions && 'create' in permissions && permissions.create?.permission
@@ -127,35 +140,19 @@ export const DocumentControls: React.FC<{
className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]
.filter(Boolean)
.join(' ')}
title={
data?.updatedAt
? formatDate({ date: data?.updatedAt, i18n, pattern: dateFormat })
: ''
}
title={data?.updatedAt ? updatedAt : ''}
>
<p className={`${baseClass}__label`}>{i18n.t('general:lastModified')}:&nbsp;</p>
{data?.updatedAt && (
<p className={`${baseClass}__value`}>
{formatDate({ date: data?.updatedAt, i18n, pattern: dateFormat })}
</p>
)}
{data?.updatedAt && <p className={`${baseClass}__value`}>{updatedAt}</p>}
</li>
<li
className={[`${baseClass}__list-item`, `${baseClass}__value-wrap`]
.filter(Boolean)
.join(' ')}
title={
data?.createdAt
? formatDate({ date: data?.createdAt, i18n, pattern: dateFormat })
: ''
}
title={data?.createdAt ? createdAt : ''}
>
<p className={`${baseClass}__label`}>{i18n.t('general:created')}:&nbsp;</p>
{data?.createdAt && (
<p className={`${baseClass}__value`}>
{formatDate({ date: data?.createdAt, i18n, pattern: dateFormat })}
</p>
)}
{data?.createdAt && <p className={`${baseClass}__value`}>{createdAt}</p>}
</li>
</Fragment>
)}