display post completed status for lessons

Author: ceolinwill

src/components/LessonList.tsx

@@ -1,15 +1,15 @@
 import { List } from '@material-ui/core';
-import { Post } from '@zoonk/models';
+import { ChapterProgress, Post } from '@zoonk/models';
+import { getLessonStatus } from '@zoonk/utils';
 import LessonListItem from './LessonListItem';
 
 interface LessonListProps {
+  category: keyof ChapterProgress.Response;
   items: Post.Summary[];
+  progress?: ChapterProgress.Response;
 }
 
-/**
- * Display a list of lessons.
- */
-const LessonList = ({ items }: LessonListProps) => {
+const LessonList = ({ category, items, progress }: LessonListProps) => {
   return (
     <List disablePadding>
       {items.map((item, index) => (
@@ -18,6 +18,7 @@ const LessonList = ({ items }: LessonListProps) => {
           divider={index !== items.length - 1}
           index={index}
           item={item}
+          status={getLessonStatus(category, item.id, progress)}
         />
       ))}
     </List>

src/components/LessonListItem.tsx

@@ -4,22 +4,35 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  makeStyles,
 } from '@material-ui/core';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import { Post } from '@zoonk/models';
-import { theme } from '@zoonk/utils';
 
 interface LessonListItemProps {
   divider?: boolean;
   index: number;
   item: Post.Summary;
+  status: 'completed' | 'notStarted';
 }
 
-/**
- * Display a single lesson as a list item.
- */
-const LessonListItem = ({ divider, index, item }: LessonListItemProps) => {
+const useStyles = makeStyles((theme) => ({
+  notStarted: {
+    backgroundColor: 'white',
+    color: theme.palette.primary.main,
+    border: `1px solid ${theme.palette.primary.main}`,
+  },
+  completed: { backgroundColor: theme.palette.success.main },
+}));
+
+const LessonListItem = ({
+  divider,
+  index,
+  item,
+  status,
+}: LessonListItemProps) => {
+  const classes = useStyles();
   const { query } = useRouter();
   const { description, id, title } = item;
   const lessonId = String(query.id);
@@ -44,7 +57,7 @@ const LessonListItem = ({ divider, index, item }: LessonListItemProps) => {
         selected={lessonId === id}
       >
         <ListItemAvatar>
-          <Avatar style={{ backgroundColor: theme.palette.primary.main }}>
+          <Avatar variant="rounded" className={classes[status]}>
             {index + 1}
           </Avatar>
         </ListItemAvatar>

src/components/LessonsCard.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent } from '@material-ui/core';
-import { Post } from '@zoonk/models';
+import { ChapterProgress, Post } from '@zoonk/models';
 import LessonList from './LessonList';
 import LessonsHeader from './LessonsHeader';
 import NoLessons from './NoLessons';
@@ -8,16 +8,15 @@ interface LessonsCardProps {
   category: 'examples' | 'lessons';
   chapterId: string;
   lessons: Post.Summary[];
+  progress?: ChapterProgress.Response;
   topicId: string;
 }
 
-/**
- * Cards for display a list of lessons.
- */
 const LessonsCard = ({
   category,
   chapterId,
   lessons,
+  progress,
   topicId,
 }: LessonsCardProps) => {
   return (
@@ -31,7 +30,7 @@ const LessonsCard = ({
             topicId={topicId}
           />
         )}
-        <LessonList items={lessons} />
+        <LessonList category={category} items={lessons} progress={progress} />
       </CardContent>
     </Card>
   );

src/components/LessonsDrawer.tsx

@@ -1,11 +1,14 @@
 import { Fragment } from 'react';
 import { Button, Grid, makeStyles } from '@material-ui/core';
-import { Post } from '@zoonk/models';
+import { ChapterProgress, Post } from '@zoonk/models';
+import { getLessonStatus } from '@zoonk/utils';
 import LessonListItem from './LessonListItem';
 import useTranslation from './useTranslation';
 
 interface LessonDrawerProps {
+  category: keyof ChapterProgress.Response;
   lessons: Post.Summary[];
+  progress?: ChapterProgress.Response;
   onReturn: () => void;
 }
 
@@ -16,7 +19,12 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const LessonsDrawer = ({ lessons, onReturn }: LessonDrawerProps) => {
+const LessonsDrawer = ({
+  category,
+  lessons,
+  progress,
+  onReturn,
+}: LessonDrawerProps) => {
   const translate = useTranslation();
   const classes = useStyles();
 
@@ -35,7 +43,11 @@ const LessonsDrawer = ({ lessons, onReturn }: LessonDrawerProps) => {
       <Grid container spacing={2} className={classes.grid}>
         {lessons.map((lesson, index) => (
           <Grid item key={lesson.id} xs={12} sm={6}>
-            <LessonListItem item={lesson} index={index} />
+            <LessonListItem
+              item={lesson}
+              index={index}
+              status={getLessonStatus(category, lesson.id, progress)}
+            />
           </Grid>
         ))}
       </Grid>

src/components/PostBar.tsx

@@ -13,7 +13,7 @@ const PostBar = () => {
     <Fragment>
       <BottomBar>
         <PostBarActions id={id} likes={likes} />
-        {category === 'lessons' && chapterId && (
+        {(category === 'lessons' || category === 'examples') && chapterId && (
           <PostBarLessons
             category={category}
             postId={id}

src/components/PostBarLessons.tsx

@@ -2,15 +2,16 @@ import { Fragment, useEffect, useState } from 'react';
 import Router from 'next/router';
 import { Button, Drawer, Hidden, makeStyles } from '@material-ui/core';
 import { Apps } from '@material-ui/icons';
-import { Post } from '@zoonk/models';
+import { ChapterProgress, Post } from '@zoonk/models';
 import { getChapterLive } from '@zoonk/services';
 import LessonsDrawer from './LessonsDrawer';
 import NextLesson from './NextLesson';
 import PreviousLesson from './PreviousLesson';
+import useChapterProgress from './useChapterProgress';
 import useTranslation from './useTranslation';
 
 interface PostBarLessonsProps {
-  category: Post.Category;
+  category: keyof ChapterProgress.Response;
   chapterId: string;
   postId: string;
   topicId: string;
@@ -41,6 +42,7 @@ const PostBarLessons = ({
   topicId,
 }: PostBarLessonsProps) => {
   const classes = useStyles();
+  const { progress } = useChapterProgress({ chapterId });
   const [drawer, setDrawer] = useState<boolean>(false);
   const [lessons, setLessons] = useState<Post.Summary[]>([]);
   const translate = useTranslation();
@@ -85,7 +87,12 @@ const PostBarLessons = ({
       </div>
 
       <Drawer open={drawer} onClose={() => setDrawer(false)} anchor="bottom">
-        <LessonsDrawer lessons={lessons} onReturn={() => setDrawer(false)} />
+        <LessonsDrawer
+          category={category}
+          lessons={lessons}
+          progress={progress}
+          onReturn={() => setDrawer(false)}
+        />
       </Drawer>
     </Fragment>
   );

src/components/useChapterProgress.ts

@@ -4,23 +4,29 @@ import { getChapterProgress } from '@zoonk/services';
 import { getChapterCompleted } from '@zoonk/utils';
 import useAuth from './useAuth';
 
-interface useChapterProgressProps {
+interface ProgressResponse {
   completed: number;
   progress: ChapterProgress.Response | undefined;
 }
 
-const useChapterProgress = (
-  chapter: Chapter.Get | null,
-): useChapterProgressProps => {
+interface ProgressProps {
+  chapter?: Chapter.Get | null;
+  chapterId?: string;
+}
+
+const useChapterProgress = ({
+  chapter,
+  chapterId,
+}: ProgressProps): ProgressResponse => {
   const { user } = useAuth();
   const [progress, setProgress] = useState<ChapterProgress.Response>();
   const [completed, setCompleted] = useState<number>(0);
 
   useEffect(() => {
-    if (chapter?.id && user) {
-      getChapterProgress(chapter?.id, user.uid).then(setProgress);
+    if (chapterId && user) {
+      getChapterProgress(chapterId, user.uid).then(setProgress);
     }
-  }, [chapter, user]);
+  }, [chapterId, user]);
 
   useEffect(() => {
     if (chapter && progress) {

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

@@ -15,7 +15,10 @@ interface ChapterProps {
 }
 
 const ChapterPage: NextPage<ChapterProps> = ({ data }) => {
-  const { completed } = useChapterProgress(data);
+  const { completed, progress } = useChapterProgress({
+    chapter: data,
+    chapterId: data?.id,
+  });
 
   if (!data) return <Error statusCode={404} />;
 
@@ -49,6 +52,7 @@ const ChapterPage: NextPage<ChapterProps> = ({ data }) => {
             topicId={topics[0]}
             lessons={lessonData}
             category="lessons"
+            progress={progress}
           />
         </Grid>
         <Grid item xs={12} sm={6}>
@@ -57,6 +61,7 @@ const ChapterPage: NextPage<ChapterProps> = ({ data }) => {
             topicId={topics[0]}
             lessons={exampleData}
             category="examples"
+            progress={progress}
           />
         </Grid>
       </Grid>

src/utils/progress.ts

@@ -31,3 +31,13 @@ export const getChapterCompleted = (
 
   return (userPosts / chapterPosts) * 100;
 };
+
+export const getLessonStatus = (
+  category: keyof ChapterProgress.Response,
+  itemId: string,
+  progress?: ChapterProgress.Response,
+): 'completed' | 'notStarted' => {
+  if (!progress) return 'notStarted';
+  if (progress[category]?.includes(itemId)) return 'completed';
+  return 'notStarted';
+};