add navigation to the chapter page

Author: ceolinwill

src/components/ChapterDetails.tsx

@@ -27,7 +27,9 @@ const ChapterDetails = ({ completed, data }: ChapterDetailsProps) => {
           <ItemActionsMenu />
         </div>
         <ItemProgress progress={completed} />
-        <Typography variant="body1">{description}</Typography>
+        <Typography variant="body1" gutterBottom>
+          {description}
+        </Typography>
       </CardContent>
     </Card>
   );

src/components/ChapterNav.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import NextLink from 'next/link';
+import { Button } from '@material-ui/core';
+import { ArrowBack, ArrowForward } from '@material-ui/icons';
+import { getChapterNavigation } from '@zoonk/services';
+import useTranslation from './useTranslation';
+
+interface ChapterNavProps {
+  chapterId: string;
+  topicId: string;
+}
+
+const ChapterNav = ({ chapterId, topicId }: ChapterNavProps) => {
+  const translate = useTranslation();
+  const [previous, setPrevious] = useState<string | null>(null);
+  const [next, setNext] = useState<string | null>(null);
+
+  useEffect(() => {
+    getChapterNavigation(chapterId, topicId).then((res) => {
+      setPrevious(res.previous);
+      setNext(res.next);
+    });
+  }, [chapterId, topicId]);
+
+  if (!previous && !next) return null;
+
+  return (
+    <nav style={{ display: 'flex', alignItems: 'center' }}>
+      {previous && (
+        <NextLink href="/chapters/[id]" as={`/chapters/${previous}`} passHref>
+          <Button
+            color="primary"
+            variant="outlined"
+            startIcon={<ArrowBack style={{ margin: 0 }} />}
+            component="a"
+          >
+            {translate('previous')}
+          </Button>
+        </NextLink>
+      )}
+      <div style={{ flexGrow: 1 }} />
+      {next && (
+        <NextLink href="/chapters/[id]" as={`/chapters/${next}`} passHref>
+          <Button
+            color="primary"
+            variant="outlined"
+            endIcon={<ArrowForward style={{ margin: 0 }} />}
+            component="a"
+          >
+            {translate('next')}
+          </Button>
+        </NextLink>
+      )}
+    </nav>
+  );
+};
+
+export default ChapterNav;

src/pages/chapters/[id]/index.tsx

@@ -2,6 +2,7 @@ import { NextPage } from 'next';
 import Error from 'next/error';
 import { Container, Grid } from '@material-ui/core';
 import ChapterDetails from '@zoonk/components/ChapterDetails';
+import ChapterNav from '@zoonk/components/ChapterNav';
 import LessonsCard from '@zoonk/components/LessonsCard';
 import Meta from '@zoonk/components/Meta';
 import TopicsBreadcrumb from '@zoonk/components/TopicsBreadcrumb';
@@ -64,6 +65,9 @@ const ChapterPage: NextPage<ChapterProps> = ({ data }) => {
             progress={progress}
           />
         </Grid>
+        <Grid item xs={12}>
+          <ChapterNav chapterId={id} topicId={topics[0]} />
+        </Grid>
       </Grid>
     </Container>
   );

src/services/chapters.ts

@@ -1,7 +1,7 @@
 import { db, timestamp } from '@zoonk/firebase/db';
 import { Chapter, Profile } from '@zoonk/models';
 import { generateRandomSlug, logEdit } from '@zoonk/utils';
-import { updateTopic } from './topics';
+import { getTopic, updateTopic } from './topics';
 import { serializeChapter } from '../serializers';
 
 const chapterConverter: firebase.firestore.FirestoreDataConverter<Chapter.Get> = {
@@ -93,3 +93,41 @@ export const deleteChapter = async (
   await updateChapter(update, id);
   return db.doc(`chapters/${id}`).delete();
 };
+
+export const getNextChapter = async (
+  current: string,
+  topicId: string,
+): Promise<string | null> => {
+  const topic = await getTopic(topicId);
+  if (!topic) return null;
+
+  const { chapters } = topic;
+  const chapterOrder = chapters.findIndex((chapter) => chapter === current);
+  const nextChapter = chapterOrder + 1;
+
+  // If there's another chapter after the current one, then use its ID.
+  return chapters[nextChapter] || null;
+};
+
+interface ChapterNav {
+  next: string | null;
+  previous: string | null;
+}
+
+export const getChapterNavigation = async (
+  current: string,
+  topicId: string,
+): Promise<ChapterNav> => {
+  const topic = await getTopic(topicId);
+  if (!topic) return { next: null, previous: null };
+
+  const { chapters } = topic;
+  const chapterOrder = chapters.findIndex((chapter) => chapter === current);
+  const previousChapter = chapterOrder - 1;
+  const nextChapter = chapterOrder + 1;
+
+  return {
+    next: chapters[nextChapter] || null,
+    previous: chapters[previousChapter] || null,
+  };
+};