fix: layout preferences for array/blocks were being saved twice in dev mode (#7396)

Fixes an issue where preferences for array/block collapsible's were not
being set correctly. React strict mode surfaced this issue.

Author: JarrodMFlesch

packages/ui/src/fields/Array/index.tsx

@@ -11,6 +11,7 @@ import { DraggableSortable } from '../../elements/DraggableSortable/index.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useForm, useFormSubmitted } from '../../forms/Form/context.js'
+import { extractRowsAndCollapsedIDs, toggleAllRows } from '../../forms/Form/rowHelpers.js'
 import { NullifyLocaleField } from '../../forms/NullifyField/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
@@ -28,7 +29,7 @@ import './index.scss'
 
 const baseClass = 'array-field'
 
-export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
+export const ArrayFieldComponent: React.FC<ArrayFieldProps> = (props) => {
   const {
     name,
     CustomDescription,
@@ -159,16 +160,27 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
 
   const toggleCollapseAll = useCallback(
     (collapsed: boolean) => {
-      dispatchFields({ type: 'SET_ALL_ROWS_COLLAPSED', collapsed, path, setDocFieldPreferences })
+      const { collapsedIDs, updatedRows } = toggleAllRows({
+        collapsed,
+        rows,
+      })
+      dispatchFields({ type: 'SET_ALL_ROWS_COLLAPSED', path, updatedRows })
+      setDocFieldPreferences(path, { collapsed: collapsedIDs })
     },
-    [dispatchFields, path, setDocFieldPreferences],
+    [dispatchFields, path, rows, setDocFieldPreferences],
   )
 
   const setCollapse = useCallback(
     (rowID: string, collapsed: boolean) => {
-      dispatchFields({ type: 'SET_ROW_COLLAPSED', collapsed, path, rowID, setDocFieldPreferences })
+      const { collapsedIDs, updatedRows } = extractRowsAndCollapsedIDs({
+        collapsed,
+        rowID,
+        rows,
+      })
+      dispatchFields({ type: 'SET_ROW_COLLAPSED', path, updatedRows })
+      setDocFieldPreferences(path, { collapsed: collapsedIDs })
     },
-    [dispatchFields, path, setDocFieldPreferences],
+    [dispatchFields, path, rows, setDocFieldPreferences],
   )
 
   const hasMaxRows = maxRows && rows.length >= maxRows
@@ -314,4 +326,4 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
   )
 }
 
-export const ArrayField = withCondition(_ArrayField)
+export const ArrayField = withCondition(ArrayFieldComponent)

packages/ui/src/fields/Blocks/index.tsx

@@ -13,6 +13,7 @@ import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useForm, useFormSubmitted } from '../../forms/Form/context.js'
+import { extractRowsAndCollapsedIDs, toggleAllRows } from '../../forms/Form/rowHelpers.js'
 import { NullifyLocaleField } from '../../forms/NullifyField/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
@@ -168,16 +169,27 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
 
   const toggleCollapseAll = useCallback(
     (collapsed: boolean) => {
-      dispatchFields({ type: 'SET_ALL_ROWS_COLLAPSED', collapsed, path, setDocFieldPreferences })
+      const { collapsedIDs, updatedRows } = toggleAllRows({
+        collapsed,
+        rows,
+      })
+      dispatchFields({ type: 'SET_ALL_ROWS_COLLAPSED', path, updatedRows })
+      setDocFieldPreferences(path, { collapsed: collapsedIDs })
     },
-    [dispatchFields, path, setDocFieldPreferences],
+    [dispatchFields, path, rows, setDocFieldPreferences],
   )
 
   const setCollapse = useCallback(
     (rowID: string, collapsed: boolean) => {
-      dispatchFields({ type: 'SET_ROW_COLLAPSED', collapsed, path, rowID, setDocFieldPreferences })
+      const { collapsedIDs, updatedRows } = extractRowsAndCollapsedIDs({
+        collapsed,
+        rowID,
+        rows,
+      })
+      dispatchFields({ type: 'SET_ROW_COLLAPSED', path, updatedRows })
+      setDocFieldPreferences(path, { collapsed: collapsedIDs })
     },
-    [dispatchFields, path, setDocFieldPreferences],
+    [dispatchFields, path],
   )
 
   const hasMaxRows = maxRows && rows.length >= maxRows

packages/ui/src/forms/Form/fieldReducer.ts

