diff --git a/src/admin/components/views/collections/Revisions/index.tsx b/src/admin/components/views/collections/Revisions/index.tsx index 46aa870c98..0f396fdfb3 100644 --- a/src/admin/components/views/collections/Revisions/index.tsx +++ b/src/admin/components/views/collections/Revisions/index.tsx @@ -1,17 +1,24 @@ import { useConfig } from '@payloadcms/config-provider'; -import React from 'react'; +import React, { useEffect } from 'react'; import { useRouteMatch } from 'react-router-dom'; import usePayloadAPI from '../../../../hooks/usePayloadAPI'; +import Eyebrow from '../../../elements/Eyebrow'; import Loading from '../../../elements/Loading'; +import { useStepNav } from '../../../elements/StepNav'; +import { StepNavItem } from '../../../elements/StepNav/types'; +import Meta from '../../../utilities/Meta'; import { Props } from './types'; const baseClass = 'revisions'; const Revisions: React.FC = ({ collection }) => { - const { serverURL } = useConfig(); + const { serverURL, routes: { admin } } = useConfig(); + const { setStepNav } = useStepNav(); const { params: { id } } = useRouteMatch<{ id: string }>(); - const [{ data, isLoading }] = usePayloadAPI(`${serverURL}/api/${collection.slug}/revisions`, { + const [{ data: doc }] = usePayloadAPI(`${serverURL}/api/${collection.slug}/${id}`); + + const [{ data: revisionsData, isLoading: isLoadingRevisions }] = usePayloadAPI(`${serverURL}/api/${collection.slug}/revisions`, { initialParams: { where: { parent: { @@ -21,15 +28,40 @@ const Revisions: React.FC = ({ collection }) => { }, }); + useEffect(() => { + const nav: StepNavItem[] = [ + { + url: `${admin}/collections/${collection.slug}`, + label: collection.labels.plural, + }, + { + label: doc ? doc[collection.admin.useAsTitle || 'id'] : '', + url: `${admin}/collections/${collection.slug}/${id}`, + }, + { + label: 'Revisions', + }, + ]; + + setStepNav(nav); + }, [setStepNav, collection, doc, admin, id]); + return (
- {isLoading && ( + + + + {isLoadingRevisions && ( )} - {data?.docs && ( + {revisionsData?.docs && (

Revisions

- {data?.docs?.length} + {revisionsData?.docs?.length}
)}