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

Closes #6796

## Type of change
- [x] Bug fix (non-breaking change which fixes an issue)

Author: paulpopus

packages/ui/src/elements/DocumentControls/index.tsx

@@ -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>
             )}