feat(next): initializes nav group prefs on the server and consolidates records (#9145)

Author: jacobsfletch

packages/next/src/elements/Nav/getNavPrefs.ts

@@ -0,0 +1,36 @@
+import type { NavPreferences, Payload, User } from 'payload'
+
+import { cache } from 'react'
+
+export const getNavPrefs = cache(
+  async ({ payload, user }: { payload: Payload; user: User }): Promise<NavPreferences> =>
+    user
+      ? await payload
+          .find({
+            collection: 'payload-preferences',
+            depth: 0,
+            limit: 1,
+            user,
+            where: {
+              and: [
+                {
+                  key: {
+                    equals: 'nav',
+                  },
+                },
+                {
+                  'user.relationTo': {
+                    equals: user.collection,
+                  },
+                },
+                {
+                  'user.value': {
+                    equals: user.id,
+                  },
+                },
+              ],
+            },
+          })
+          ?.then((res) => res?.docs?.[0]?.value)
+      : null,
+)

packages/next/src/elements/Nav/index.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { groupNavItems } from '@payloadcms/ui/shared'
+import type { NavPreferences } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import { NavGroup, useConfig, useNav, useTranslation } from '@payloadcms/ui'
@@ -13,7 +14,8 @@ const baseClass = 'nav'
 
 export const DefaultNavClient: React.FC<{
   groups: ReturnType<typeof groupNavItems>
-}> = ({ groups }) => {
+  navPreferences: NavPreferences
+}> = ({ groups, navPreferences }) => {
   const pathname = usePathname()
 
   const {
@@ -29,7 +31,7 @@ export const DefaultNavClient: React.FC<{
     <Fragment>
       {groups.map(({ entities, label }, key) => {
         return (
-          <NavGroup key={key} label={label}>
+          <NavGroup isOpen={navPreferences?.groups?.[label]?.open} key={key} label={label}>
             {entities.map(({ slug, type, label }, i) => {
               let href: string
               let id: string

packages/next/src/elements/Nav/index.tsx

@@ -12,11 +12,12 @@ import { NavWrapper } from './NavWrapper/index.js'
 
 const baseClass = 'nav'
 
+import { getNavPrefs } from './getNavPrefs.js'
 import { DefaultNavClient } from './index.client.js'
 
 export type NavProps = ServerProps
 
-export const DefaultNav: React.FC<NavProps> = (props) => {
+export const DefaultNav: React.FC<NavProps> = async (props) => {
   const { i18n, locale, params, payload, permissions, searchParams, user, visibleEntities } = props
 
   if (!payload?.config) {
@@ -56,6 +57,8 @@ export const DefaultNav: React.FC<NavProps> = (props) => {
     i18n,
   )
 
+  const navPreferences = await getNavPrefs({ payload, user })
+
   return (
     <NavWrapper baseClass={baseClass}>
       <nav className={`${baseClass}__wrap`}>
@@ -72,7 +75,7 @@ export const DefaultNav: React.FC<NavProps> = (props) => {
             user,
           }}
         />
-        <DefaultNavClient groups={groups} />
+        <DefaultNavClient groups={groups} navPreferences={navPreferences} />
         <RenderServerComponent
           Component={afterNavLinks}
           importMap={payload.importMap}

packages/next/src/layouts/Root/index.tsx

@@ -8,6 +8,7 @@ import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
 import { checkDependencies, parseCookies } from 'payload'
 import React from 'react'
 
+import { getNavPrefs } from '../../elements/Nav/getNavPrefs.js'
 import { getClientConfig } from '../../utilities/getClientConfig.js'
 import { getPayloadHMR } from '../../utilities/getPayloadHMR.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
@@ -131,38 +132,7 @@ export const RootLayout = async ({
     })
   }
 
-  const navPreferences = user
-    ? (
-        await payload.find({
-          collection: 'payload-preferences',
-          depth: 0,
-          limit: 1,
-          req,
-          user,
-          where: {
-            and: [
-              {
-                key: {
-                  equals: 'nav',
-                },
-              },
-              {
-                'user.relationTo': {
-                  equals: user.collection,
-                },
-              },
-              {
-                'user.value': {
-                  equals: user.id,
-                },
-              },
-            ],
-          },
-        })
-      )?.docs?.[0]
-    : null
-
-  const isNavOpen = navPreferences?.value?.open ?? true
+  const navPrefs = await getNavPrefs({ payload, user })
 
   const clientConfig = await getClientConfig({
     config,
@@ -176,7 +146,7 @@ export const RootLayout = async ({
           config={clientConfig}
           dateFNSKey={i18n.dateFNSKey}
           fallbackLang={config.i18n.fallbackLanguage}
-          isNavOpen={isNavOpen}
+          isNavOpen={navPrefs?.open}
           languageCode={languageCode}
           languageOptions={languageOptions}
           permissions={permissions}

packages/payload/src/admin/elements/Nav.ts

@@ -0,0 +1,10 @@
+export type NavPreferences = {
+  groups: NavGroupPreferences
+  open: boolean
+}
+
+export type NavGroupPreferences = {
+  [key: string]: {
+    open: boolean
+  }
+}

packages/payload/src/admin/types.ts

@@ -19,6 +19,7 @@ import type {
 export type { DefaultCellComponentProps } from './elements/Cell.js'
 export type { ConditionalDateProps } from './elements/DatePicker.js'
 export type { DayPickerProps, SharedProps, TimePickerProps } from './elements/DatePicker.js'
+export type { NavGroupPreferences, NavPreferences } from './elements/Nav.js'
 export type { CustomPreviewButton } from './elements/PreviewButton.js'
 export type { CustomPublishButton } from './elements/PublishButton.js'
 export type { CustomSaveButton } from './elements/SaveButton.js'
@@ -29,6 +30,7 @@ export type {
   DocumentTabConfig,
   DocumentTabProps,
 } from './elements/Tab.js'
+
 export type { CustomUpload } from './elements/Upload.js'
 
 export type {
@@ -333,16 +335,6 @@ export type {
   GenericErrorProps,
 } from './forms/Error.js'
 
-export type {
-  ClientComponentProps,
-  ClientFieldBase,
-  ClientFieldWithOptionalType,
-  FieldClientComponent,
-  FieldServerComponent,
-  ServerComponentProps,
-  ServerFieldBase,
-} from './forms/Field.js'
-
 export type {
   BuildFormStateArgs,
   Data,
@@ -354,6 +346,16 @@ export type {
   Row,
 }
 
+export type {
+  ClientComponentProps,
+  ClientFieldBase,
+  ClientFieldWithOptionalType,
+  FieldClientComponent,
+  FieldServerComponent,
+  ServerComponentProps,
+  ServerFieldBase,
+} from './forms/Field.js'
+
 export type {
   FieldLabelClientComponent,
   FieldLabelClientProps,
@@ -377,8 +379,6 @@ export type {
   ServerFunctionHandler,
 } from './functions/index.js'
 
-export type { LanguageOptions } from './LanguageOptions.js'
-
 export type MappedServerComponent<TComponentClientProps extends JsonObject = JsonObject> = {
   Component?: React.ComponentType<TComponentClientProps>
   props?: Partial<any>
@@ -458,6 +458,8 @@ export type DocumentSlots = {
   Upload?: React.ReactNode
 }
 
+export type { LanguageOptions } from './LanguageOptions.js'
+
 export type { RichTextAdapter, RichTextAdapterProvider, RichTextHooks } from './RichText.js'
 
 export type {

packages/ui/src/elements/Nav/NavToggler/index.tsx

@@ -40,9 +40,13 @@ export const NavToggler: React.FC<{
         // only when the user explicitly toggles the nav on desktop do we want to set the preference
         // this is because the js may open or close the nav based on the window size, routing, etc
         if (!largeBreak) {
-          await setPreference('nav', {
-            open: !navOpen,
-          })
+          await setPreference(
+            'nav',
+            {
+              open: !navOpen,
+            },
+            true,
+          )
         }
       }}
       tabIndex={tabIndex}

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

@@ -1,11 +1,13 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+import type { NavPreferences } from 'payload'
+
+import React, { useState } from 'react'
 import AnimateHeightImport from 'react-animate-height'
 
 import { ChevronIcon } from '../../icons/Chevron/index.js'
 import { usePreferences } from '../../providers/Preferences/index.js'
-import { useNav } from '../Nav/context.js'
 import './index.scss'
+import { useNav } from '../Nav/context.js'
 
 const AnimateHeight = (AnimateHeightImport.default ||
   AnimateHeightImport) as typeof AnimateHeightImport.default
@@ -14,37 +16,33 @@ const baseClass = 'nav-group'
 
 type Props = {
   children: React.ReactNode
+  isOpen?: boolean
   label: string
 }
 
-export const NavGroup: React.FC<Props> = ({ children, label }) => {
-  const [collapsed, setCollapsed] = useState(true)
-  const [animate, setAnimate] = useState(false)
-  const { getPreference, setPreference } = usePreferences()
-  const { navOpen } = useNav()
+const preferencesKey = 'nav'
 
-  const preferencesKey = `collapsed-${label}-groups`
+export const NavGroup: React.FC<Props> = ({ children, isOpen: isOpenFromProps, label }) => {
+  const [collapsed, setCollapsed] = useState(
+    typeof isOpenFromProps !== 'undefined' ? !isOpenFromProps : false,
+  )
 
-  useEffect(() => {
-    if (label) {
-      const setCollapsedFromPreferences = async () => {
-        const preferences = (await getPreference(preferencesKey)) || []
-        setCollapsed(preferences.indexOf(label) !== -1)
-      }
-      void setCollapsedFromPreferences()
-    }
-  }, [getPreference, label, preferencesKey])
+  const [animate, setAnimate] = useState(false)
+  const { setPreference } = usePreferences()
+  const { navOpen } = useNav()
 
   if (label) {
-    const toggleCollapsed = async () => {
+    const toggleCollapsed = () => {
       setAnimate(true)
-      let preferences: string[] = (await getPreference(preferencesKey)) || []
-      if (collapsed) {
-        preferences = preferences.filter((preference) => label !== preference)
+      const newGroupPrefs: NavPreferences['groups'] = {}
+
+      if (!newGroupPrefs?.[label]) {
+        newGroupPrefs[label] = { open: Boolean(collapsed) }
       } else {
-        preferences.push(label)
+        newGroupPrefs[label].open = Boolean(collapsed)
       }
-      void setPreference(preferencesKey, preferences)
+
+      void setPreference(preferencesKey, { groups: newGroupPrefs }, true)
       setCollapsed(!collapsed)
     }
 

packages/ui/src/exports/shared/index.ts

@@ -16,8 +16,8 @@ export { formatDocTitle } from '../../utilities/formatDocTitle.js'
 export {
   type EntityToGroup,
   EntityType,
-  type Group,
   groupNavItems,
+  type NavGroupType,
 } from '../../utilities/groupNavItems.js'
 export { handleBackToDashboard } from '../../utilities/handleBackToDashboard.js'
 export { handleGoBack } from '../../utilities/handleGoBack.js'

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

@@ -4,6 +4,7 @@ import React, { createContext, useCallback, useContext, useEffect, useRef } from
 
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
+import { deepMergeSimple } from '../../utilities/deepMerge.js'
 import { useAuth } from '../Auth/index.js'
 import { useConfig } from '../Config/index.js'
 
@@ -90,14 +91,15 @@ export const PreferencesProvider: React.FC<{ children?: React.ReactNode }> = ({
 
       let newValue = value
       const currentPreference = await getPreference(key)
+
       // handle value objects where multiple values can be set under one key
       if (
         typeof value === 'object' &&
         typeof currentPreference === 'object' &&
         typeof newValue === 'object'
       ) {
         // merge the value with any existing preference for the key
-        newValue = { ...(currentPreference || {}), ...value }
+        newValue = deepMergeSimple(currentPreference, newValue)
 
         if (dequal(newValue, currentPreference)) {
           return