@@ -309,68 +309,27 @@ export function fieldReducer(state: FormState, action: FieldAction): FormState {
     }
 
     case 'SET_ROW_COLLAPSED': {
-      const { collapsed, path, rowID, setDocFieldPreferences } = action
-
-      const arrayState = state[path]
-
-      const { collapsedRowIDs, matchedIndex } = state[path].rows.reduce(
-        (acc, row, index) => {
-          const isMatchingRow = row.id === rowID
-          if (isMatchingRow) acc.matchedIndex = index
-
-          if (!isMatchingRow && row.collapsed) acc.collapsedRowIDs.push(row.id)
-          else if (isMatchingRow && collapsed) acc.collapsedRowIDs.push(row.id)
-
-          return acc
-        },
-        {
-          collapsedRowIDs: [],
-          matchedIndex: undefined,
-        },
-      )
-
-      if (matchedIndex > -1) {
-        arrayState.rows[matchedIndex].collapsed = collapsed
-        setDocFieldPreferences(path, { collapsed: collapsedRowIDs })
-      }
+      const { path, updatedRows } = action
 
       const newState = {
         ...state,
         [path]: {
-          ...arrayState,
+          ...state[path],
+          rows: updatedRows,
         },
       }
 
       return newState
     }
 
     case 'SET_ALL_ROWS_COLLAPSED': {
-      const { collapsed, path, setDocFieldPreferences } = action
-
-      const { collapsedRowIDs, rows } = state[path].rows.reduce(
-        (acc, row) => {
-          if (collapsed) acc.collapsedRowIDs.push(row.id)
-
-          acc.rows.push({
-            ...row,
-            collapsed,
-          })
-
-          return acc
-        },
-        {
-          collapsedRowIDs: [],
-          rows: [],
-        },
-      )
-
-      setDocFieldPreferences(path, { collapsed: collapsedRowIDs })
+      const { path, updatedRows } = action
 
       return {
         ...state,
         [path]: {
           ...state[path],
-          rows,
+          rows: updatedRows,
         },
       }
     }

packages/ui/src/forms/Form/rowHelpers.ts

@@ -0,0 +1,48 @@
+import type { Row } from 'payload'
+
+export const extractRowsAndCollapsedIDs = ({
+  collapsed,
+  rowID,
+  rows,
+}: {
+  collapsed: boolean
+  rowID: string
+  rows: Row[]
+}): {
+  collapsedIDs: string[]
+  updatedRows: Row[]
+} => {
+  return rows.reduce(
+    (acc, row) => {
+      if (rowID === row.id) row.collapsed = collapsed
+      if (row.collapsed) acc.collapsedIDs.push(row.id)
+      acc.updatedRows.push(row)
+      return acc
+    },
+    {
+      collapsedIDs: [],
+      updatedRows: [],
+    },
+  )
+}
+
+export const toggleAllRows = ({
+  collapsed,
+  rows,
+}): {
+  collapsedIDs: string[]
+  updatedRows: Row[]
+} => {
+  return rows.reduce(
+    (acc, row) => {
+      row.collapsed = collapsed
+      if (collapsed) acc.collapsedIDs.push(row.id)
+      acc.updatedRows.push(row)
+      return acc
+    },
+    {
+      collapsedIDs: [],
+      updatedRows: [],
+    },
+  )
+}

packages/ui/src/forms/Form/types.ts

@@ -1,4 +1,4 @@
-import type { Data, Field, FormField, FormState, User } from 'payload'
+import type { Data, Field, FormField, FormState, Row, User } from 'payload'
 import type React from 'react'
 import type { Dispatch } from 'react'
 
@@ -141,18 +141,15 @@ export type ADD_SERVER_ERRORS = {
 }
 
 export type SET_ROW_COLLAPSED = {
-  collapsed: boolean
   path: string
-  rowID: string
-  setDocFieldPreferences: (field: string, fieldPreferences: { [key: string]: unknown }) => void
   type: 'SET_ROW_COLLAPSED'
+  updatedRows: Row[]
 }
 
 export type SET_ALL_ROWS_COLLAPSED = {
-  collapsed: boolean
   path: string
-  setDocFieldPreferences: (field: string, fieldPreferences: { [key: string]: unknown }) => void
   type: 'SET_ALL_ROWS_COLLAPSED'
+  updatedRows: Row[]
 }
 
 export type FieldAction =