display breadcrumb on post edit page (closes #31)

Author: ceolinwill

src/components/BackButton.tsx

@@ -5,10 +5,10 @@ import { CircularProgress, IconButton } from '@material-ui/core';
 import { Delete } from '@material-ui/icons';
 import { Post } from '@zoonk/models';
 import { deletePost, getPost } from '@zoonk/services';
-import BackButton from './BackButton';
 import EditNotAllowed from './EditNotAllowed';
 import LoginForm from './LoginForm';
 import PostEditForm from './PostEditForm';
+import PostsBreadcrumb from './PostsBreadcrumb';
 import useAuth from './useAuth';
 import useSnackbar from './useSnackbar';
 import useTranslation from './useTranslation';
@@ -42,11 +42,12 @@ const PostEdit = ({ id }: PostEditProps) => {
   if (data === undefined || user === undefined) return <CircularProgress />;
   if (!canEdit) return <EditNotAllowed />;
 
+  const { chapterId, chapterData, groupId, groupData, title, topics } = data;
+
   const handleDelete = () => {
     if (profile && window.confirm(translate('post_delete_confirmation'))) {
       snackbar('progress', translate('deleting'));
 
-      const { chapterId, topics } = data;
       const linkPath = chapterId ? '/chapters/[id]' : '/topics/[id]';
       const linkAs = chapterId
         ? `/chapters/${chapterId}`
@@ -70,7 +71,16 @@ const PostEdit = ({ id }: PostEditProps) => {
           alignItems: 'center',
         }}
       >
-        <BackButton />
+        <PostsBreadcrumb
+          chapterId={chapterId}
+          chapterName={chapterData?.title}
+          groupId={groupId}
+          groupName={groupData?.title}
+          postId={id}
+          postTitle={title}
+          title={translate('edit')}
+          topicId={topics[0]}
+        />
         {canDelete && (
           <IconButton
             color="secondary"

src/components/PostEdit.tsx

@@ -3,13 +3,16 @@ import { theme } from '@zoonk/utils';
 import LinkChapter from './LinkChapter';
 import LinkGroup from './LinkGroup';
 import LinkHome from './LinkHome';
+import LinkPost from './LinkPost';
 import LinkTopic from './LinkTopic';
 
 interface PostsBreadcrumbProps {
   chapterId?: string | null;
   chapterName?: string;
   groupId?: string | null;
   groupName?: string;
+  postId?: string;
+  postTitle?: string;
   title?: string;
   topicId?: string;
 }
@@ -19,6 +22,8 @@ const PostsBreadcrumb = ({
   chapterName,
   groupId,
   groupName,
+  postId,
+  postTitle,
   title,
   topicId,
 }: PostsBreadcrumbProps) => {
@@ -29,6 +34,7 @@ const PostsBreadcrumb = ({
         {topicId && <LinkTopic id={topicId} />}
         {chapterId && <LinkChapter id={chapterId} title={chapterName} />}
         {groupId && <LinkGroup id={groupId} title={groupName} />}
+        {postId && postTitle && <LinkPost id={postId} title={postTitle} />}
         {title && <Typography color="textPrimary">{title}</Typography>}
       </Breadcrumbs>
     </Paper>

src/components/PostsBreadcrumb.tsx

@@ -1,18 +1,19 @@
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
+import Error from 'next/error';
 import { useRouter } from 'next/router';
 import { CircularProgress, Container } from '@material-ui/core';
-import BackButton from '@zoonk/components/BackButton';
 import EditsList from '@zoonk/components/EditsList';
 import Meta from '@zoonk/components/Meta';
+import PostsBreadcrumb from '@zoonk/components/PostsBreadcrumb';
 import useTranslation from '@zoonk/components/useTranslation';
-import { Activity } from '@zoonk/models';
-import { getActivities } from '@zoonk/services';
+import { Activity, Post } from '@zoonk/models';
+import { getActivities, getPost } from '@zoonk/services';
 
 const limit = 10;
 
 interface PostEditsProps {
-  postId: string;
-  data: Activity.Get[];
+  edits: Activity.Get[];
+  post: Post.Get | null;
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
@@ -23,24 +24,46 @@ export const getStaticProps: GetStaticProps<PostEditsProps> = async ({
   params,
 }) => {
   const postId = String(params?.id);
-  const data = await getActivities(limit, `posts/${postId}`);
-  return { props: { postId, data }, unstable_revalidate: 1 };
+  const editsReq = getActivities(limit, `posts/${postId}`);
+  const postReq = getPost(postId);
+  const [edits, post] = await Promise.all([editsReq, postReq]);
+  return { props: { edits, post }, unstable_revalidate: 1 };
 };
 
 const PostEdits = ({
-  postId,
-  data,
+  edits,
+  post,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const translate = useTranslation();
   const { isFallback } = useRouter();
 
   if (isFallback) return <CircularProgress />;
+  if (!post) return <Error statusCode={404} />;
+
+  const {
+    chapterId,
+    chapterData,
+    groupId,
+    groupData,
+    id,
+    title,
+    topics,
+  } = post;
 
   return (
     <Container component="main">
       <Meta title={translate('page_edits')} noIndex />
-      <BackButton />
-      <EditsList data={data} itemPath={`posts/${postId}`} limit={limit} />
+      <PostsBreadcrumb
+        chapterId={chapterId}
+        chapterName={chapterData?.title}
+        groupId={groupId}
+        groupName={groupData?.title}
+        postId={id}
+        postTitle={title}
+        title={translate('page_edits')}
+        topicId={topics[0]}
+      />
+      <EditsList data={edits} itemPath={`posts/${id}`} limit={limit} />
     </Container>
   );
 };