chore(next): migrates server action into standalone api endpoint

packages/next/src/pages/Document/index.tsx

@@ -149,7 +149,7 @@ export const Document = async ({
     limit: 1,
   })) as any as { docs: { value: DocumentPreferences }[] }
 
-  const formState = await buildStateFromSchema({
+  const initialState = await buildStateFromSchema({
     id,
     data: data || {},
     fieldSchema: formatFields(fields, isEditing),
@@ -176,13 +176,11 @@ export const Document = async ({
     globalSlug,
     data,
     hasSavePermission,
-    formState,
+    initialState,
     isEditing,
     docPermissions,
-    docPreferences,
     updatedAt: data?.updatedAt?.toString(),
     user,
-    locale,
     payload,
     config,
     searchParams,

packages/next/src/routes/rest/collections/buildFormState.ts

@@ -0,0 +1,28 @@
+import httpStatus from 'http-status'
+
+import { CollectionRouteHandler } from '../types'
+
+import { BuildFormStateArgs, buildStateFromSchema, reduceFieldsToValues } from '@payloadcms/ui'
+
+export const buildFormStateCollection: CollectionRouteHandler = async ({ req, collection }) => {
+  const { data: reqData, user, t, locale } = req
+
+  const { id, operation, docPreferences, formState } = reqData as BuildFormStateArgs
+
+  const data = reduceFieldsToValues(formState, true)
+
+  const result = await buildStateFromSchema({
+    id,
+    data,
+    fieldSchema: collection.config.fields,
+    locale,
+    operation,
+    preferences: docPreferences,
+    t,
+    user,
+  })
+
+  return Response.json(result, {
+    status: httpStatus.OK,
+  })
+}

packages/next/src/routes/rest/globals/buildFormState.ts

@@ -0,0 +1,26 @@
+import httpStatus from 'http-status'
+
+import { GlobalRouteHandler } from '../types'
+
+import { BuildFormStateArgs, buildStateFromSchema, reduceFieldsToValues } from '@payloadcms/ui'
+
+export const buildFormStateGlobal: GlobalRouteHandler = async ({ req, globalConfig }) => {
+  const { data: reqData, user, t, locale } = req
+
+  const { docPreferences, formState } = reqData as BuildFormStateArgs
+
+  const data = reduceFieldsToValues(formState, true)
+
+  const result = await buildStateFromSchema({
+    data,
+    fieldSchema: globalConfig.fields,
+    locale,
+    preferences: docPreferences,
+    t,
+    user,
+  })
+
+  return Response.json(result, {
+    status: httpStatus.OK,
+  })
+}

packages/next/src/routes/rest/index.ts

@@ -42,6 +42,8 @@ import { findVersions as findVersionsGlobal } from './globals/findVersions'
 import { restoreVersion as restoreVersionGlobal } from './globals/restoreVersion'
 import { findVersionByID as findVersionByIdGlobal } from './globals/findVersionByID'
 import { RouteError } from './RouteError'
+import { buildFormStateGlobal } from './globals/buildFormState'
+import { buildFormStateCollection } from './collections/buildFormState'
 
 const endpoints = {
   root: {
@@ -67,6 +69,7 @@ const endpoints = {
       access: docAccess,
       'first-register': registerFirstUser,
       'forgot-password': forgotPassword,
+      'form-state': buildFormStateCollection,
       'reset-password': resetPassword,
       'refresh-token': refresh,
       'doc-access-by-id': docAccess,
@@ -93,6 +96,7 @@ const endpoints = {
       update: updateGlobal,
       'doc-access': docAccessGlobal,
       'doc-versions-by-id': restoreVersionGlobal,
+      'form-state': buildFormStateGlobal,
     },
   },
 }
@@ -274,6 +278,7 @@ export const POST =
         config,
         params: { collection: slug1 },
       })
+
       collection = req.payload.collections?.[slug1]
 
       if (collection) {
@@ -282,6 +287,7 @@ export const POST =
           payloadRequest: req,
           endpoints: collection.config?.endpoints || [],
         })
+
         if (customEndpointResponse) return customEndpointResponse
 
         switch (slug.length) {
@@ -291,6 +297,7 @@ export const POST =
             break
           case 2:
             if (slug2 in endpoints.collection.POST) {
+              // /:collection/form-state
               // /:collection/login
               // /:collection/logout
               // /:collection/unlock

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -25,6 +25,8 @@ import IDLabel from '../IDLabel'
 import type { EditViewProps } from '../../views/types'
 import { DefaultEditView } from '../../views/Edit'
 import { Gutter } from '../Gutter'
+import { LoadingOverlay } from '../Loading'
+import { getFormState } from '../../views/Edit/getFormState'
 
 const Content: React.FC<DocumentDrawerProps> = ({ collectionSlug, Header, drawerSlug, onSave }) => {
   const config = useConfig()
@@ -37,7 +39,7 @@ const Content: React.FC<DocumentDrawerProps> = ({ collectionSlug, Header, drawer
   const { closeModal, modalState, toggleModal } = useModal()
   const locale = useLocale()
   const { user } = useAuth()
-  const [internalState, setInternalState] = useState<FormState>()
+  const [initialState, setInitialState] = useState<FormState>()
   const { i18n, t } = useTranslation()
   const hasInitializedState = useRef(false)
   const [isOpen, setIsOpen] = useState(false)
@@ -105,7 +107,33 @@ const Content: React.FC<DocumentDrawerProps> = ({ collectionSlug, Header, drawer
     (isEditing && docPermissions?.update?.permission) ||
     (!isEditing && (docPermissions as CollectionPermission)?.create?.permission)
 
-  const isLoading = !internalState || !docPermissions || isLoadingDocument
+  useEffect(() => {
+    if (!hasInitializedState.current && data) {
+      const getInitialState = async () => {
+        const result = await getFormState({
+          serverURL,
+          apiRoute: api,
+          collectionSlug,
+          body: {
+            id,
+            operation: isEditing ? 'update' : 'create',
+            formState: data,
+            docPreferences: null, // TODO: get this
+          },
+        })
+
+        setInitialState(result)
+      }
+
+      getInitialState()
+    }
+  }, [])
+
+  const isLoading = !initialState || !docPermissions || isLoadingDocument
+
+  if (isLoading) {
+    return <LoadingOverlay />
+  }
 
   const componentProps: EditViewProps = {
     id,
@@ -144,11 +172,10 @@ const Content: React.FC<DocumentDrawerProps> = ({ collectionSlug, Header, drawer
     onSave,
     collectionSlug: collectionConfig.slug,
     docPermissions: docPermissions as CollectionPermission,
-    docPreferences: null,
+    docPreferences: null, // TODO: get this
     user,
     updatedAt: data?.updatedAt,
-    locale,
-    initializeFormState: true,
+    initialState,
   }
 
   return (

packages/ui/src/exports/forms.ts

@@ -28,3 +28,4 @@ export { default as buildInitialState } from '../forms/Form'
 export { default as FieldDescription } from '../forms/FieldDescription'
 export { default as useField } from '../forms/useField'
 export { default as Error } from '../forms/Error'
+export type { BuildFormStateArgs } from '../forms/utilities/buildStateFromSchema'

packages/ui/src/forms/utilities/buildStateFromSchema/index.ts

@@ -1,7 +1,7 @@
 import type { TFunction } from '@payloadcms/translations'
 
 import type { User } from 'payload/auth'
-import type { Field as FieldSchema, Data } from 'payload/types'
+import type { Field as FieldSchema, Data, DocumentPreferences } from 'payload/types'
 import type { FormState } from '../../Form/types'
 
 import { iterateFields } from './iterateFields'
@@ -21,6 +21,13 @@ type Args = {
   user?: User | null
 }
 
+export type BuildFormStateArgs = {
+  id?: string | number
+  operation?: 'create' | 'update'
+  docPreferences: DocumentPreferences
+  formState?: FormState
+}
+
 const buildStateFromSchema = async (args: Args): Promise<FormState> => {
   const { id, data: fullData = {}, fieldSchema, locale, operation, preferences, t, user } = args
 

packages/ui/src/views/Edit/getFormState.ts

@@ -0,0 +1,28 @@
+import { SanitizedCollectionConfig, SanitizedConfig, SanitizedGlobalConfig } from 'payload/types'
+import { FormState } from '../../forms/Form/types'
+import { BuildFormStateArgs } from '../..'
+
+export const getFormState = async (args: {
+  serverURL: SanitizedConfig['serverURL']
+  apiRoute: SanitizedConfig['routes']['api']
+  collectionSlug?: SanitizedCollectionConfig['slug']
+  globalSlug?: SanitizedGlobalConfig['slug']
+  body: BuildFormStateArgs
+}): Promise<FormState> => {
+  const { serverURL, apiRoute, collectionSlug, globalSlug, body } = args
+
+  const res = await fetch(`${serverURL}${apiRoute}/${collectionSlug || globalSlug}/form-state`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(body),
+  })
+
+  if (res.ok) {
+    const json = (await res.json()) as FormState
+    return json
+  }
+
+  return body?.formState
+}