adds Translation component and removes more react-i18next

2024-01-16 09:36:35 -05:00
parent 0bc7c452c3
commit 13313028b5
43 changed files with 292 additions and 211 deletions
--- a/packages/next/src/pages/Account/Default/Settings/index.tsx
+++ b/packages/next/src/pages/Account/Default/Settings/index.tsx
@@ -18,6 +18,7 @@ export const Settings: React.FC<{
  return (
    <div className={[baseClass, className].filter(Boolean).join(' ')}>
      <h3>{t('general:payloadSettings')}</h3>
+
      <div className={`${baseClass}__language`}>
        <Label htmlFor="language-select" label={t('general:language')} />
        <ReactSelect
--- a/packages/next/src/pages/ForgotPassword/index.tsx
+++ b/packages/next/src/pages/ForgotPassword/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import { Button, Form, FormSubmit, Email, MinimalTemplate } from '@payloadcms/ui'
+import { Button, Form, FormSubmit, Email, MinimalTemplate, Translation } from '@payloadcms/ui'
 import { SanitizedConfig } from 'payload/types'
 import Link from 'next/link'
 import { initPage } from '../../utilities/initPage'
@@ -25,7 +25,7 @@ export const generateMetadata = async ({
 export const ForgotPassword: React.FC<{
  config: Promise<SanitizedConfig>
 }> = async ({ config: configPromise }) => {
-  const { config, user } = await initPage({ configPromise })
+  const { config, user, i18n } = await initPage({ configPromise })

  const {
    admin: { user: userSlug },
@@ -47,19 +47,19 @@ export const ForgotPassword: React.FC<{
  if (user) {
    return (
      <MinimalTemplate className={baseClass}>
-        <h1>
-          {/* {t('alreadyLoggedIn')} */}
-          Already Logged In
-        </h1>
+        <h1>{i18n.t('authentication:alreadyLoggedIn')}</h1>
        <p>
-          {/* <Trans i18nKey="loggedInChangePassword" t={t}> */}
-          <Link href={`${admin}/account`}>account</Link>
-          {/* </Trans> */}
+          <Translation
+            t={i18n.t}
+            i18nKey="authentication:loggedInChangePassword"
+            elements={{
+              '0': ({ children }) => <Link href={`${admin}/account`} children={children} />,
+            }}
+          />
        </p>
        <br />
        <Button buttonStyle="secondary" el="link" to={admin}>
-          Back to Dashboard
-          {/* {t('general:backToDashboard')} */}
+          {i18n.t('general:backToDashboard')}
        </Button>
      </MinimalTemplate>
    )
--- a/packages/next/src/pages/LivePreview/index.tsx
+++ b/packages/next/src/pages/LivePreview/index.tsx
@@ -1,6 +1,6 @@
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@payloadcms/ui'

 import type { SanitizedCollectionConfig } from '../../../../collections/config/types'
 import type { LivePreviewConfig } from '../../../../exports/config'
@@ -31,7 +31,7 @@ const PreviewView: React.FC<
    fieldTypes: FieldTypes
  }
 > = (props) => {
-  const { i18n, t } = useTranslation('general')
+  const { i18n, t } = useTranslation()
  const { previewWindowType } = useLivePreviewContext()

  const { apiURL, data, fieldTypes, permissions } = props
@@ -69,9 +69,9 @@ const PreviewView: React.FC<
    <Fragment>
      {collection && (
        <Meta
-          description={t('editing')}
+          description={t('general:editing')}
          keywords={`${getTranslation(collection.labels.singular, i18n)}, Payload, CMS`}
-          title={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
+          title={`${isEditing ? t('general:editing') : t('general:creating')} - ${getTranslation(
            collection.labels.singular,
            i18n,
          )}`}
@@ -92,7 +92,7 @@ const PreviewView: React.FC<
        global={global}
        id={id}
        isEditing={isEditing}
-        view={t('livePreview')}
+        view={t('general:livePreview')}
      />
      <DocumentControls
        apiURL={apiURL}
--- a/packages/next/src/pages/ResetPassword/index.tsx
+++ b/packages/next/src/pages/ResetPassword/index.tsx
@@ -8,6 +8,7 @@ import {
  ConfirmPassword,
  HiddenInput,
  Password,
+  Translation,
 } from '@payloadcms/ui'
 import './index.scss'
 import { SanitizedConfig } from 'payload/types'
@@ -62,9 +63,13 @@ export const ResetPassword: React.FC<{
            {/* {t('alreadyLoggedIn')} */}
          </h1>
          <p>
-            {/* <Trans i18nKey="loginWithAnotherUser" t={t}> */}
-            <Link href={`${admin}${logoutRoute}`}>log out</Link>
-            {/* </Trans> */}
+            <Translation
+              t={i18n.t}
+              i18nKey="authentication:loggedInChangePassword"
+              elements={{
+                '0': ({ children }) => <Link href={`${admin}/account`} children={children} />,
+              }}
+            />
          </p>
          <br />
          <Button buttonStyle="secondary" el="link" to={admin}>
--- a/packages/next/src/pages/Version/Compare/index.tsx
+++ b/packages/next/src/pages/Version/Compare/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import qs from 'qs'
 import React, { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@payloadcms/ui'

 import type { PaginatedDocs } from 'payload/database'
 import type { Where } from 'payload/types'
@@ -27,7 +27,7 @@ const CompareVersion: React.FC<Props> = (props) => {
  const [options, setOptions] = useState(baseOptions)
  const [lastLoadedPage, setLastLoadedPage] = useState(1)
  const [errorLoading, setErrorLoading] = useState('')
-  const { i18n, t } = useTranslation('version')
+  const { i18n, t } = useTranslation()

  const getResults = useCallback(
    async ({ lastLoadedPage: lastLoadedPageArg }) => {
@@ -99,7 +99,7 @@ const CompareVersion: React.FC<Props> = (props) => {
        .filter(Boolean)
        .join(' ')}
    >
-      <div className={`${baseClass}__label`}>{t('compareVersion')}</div>
+      <div className={`${baseClass}__label`}>{t('version:compareVersion')}</div>
      {!errorLoading && (
        <ReactSelect
          isClearable={false}
@@ -109,7 +109,7 @@ const CompareVersion: React.FC<Props> = (props) => {
            getResults({ lastLoadedPage: lastLoadedPage + 1 })
          }}
          options={options}
-          placeholder={t('selectVersionToCompare')}
+          placeholder={t('version:selectVersionToCompare')}
          value={value}
        />
      )}
--- a/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
+++ b/packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import { getTranslation } from '@payloadcms/translations'
 import ReactDiffViewer from 'react-diff-viewer-continued'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@payloadcms/ui'

 import type { RelationshipField, SanitizedCollectionConfig } from 'payload/types'
 import type { Props } from '../types'
@@ -74,12 +74,12 @@ const Relationship: React.FC<Props & { field: RelationshipField }> = ({
  version,
 }) => {
  const { collections } = useConfig()
-  const { i18n, t } = useTranslation('general')
+  const { i18n, t } = useTranslation()
  const { code: locale } = useLocale()

  let placeholder = ''

-  if (version === comparison) placeholder = `[${t('noValue')}]`
+  if (version === comparison) placeholder = `[${t('general:noValue')}]`

  let versionToRender = version
  let comparisonToRender = comparison
@@ -102,8 +102,7 @@ const Relationship: React.FC<Props & { field: RelationshipField }> = ({
    <div className={baseClass}>
      <Label>
        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-        // TODO(i18n)
-        {/* {getTranslation(field.label, i18n)} */}
+        {getTranslation(field.label, i18n)}
      </Label>
      <ReactDiffViewer
        hideLineNumbers
--- a/packages/next/src/pages/Version/SelectLocales/index.tsx
+++ b/packages/next/src/pages/Version/SelectLocales/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'react-i18next'
+import { useTranslation } from '@payloadcms/ui'

 import type { Props } from './types'

@@ -9,7 +9,7 @@ import './index.scss'
 const baseClass = 'select-version-locales'

 const SelectLocales: React.FC<Props> = ({ onChange, options, value }) => {
-  const { t } = useTranslation('version')
+  const { t } = useTranslation()
  const { code } = useLocale()

  const format = (items) => {
@@ -26,12 +26,12 @@ const SelectLocales: React.FC<Props> = ({ onChange, options, value }) => {

  return (
    <div className={baseClass}>
-      <div className={`${baseClass}__label`}>{t('showLocales')}</div>
+      <div className={`${baseClass}__label`}>{t('version:showLocales')}</div>
      <ReactSelect
        isMulti
        onChange={onChange}
        options={format(options)}
-        placeholder={t('selectLocales')}
+        placeholder={t('version:selectLocales')}
        value={format(value)}
      />
    </div>
--- a/packages/next/src/utilities/createPayloadRequest.ts
+++ b/packages/next/src/utilities/createPayloadRequest.ts
@@ -118,11 +118,11 @@ export const createPayloadRequest = async ({

    // need to add:
    // ------------
+    // - files
    // - transactionID
    // - findByID
    // - payloadDataLoader
    // - payloadUploadSizes
-    // - files
  }

  const req: PayloadRequest = Object.assign(request, customRequest)