fix: sync localization data after switching locale (#5277)

Co-authored-by: James <james@trbl.design>

packages/next/src/views/Edit/index.client.tsx

@@ -13,7 +13,7 @@ import React, { Fragment, useEffect } from 'react'
 import { useCallback } from 'react'
 
 export const EditViewClient: React.FC = () => {
-  const { collectionSlug, getDocPermissions, getVersions, globalSlug, isEditing, setDocumentInfo } =
+  const { collectionSlug, getDocPermissions, getVersions, globalSlug, isEditing, setOnSave } =
     useDocumentInfo()
 
   const {
@@ -58,10 +58,8 @@ export const EditViewClient: React.FC = () => {
   )
 
   useEffect(() => {
-    setDocumentInfo({
+    setOnSave(onSave)
-      onSave,
+  }, [setOnSave, onSave])
-    })
-  }, [setDocumentInfo, onSave])
 
   // Allow the `DocumentInfoProvider` to hydrate
   if (!Edit || (!collectionSlug && !globalSlug)) {

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

@@ -50,6 +50,7 @@ const Localizer: React.FC<{
                           },
                         }),
                       )
+                      router.refresh()
                       close()
                     }}
                   >

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

@@ -98,6 +98,8 @@ export const PublishMany: React.FC<Props> = (props) => {
     slug,
     t,
     toggleModal,
+    router,
+    stringifyParams,
   ])
 
   if (!versions?.drafts || selectAll === SelectAllStatus.None || !hasPermission) {

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

@@ -94,6 +94,8 @@ export const UnpublishMany: React.FC<Props> = (props) => {
     slug,
     t,
     toggleModal,
+    router,
+    stringifyParams,
   ])
 
   if (!versions?.drafts || selectAll === SelectAllStatus.None || !hasPermission) {

packages/ui/src/providers/DocumentInfo/index.tsx

@@ -20,7 +20,6 @@ import { useConfig } from '../Config/index.js'
 import { useLocale } from '../Locale/index.js'
 import { usePreferences } from '../Preferences/index.js'
 import { useTranslation } from '../Translation/index.js'
-import { documentInfoReducer } from './reducer.js'
 
 const Context = createContext({} as DocumentInfoContext)
 
@@ -32,20 +31,11 @@ export const DocumentInfoProvider: React.FC<
   DocumentInfoProps & {
     children: React.ReactNode
   }
-> = ({ children, ...rest }) => {
+> = ({ children, ...props }) => {
-  const [documentInfo, dispatchDocumentInfo] = useReducer(documentInfoReducer, rest)
+  const [documentTitle, setDocumentTitle] = useState(props.title)
+  const [onSave, setOnSave] = useState(() => props.onSave)
 
-  const setDocumentInfo = useCallback(
+  const { id, collectionSlug, globalSlug } = props
-    (newInfo: DocumentInfo) => {
-      dispatchDocumentInfo({
-        type: 'SET_DOC_INFO',
-        payload: newInfo,
-      })
-    },
-    [dispatchDocumentInfo],
-  )
-
-  const { id, collectionSlug, globalSlug } = documentInfo
 
   const {
     collections,
@@ -69,13 +59,6 @@ export const DocumentInfoProvider: React.FC<
   const [unpublishedVersions, setUnpublishedVersions] =
     useState<PaginatedDocs<TypeWithVersion<any>>>(null)
 
-  const setDocumentTitle = useCallback((title: string) => {
-    dispatchDocumentInfo({
-      type: 'SET_DOC_TITLE',
-      payload: title,
-    })
-  }, [])
-
   const baseURL = `${serverURL}${api}`
   let slug: string
   let pluralType: 'collections' | 'globals'
@@ -285,9 +268,13 @@ export const DocumentInfoProvider: React.FC<
     void getVersions()
   }, [getVersions])
 
+  useEffect(() => {
+    setDocumentTitle(props.title)
+  }, [props.title])
+
   useEffect(() => {
     const loadDocPermissions = async () => {
-      const docPermissions: DocumentPermissions = rest.docPermissions
+      const docPermissions: DocumentPermissions = props.docPermissions
       if (!docPermissions) await getDocPermissions()
       else setDocPermissions(docPermissions)
     }
@@ -295,37 +282,21 @@ export const DocumentInfoProvider: React.FC<
     if (collectionSlug || globalSlug) {
       void loadDocPermissions()
     }
-  }, [getDocPermissions, rest.docPermissions, setDocPermissions, collectionSlug, globalSlug])
+  }, [getDocPermissions, props.docPermissions, setDocPermissions, collectionSlug, globalSlug])
-
-  useEffect(() => {
-    const loadDocPreferences = async () => {
-      let docPreferences: DocumentPreferences = rest.docPreferences
-      if (!docPreferences) docPreferences = await getDocPreferences()
-
-      dispatchDocumentInfo({
-        type: 'SET_DOC_INFO',
-        payload: {
-          docPreferences,
-        },
-      })
-    }
-
-    if (id) {
-      void loadDocPreferences()
-    }
-  }, [getDocPreferences, preferencesKey, rest.docPreferences, id])
 
   const value: DocumentInfoContext = {
-    ...documentInfo,
+    ...props,
     docConfig,
     docPermissions,
     getDocPermissions,
     getDocPreferences,
     getVersions,
+    onSave,
     publishedDoc,
     setDocFieldPreferences,
-    setDocumentInfo,
     setDocumentTitle,
+    setOnSave,
+    title: documentTitle,
     unpublishedVersions,
     versions,
   }

packages/ui/src/providers/DocumentInfo/reducer.ts

@@ -1,39 +0,0 @@
-import type { DocumentInfo } from './index.js'
-
-type SET = {
-  payload: Partial<DocumentInfo>
-  type: 'SET_DOC_INFO'
-}
-
-type SET_TITLE = {
-  payload: string
-  type: 'SET_DOC_TITLE'
-}
-
-type RESET = {
-  payload: DocumentInfo
-  type: 'RESET_DOC_INFO'
-}
-
-type Action = RESET | SET | SET_TITLE
-
-export const documentInfoReducer = (state: DocumentInfo, action: Action): DocumentInfo => {
-  switch (action.type) {
-    case 'SET_DOC_INFO':
-      return {
-        ...state,
-        ...action.payload,
-      }
-    case 'SET_DOC_TITLE':
-      return {
-        ...state,
-        title: action.payload,
-      }
-    case 'RESET_DOC_INFO':
-      return {
-        ...action.payload,
-      }
-    default:
-      return state
-  }
-}

packages/ui/src/providers/DocumentInfo/types.ts

@@ -48,6 +48,6 @@ export type DocumentInfoContext = Omit<DocumentInfo, 'docPreferences'> & {
   getDocPreferences: () => Promise<{ [key: string]: unknown }>
   getVersions: () => Promise<void>
   setDocFieldPreferences: (field: string, fieldPreferences: { [key: string]: unknown }) => void
-  setDocumentInfo?: React.Dispatch<React.SetStateAction<Partial<DocumentInfo>>>
   setDocumentTitle: (title: string) => void
+  setOnSave: (data: Data) => Promise<void> | void
 }

test/_community/config.ts

@@ -19,7 +19,6 @@ export default buildConfigWithDefaults({
   },
 
   onInit: async (payload) => {
-    console.log('onInit')
     await payload.create({
       collection: 'users',
       data: {