feat: rendering courses

src/hooks/queries/course/useFetchCourses.ts

@@ -0,0 +1,33 @@
+import { ICourse } from '@educt/interfaces';
+import { CourseServiceInstance } from '@educt/services';
+import { FetchCoursesParams } from '@educt/types';
+import useAsync from '@educt/hooks/useAsync';
+import { useEffect } from 'react';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useFetchCourses = (params?: FetchCoursesParams | undefined) => {
+  const handleError = useErrorHandler();
+
+  const fetchCourses = async (params?: FetchCoursesParams | undefined) => {
+    try {
+      const result = await CourseServiceInstance.fetchAll(params);
+      return result.data;
+    } catch (error) {
+      handleError(error);
+      return Promise.reject(error);
+    }
+  };
+
+  const { execute: fetch, ...state } = useAsync<
+    Omit<ICourse, 'teacher' | 'students' | 'lessons'>[],
+    Parameters<typeof fetchCourses>
+  >(fetchCourses);
+
+  useEffect(() => {
+    fetch(params);
+  }, []);
+
+  return { ...state };
+};
+
+export { useFetchCourses };

src/hooks/queries/index.ts

@@ -14,6 +14,7 @@ import { useUpdateLesson } from './lesson/useUpdateLesson';
 /**
  * Course
  */
+import { useFetchCourses } from './course/useFetchCourses';
 import { useCreateCourse } from './course/useCreateCourse';
 import { useUpdateCourse } from './course/useUpdateCourse';
 import { useFetchCourse } from './course/useFetchCourse';
@@ -40,6 +41,7 @@ import { useUpdateCategory } from './category/useUpdateCategory';
 export {
   useLogin,
   useLogout,
+  useFetchCourses,
   useCreateCourse,
   useUpdateCourse,
   useFetchCourse,

src/pages/main/components/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import {
   Box,
   BoxProps,
@@ -48,7 +49,7 @@ export const CourseCardCreated: React.FC<{ created: string }> = props => (
       Created
     </Text>
     <Box as='time' verticalAlign='middle' dateTime={props.created}>
-      {props.created}
+      {moment(props.created).format('ll')}
     </Box>
   </Box>
 );
@@ -86,7 +87,7 @@ export const CourseCardWatch: React.FC<{ id: string }> = props => {
 
   return (
     <Box>
-      <Button onClick={() => history.push(`/courses/${props.id}`)} leftIcon={<MdOutlinePlayCircle />} size='sm'>
+      <Button onClick={() => history.push(`/course/${props.id}`)} leftIcon={<MdOutlinePlayCircle />} size='sm'>
         Watch
       </Button>
     </Box>

src/pages/main/main.tsx

@@ -20,6 +20,8 @@ import {
   CourseCardStat,
   CourseCardList,
 } from './components';
+import { observer } from 'mobx-react';
+import { useFetchCourses } from '@educt/hooks/queries';
 
 /**
  * Main page
@@ -28,8 +30,9 @@ const MainPage: React.FC<IPageProps> = () => {
   const {
     userStore: { me },
   } = useRootStore();
+  const { data: courses } = useFetchCourses({ limit: 3 });
 
-  if (me === null) return <LoadingPage />;
+  if (me === null || courses === null) return <LoadingPage />;
 
   return (
     <PageWrapper>
@@ -39,7 +42,11 @@ const MainPage: React.FC<IPageProps> = () => {
           <Stat>
             <StatLabel>Unread messages</StatLabel>
             <StatContent>
-              <StatNumber>3</StatNumber>
+              <StatNumber>
+                <Link as={ReactRouterLink} to='/messages'>
+                  3
+                </Link>
+              </StatNumber>
               <StatIcon icon={MdOutlineMessage} />
             </StatContent>
           </Stat>
@@ -76,22 +83,24 @@ const MainPage: React.FC<IPageProps> = () => {
             </Link>
           </Flex>
           <CourseCardList>
-            <CourseCard>
+            {courses.map(course => (
-              <CourseCardHeading>
+              <CourseCard key={course.id}>
-                <CourseCardTitle>Javascript in a nutshell</CourseCardTitle>
+                <CourseCardHeading borderColor={course.color?.hex}>
-                <CourseCardCategory>Web Developing</CourseCardCategory>
+                  <CourseCardTitle>{course.title}</CourseCardTitle>
-              </CourseCardHeading>
+                  <CourseCardCategory>{course.category.title}</CourseCardCategory>
+                </CourseCardHeading>
 
-              <CourseCardContent>
+                <CourseCardContent>
-                <CourseCardCreated created='29 Nov 2022' />
+                  <CourseCardCreated created={course.created_at} />
-                <CourseCardLessons count={26} />
+                  <CourseCardLessons count={course.lessons_count} />
-              </CourseCardContent>
+                </CourseCardContent>
 
-              <CourseCardFooter>
+                <CourseCardFooter>
-                <CourseCardStat students={24} likes={14} />
+                  <CourseCardStat students={course.students_count} likes={course.likes_count} />
-                <CourseCardWatch id='123' />
+                  <CourseCardWatch id={course.id} />
-              </CourseCardFooter>
+                </CourseCardFooter>
-            </CourseCard>
+              </CourseCard>
+            ))}
           </CourseCardList>
         </Box>
         <Divider />
@@ -100,4 +109,4 @@ const MainPage: React.FC<IPageProps> = () => {
   );
 };
 
-export default MainPage;
+export default observer(MainPage);

src/services/CourseService.ts

@@ -24,6 +24,7 @@ class CourseService {
       params: {
         status: params?.status,
         category_id: params?.category_id,
+        limit: params?.limit,
       },
     });
     return result.data;

src/types/index.d.ts

@@ -109,15 +109,9 @@ export type CoursesPageContextType = {
   setCourseStatus: React.Dispatch<React.SetStateAction<CourseStatusEnum | undefined>>;
 };
 export type FetchCoursesParams = {
-  /**
-   * Get courses by status
-   */
   status?: CourseStatusEnum;
-
-  /**
-   * Get courses with category by id
-   */
   category_id?: string;
+  limit?: number;
 };
 export type FetchUsersParamsType = {
   page?: number;