Merge pull request #1456 from jacobsfletch/fix/reactive-stepnav

fix: dynamically sets stepnav from default edit view

src/admin/components/views/collections/Edit/Default.tsx

@@ -28,6 +28,7 @@ import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { OperationContext } from '../../../utilities/OperationProvider';
 import { Gutter } from '../../../elements/Gutter';
 import { getTranslation } from '../../../../../utilities/getTranslation';
+import { SetStepNav } from './SetStepNav';
 
 import './index.scss';
 
@@ -93,6 +94,11 @@ const DefaultEditView: React.FC<Props> = (props) => {
             disabled={!hasSavePermission}
             initialState={initialState}
           >
+            <SetStepNav
+              collection={collection}
+              isEditing={isEditing}
+              id={data.id}
+            />
             <div className={`${baseClass}__main`}>
               <Meta
                 title={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(collection.labels.singular, i18n)}`}

src/admin/components/views/collections/Edit/SetStepNav.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { getTranslation } from '../../../../../utilities/getTranslation';
+import useTitle from '../../../../hooks/useTitle';
+import { useStepNav } from '../../../elements/StepNav';
+import { StepNavItem } from '../../../elements/StepNav/types';
+import { useConfig } from '../../../utilities/Config';
+
+export const SetStepNav: React.FC<{
+  collection: SanitizedCollectionConfig
+  isEditing: boolean
+  id: string
+}> = ({ collection, isEditing, id }) => {
+  const {
+    slug,
+    labels: {
+      plural: pluralLabel,
+    },
+    admin: {
+      useAsTitle,
+    },
+  } = collection;
+
+  const { setStepNav } = useStepNav();
+  const { t, i18n } = useTranslation('general');
+  const { routes: { admin } } = useConfig();
+
+  const title = useTitle(useAsTitle);
+
+  useEffect(() => {
+    const nav: StepNavItem[] = [{
+      url: `${admin}/collections/${slug}`,
+      label: getTranslation(pluralLabel, i18n),
+    }];
+
+    if (isEditing) {
+      nav.push({
+        label: (useAsTitle && useAsTitle !== 'id') ? title || `[${t('untitled')}]` : id,
+      });
+    } else {
+      nav.push({
+        label: t('createNew'),
+      });
+    }
+
+    setStepNav(nav);
+  }, [setStepNav, isEditing, pluralLabel, id, slug, useAsTitle, admin, t, i18n, title]);
+
+  return null;
+};

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

@@ -3,7 +3,6 @@ import { Redirect, useRouteMatch, useHistory, useLocation } from 'react-router-d
 import { useTranslation } from 'react-i18next';
 import { useConfig } from '../../../utilities/Config';
 import { useAuth } from '../../../utilities/Auth';
-import { useStepNav } from '../../../elements/StepNav';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
 
 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
@@ -12,23 +11,17 @@ import formatFields from './formatFields';
 import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
 import { useLocale } from '../../../utilities/Locale';
 import { IndexProps } from './types';
-import { StepNavItem } from '../../../elements/StepNav/types';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { Fields } from '../../../forms/Form/types';
 import { usePreferences } from '../../../utilities/Preferences';
 import { EditDepthContext } from '../../../utilities/EditDepth';
-import { getTranslation } from '../../../../../utilities/getTranslation';
 
 const EditView: React.FC<IndexProps> = (props) => {
   const { collection: incomingCollection, isEditing } = props;
 
   const {
     slug,
-    labels: {
-      plural: pluralLabel,
-    },
     admin: {
-      useAsTitle,
       components: {
         views: {
           Edit: CustomEdit,
@@ -46,12 +39,11 @@ const EditView: React.FC<IndexProps> = (props) => {
   const { params: { id } = {} } = useRouteMatch<Record<string, string>>();
   const { state: locationState } = useLocation();
   const history = useHistory();
-  const { setStepNav } = useStepNav();
   const [initialState, setInitialState] = useState<Fields>();
   const { permissions, user } = useAuth();
   const { getVersions, preferencesKey } = useDocumentInfo();
   const { getPreference } = usePreferences();
-  const { t, i18n } = useTranslation('general');
+  const { t } = useTranslation('general');
 
   const onSave = useCallback(async (json: any) => {
     getVersions();
@@ -70,39 +62,6 @@ const EditView: React.FC<IndexProps> = (props) => {
 
   const dataToRender = (locationState as Record<string, unknown>)?.data || data;
 
-  useEffect(() => {
-    const nav: StepNavItem[] = [{
-      url: `${admin}/collections/${slug}`,
-      label: getTranslation(pluralLabel, i18n),
-    }];
-
-    if (isEditing) {
-      let label = '';
-
-      if (dataToRender) {
-        if (useAsTitle) {
-          if (dataToRender[useAsTitle]) {
-            label = dataToRender[useAsTitle];
-          } else {
-            label = `[${t('untitled')}]`;
-          }
-        } else {
-          label = dataToRender.id;
-        }
-      }
-
-      nav.push({
-        label,
-      });
-    } else {
-      nav.push({
-        label: t('createNew'),
-      });
-    }
-
-    setStepNav(nav);
-  }, [setStepNav, isEditing, pluralLabel, dataToRender, slug, useAsTitle, admin, t, i18n]);
-
   useEffect(() => {
     if (isLoadingDocument) {
       return;