chore: resolves ts errors in views (#3453)

packages/payload/src/admin/components/elements/DocumentControls/index.tsx

@@ -32,7 +32,7 @@ export const DocumentControls: React.FC<{
   id?: string
   isAccountView?: boolean
   isEditing?: boolean
-  permissions?: CollectionPermission | GlobalPermission
+  permissions?: CollectionPermission | GlobalPermission | null
 }> = (props) => {
   const {
     id,

packages/payload/src/admin/components/elements/DocumentDrawer/DrawerContent.tsx

@@ -97,7 +97,7 @@ const Content: React.FC<DocumentDrawerProps> = ({
 
     awaitInitialState()
     hasInitializedState.current = true
-  }, [data, fields, id, user, locale, isLoadingDocument, t, getDocPreferences])
+  }, [data, fields, id, user, locale, isLoadingDocument, t, getDocPreferences, config])
 
   useEffect(() => {
     setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))

packages/payload/src/admin/components/forms/Form/buildStateFromSchema/index.ts

@@ -10,7 +10,7 @@ import { iterateFields } from './iterateFields'
 type Args = {
   config: SanitizedConfig
   data?: Data
-  fieldSchema: FieldSchema[]
+  fieldSchema: FieldSchema[] | undefined
   id?: number | string
   locale: string
   operation?: 'create' | 'update'
@@ -19,7 +19,7 @@ type Args = {
   }
   siblingData?: Data
   t: TFunction
-  user?: User
+  user?: User | null
 }
 
 const buildStateFromSchema = async (args: Args): Promise<Fields> => {

packages/payload/src/admin/components/utilities/Locale/index.tsx

@@ -8,7 +8,7 @@ import { useConfig } from '../Config'
 import { usePreferences } from '../Preferences'
 import { useSearchParams } from '../SearchParams'
 
-const LocaleContext = createContext(null)
+const LocaleContext = createContext({} as Locale)
 
 export const LocaleProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const { localization } = useConfig()
@@ -65,5 +65,6 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode }> = ({ child
 /**
  * A hook that returns the current locale object.
  */
-export const useLocale = (): Locale | null => useContext(LocaleContext)
+export const useLocale = (): Locale => useContext(LocaleContext)
+
 export default LocaleContext

packages/payload/src/admin/components/utilities/OperationProvider/index.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-export const OperationContext = createContext(undefined)
+export const OperationContext = createContext('' as Operation)
 
 export type Operation = 'create' | 'update'
 

packages/payload/src/admin/components/utilities/RenderCustomComponent/types.ts

@@ -1,7 +1,7 @@
 import type React from 'react'
 
 export type Props = {
-  CustomComponent: React.ComponentType<any>
+  CustomComponent?: React.ComponentType<any>
   DefaultComponent: React.ComponentType<any>
   componentProps?: Record<string, unknown>
 }

packages/payload/src/admin/components/views/Account/Default.tsx

@@ -41,10 +41,12 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
   const { refreshCookieAsync } = useAuth()
   const { i18n, t } = useTranslation('authentication')
 
-  const languageOptions = Object.entries(i18n.options.resources).map(([language, resource]) => ({
+  const languageOptions = Object.entries(i18n.options.resources || {}).map(
+    ([language, resource]) => ({
       label: (resource as Translation).general.thisLanguage,
       value: language,
-  }))
+    }),
+  )
 
   const onSave = useCallback(async () => {
     await refreshCookieAsync()
@@ -101,7 +103,7 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
                       fieldSchema={fields}
                       fieldTypes={fieldTypes}
                       filter={(field) => field?.admin?.position !== 'sidebar'}
-                      permissions={permissions.fields}
+                      permissions={permissions?.fields}
                       readOnly={!hasSavePermission}
                     />
                   </Gutter>
@@ -128,7 +130,7 @@ const DefaultAccount: React.FC<CollectionEditViewProps> = (props) => {
                         fieldSchema={fields}
                         fieldTypes={fieldTypes}
                         filter={(field) => field?.admin?.position === 'sidebar'}
-                        permissions={permissions.fields}
+                        permissions={permissions?.fields}
                         readOnly={!hasSavePermission}
                       />
                     </div>

packages/payload/src/admin/components/views/Account/index.tsx

@@ -25,6 +25,7 @@ const AccountView: React.FC = () => {
   const { id, docPermissions, getDocPermissions, getDocPreferences, preferencesKey, slug } =
     useDocumentInfo()
   const { getPreference } = usePreferences()
+
   const config = useConfig()
 
   const {
@@ -44,7 +45,7 @@ const AccountView: React.FC = () => {
 
   const collection = collections.find((coll) => coll.slug === slug)
 
-  const { fields } = collection
+  const { fields } = collection || {}
 
   const [{ data, isLoading: isLoadingData }] = usePayloadAPI(`${serverURL}${api}/${slug}/${id}`, {
     initialData: null,
@@ -63,12 +64,14 @@ const AccountView: React.FC = () => {
   const onSave = React.useCallback(
     async (json: any) => {
       getDocPermissions()
+
       const preferences = await getDocPreferences()
+
       const state = await buildStateFromSchema({
         id,
         config,
         data: json.doc,
-        fieldSchema: collection.fields,
+        fieldSchema: collection?.fields,
         locale,
         operation: 'update',
         preferences,
@@ -77,7 +80,7 @@ const AccountView: React.FC = () => {
       })
       setInternalState(state)
     },
-    [collection, user, id, t, locale, getDocPermissions, getDocPreferences],
+    [collection, user, id, t, locale, getDocPermissions, getDocPreferences, config],
   )
 
   useEffect(() => {
@@ -106,12 +109,25 @@ const AccountView: React.FC = () => {
         user: userRef.current,
       })
 
+      if (preferencesKey) {
         await getPreference(preferencesKey)
+      }
+
       setInternalState(state)
     }
 
     if (dataToRender) awaitInternalState()
-  }, [dataToRender, fields, id, locale, preferencesKey, getPreference, t, getDocPreferences])
+  }, [
+    dataToRender,
+    fields,
+    id,
+    locale,
+    preferencesKey,
+    getPreference,
+    t,
+    getDocPreferences,
+    config,
+  ])
 
   const isLoading = !internalState || !docPermissions || isLoadingData
 

packages/payload/src/admin/components/views/Dashboard/index.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
+import type { SanitizedGlobalConfig } from '../../../../exports/types'
+
 import { useStepNav } from '../../elements/StepNav'
 import { useAuth } from '../../utilities/Auth'
 import { useConfig } from '../../utilities/Config'
@@ -9,7 +11,7 @@ import DefaultDashboard from './Default'
 const Dashboard: React.FC = () => {
   const { permissions, user } = useAuth()
   const { setStepNav } = useStepNav()
-  const [filteredGlobals, setFilteredGlobals] = useState([])
+  const [filteredGlobals, setFilteredGlobals] = useState<SanitizedGlobalConfig[]>([])
 
   const {
     admin: {

packages/payload/src/admin/components/views/Global/index.tsx

@@ -43,7 +43,9 @@ const GlobalView: React.FC<IndexProps> = (props) => {
       getVersions()
       getDocPermissions()
       setUpdatedAt(json?.result?.updatedAt)
+
       const preferences = await getDocPreferences()
+
       const state = await buildStateFromSchema({
         config,
         data: json.result,
@@ -56,7 +58,7 @@ const GlobalView: React.FC<IndexProps> = (props) => {
       })
       setInitialState(state)
     },
-    [getVersions, fields, user, locale, t, getDocPermissions, getDocPreferences],
+    [getVersions, fields, user, locale, t, getDocPermissions, getDocPreferences, config],
   )
 
   const [{ data, isLoading: isLoadingData }] = usePayloadAPI(`${serverURL}${api}/globals/${slug}`, {
@@ -79,12 +81,26 @@ const GlobalView: React.FC<IndexProps> = (props) => {
         t,
         user,
       })
+
+      if (preferencesKey) {
         await getPreference(preferencesKey)
+      }
+
       setInitialState(state)
     }
 
     if (dataToRender) awaitInitialState()
-  }, [dataToRender, fields, user, locale, getPreference, preferencesKey, t, getDocPreferences])
+  }, [
+    dataToRender,
+    fields,
+    user,
+    locale,
+    getPreference,
+    preferencesKey,
+    t,
+    getDocPreferences,
+    config,
+  ])
 
   const isLoading = !initialState || !docPermissions || isLoadingData
 

packages/payload/src/admin/components/views/LivePreview/DeviceContainer/index.tsx

@@ -9,7 +9,7 @@ export const DeviceContainer: React.FC<{
 
   const { breakpoint, breakpoints, deviceFrameRef, size, zoom } = useLivePreviewContext()
 
-  const foundBreakpoint = breakpoint && breakpoints.find((bp) => bp.name === breakpoint)
+  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)
 
   let x = '0'
   let margin = '0'

packages/payload/src/admin/components/views/Login/index.tsx

@@ -70,7 +70,7 @@ const Login: React.FC = () => {
             <Logo />
           </div>
           {Array.isArray(beforeLogin) && beforeLogin.map((Component, i) => <Component key={i} />)}
-          {!collection.auth.disableLocalStrategy && (
+          {!collection?.auth?.disableLocalStrategy && (
             <Form
               action={`${serverURL}${api}/${userSlug}/login`}
               className={`${baseClass}__form`}

packages/payload/src/admin/components/views/Routes/collections.tsx

@@ -12,7 +12,6 @@ import List from '../collections/List'
 
 // @ts-expect-error Just TypeScript being broken // TODO: Open TypeScript issue
 const Edit = lazy(() => import('../collections/Edit'))
-
 // @ts-expect-error Just TypeScript being broken // TODO: Open TypeScript issue
 const Unauthorized = lazy(() => import('../Unauthorized'))
 

packages/payload/src/admin/components/views/Routes/custom.tsx

@@ -5,10 +5,10 @@ import type { User } from '../../../../auth'
 import type { SanitizedConfig } from '../../../../exports/config'
 
 export const customRoutes = (props: {
-  canAccessAdmin: boolean
+  canAccessAdmin?: boolean
-  customRoutes: SanitizedConfig['admin']['components']['routes']
+  customRoutes?: SanitizedConfig['admin']['components']['routes']
   match: { url: string }
-  user: User
+  user: User | null | undefined
 }) => {
   const { canAccessAdmin, customRoutes, match, user } = props
 

packages/payload/src/admin/components/views/Routes/globals.tsx

@@ -11,7 +11,6 @@ import { DocumentInfoProvider } from '../../utilities/DocumentInfo'
 
 // @ts-expect-error Just TypeScript being broken // TODO: Open TypeScript issue
 const EditGlobal = lazy(() => import('../Global'))
-
 // @ts-expect-error Just TypeScript being broken // TODO: Open TypeScript issue
 const Unauthorized = lazy(() => import('../Unauthorized'))
 

packages/payload/src/admin/components/views/Routes/index.tsx

@@ -34,7 +34,7 @@ const ResetPassword = lazy(() => import('../ResetPassword'))
 const Account = lazy(() => import('../Account'))
 
 export const Routes: React.FC = () => {
-  const [initialized, setInitialized] = useState(null)
+  const [initialized, setInitialized] = useState<boolean | null>(null)
   const { permissions, refreshCookie, user } = useAuth()
   const { i18n } = useTranslation()
   const { code: locale } = useLocale()
@@ -62,9 +62,9 @@ export const Routes: React.FC = () => {
   const userCollection = collections.find(({ slug }) => slug === userSlug)
 
   useEffect(() => {
+    if (userCollection && !userCollection?.auth?.disableLocalStrategy) {
       const { slug } = userCollection
 
-    if (!userCollection.auth.disableLocalStrategy) {
       requests
         .get(`${routes.api}/${slug}/init`, {
           headers: {
@@ -123,12 +123,12 @@ export const Routes: React.FC = () => {
                 <Route path={`${match.url}${logoutInactivityRoute}`}>
                   <Logout inactivity />
                 </Route>
-                {!userCollection.auth.disableLocalStrategy && (
+                {!userCollection?.auth?.disableLocalStrategy && (
                   <Route path={`${match.url}/forgot`}>
                     <ForgotPassword />
                   </Route>
                 )}
-                {!userCollection.auth.disableLocalStrategy && (
+                {!userCollection?.auth?.disableLocalStrategy && (
                   <Route path={`${match.url}/reset/:token`}>
                     <ResetPassword />
                   </Route>

packages/payload/src/admin/components/views/Verify/index.tsx

@@ -28,7 +28,7 @@ const Verify: React.FC<{ collection: SanitizedCollectionConfig }> = ({ collectio
   const { i18n, t } = useTranslation('authentication')
 
   const isAdminUser = collectionSlug === adminUser
-  const [verifyResult, setVerifyResult] = useState(null)
+  const [verifyResult, setVerifyResult] = useState<Response | null>(null)
 
   useEffect(() => {
     async function verifyToken() {

packages/payload/src/admin/components/views/collections/Edit/formatFields.tsx

@@ -3,7 +3,7 @@ import type { Field } from '../../../../../fields/config/types'
 
 import { fieldAffectsData } from '../../../../../fields/config/types'
 
-const formatFields = (collection: SanitizedCollectionConfig, isEditing: boolean): Field[] =>
+const formatFields = (collection: SanitizedCollectionConfig, isEditing?: boolean): Field[] =>
   isEditing
     ? collection.fields.filter((field) => (fieldAffectsData(field) && field.name !== 'id') || true)
     : collection.fields

packages/payload/src/admin/components/views/collections/Edit/index.tsx

@@ -47,7 +47,7 @@ const EditView: React.FC<IndexProps> = (props) => {
   const { t } = useTranslation('general')
 
   const [{ data, isError, isLoading: isLoadingData }] = usePayloadAPI(
-    isEditing ? `${serverURL}${api}/${collectionSlug}/${id}` : null,
+    isEditing ? `${serverURL}${api}/${collectionSlug}/${id}` : '',
     { initialData: null, initialParams: { depth: 0, draft: 'true', 'fallback-locale': 'null' } },
   )
 
@@ -59,7 +59,7 @@ const EditView: React.FC<IndexProps> = (props) => {
         id,
         config,
         data: doc || {},
-        fieldSchema: overrides.fieldSchema,
+        fieldSchema: overrides?.fieldSchema,
         locale,
         operation: 'update',
         preferences,
@@ -70,7 +70,7 @@ const EditView: React.FC<IndexProps> = (props) => {
 
       setInternalState(state)
     },
-    [getDocPreferences, id, locale, t],
+    [getDocPreferences, id, locale, t, config],
   )
 
   const onSave = useCallback(

packages/payload/src/admin/components/views/types.ts

@@ -9,29 +9,29 @@ export type CollectionEditViewProps = BaseEditViewProps & {
   collection: SanitizedCollectionConfig
   disableActions?: boolean
   disableLeaveWithoutSaving?: boolean
-  hasSavePermission: boolean
+  hasSavePermission?: boolean
   id: string
   initialState?: Fields
-  internalState: Fields
+  internalState?: Fields
-  isEditing: boolean
+  isEditing?: boolean
-  permissions: CollectionPermission
+  permissions: CollectionPermission | null
 }
 
 export type GlobalEditViewProps = BaseEditViewProps & {
   global: SanitizedGlobalConfig
-  initialState: Fields
+  initialState?: Fields
-  permissions: GlobalPermission
+  permissions: GlobalPermission | null
 }
 
 export type BaseEditViewProps = {
   action: string
   apiURL: string
-  canAccessAdmin: boolean
+  canAccessAdmin?: boolean
   data: any
   isLoading: boolean
   onSave: (json: any) => void
   updatedAt: string
-  user: User
+  user: User | null | undefined
 }
 
 export type EditViewProps = CollectionEditViewProps | GlobalEditViewProps

packages/payload/src/config/types.ts

@@ -7,9 +7,9 @@ import type SMTPConnection from 'nodemailer/lib/smtp-connection'
 import type { DestinationStream, LoggerOptions } from 'pino'
 import type React from 'react'
 import type { DeepRequired } from 'ts-essentials'
-import type { Configuration } from 'webpack'
 // @ts-expect-error
 import type { InlineConfig } from 'vite'
+import type { Configuration } from 'webpack'
 
 import type { DocumentTab } from '../admin/components/elements/DocumentHeader/Tabs/types'
 import type { RichTextAdapter } from '../admin/components/forms/field-types/RichText/types'
@@ -114,16 +114,16 @@ export type InitOptions = {
    */
   config?: Promise<SanitizedConfig>
 
-  /**
-   * Disable running of the `onInit` function
-   */
-  disableOnInit?: boolean
-
   /**
    * Disable connect to the database on init
    */
   disableDBConnect?: boolean
 
+  /**
+   * Disable running of the `onInit` function
+   */
+  disableOnInit?: boolean
+
   /**
    * Configuration for Payload's email functionality
    *
@@ -230,10 +230,10 @@ export type Endpoint = {
 }
 
 export type CustomAdminView = React.ComponentType<{
-  canAccessAdmin: boolean
+  canAccessAdmin?: boolean
   collection?: SanitizedCollectionConfig
   global?: SanitizedGlobalConfig
-  user: User
+  user: User | null | undefined
 }>
 
 export type EditViewConfig = {
@@ -460,10 +460,10 @@ export type Config = {
     }
     /** The slug of a Collection that you want be used to log in to the Admin dashboard. */
     user?: string
-    /** Customize the Webpack config that's used to generate the Admin panel. */
-    webpack?: (config: Configuration) => Configuration
     /** Customize the Vite config that's used to generate the Admin panel. */
     vite?: (config: InlineConfig) => InlineConfig
+    /** Customize the Webpack config that's used to generate the Admin panel. */
+    webpack?: (config: Configuration) => Configuration
   }
   /**
    * Manage the datamodel of your application

packages/richtext-lexical/src/field/features/Link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -189,7 +189,7 @@ export function LinkEditor({
     }
 
     return true
-  }, [anchorElem, editor, fieldSchema])
+  }, [anchorElem, editor, fieldSchema, config, getDocPreferences, locale, t, user, i18n])
 
   useEffect(() => {
     return mergeRegister(

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -124,7 +124,7 @@ export const LinkElement: React.FC<{
     }
 
     awaitInitialState()
-  }, [renderModal, element, fieldSchema, user, locale, t, getDocPreferences])
+  }, [renderModal, element, fieldSchema, user, locale, t, getDocPreferences, config])
 
   return (
     <span className={baseClass} {...attributes}>