From 2c6534648a592b2a2b64dc52c5a4140845c2f3e6 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 23 Jan 2022 23:13:17 +0300
Subject: [PATCH] feat: rendering courses

---
 src/hooks/queries/course/useFetchCourses.ts | 33 ++++++++++++++++
 src/hooks/queries/index.ts                  |  2 +
 src/pages/main/components/index.tsx         |  5 ++-
 src/pages/main/main.tsx                     | 43 +++++++++++++--------
 src/services/CourseService.ts               |  1 +
 src/types/index.d.ts                        |  8 +---
 6 files changed, 66 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/queries/course/useFetchCourses.ts

diff --git a/src/hooks/queries/course/useFetchCourses.ts b/src/hooks/queries/course/useFetchCourses.ts
new file mode 100644
index 0000000..430ed5a
--- /dev/null
+++ b/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 };
diff --git a/src/hooks/queries/index.ts b/src/hooks/queries/index.ts
index 7da175a..9928bdb 100644
--- a/src/hooks/queries/index.ts
+++ b/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,
diff --git a/src/pages/main/components/index.tsx b/src/pages/main/components/index.tsx
index 8833f00..d16e58b 100644
--- a/src/pages/main/components/index.tsx
+++ b/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>
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
index 691c4b5..899f0b7 100644
--- a/src/pages/main/main.tsx
+++ b/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>
-              <CourseCardHeading>
-                <CourseCardTitle>Javascript in a nutshell</CourseCardTitle>
-                <CourseCardCategory>Web Developing</CourseCardCategory>
-              </CourseCardHeading>
+            {courses.map(course => (
+              <CourseCard key={course.id}>
+                <CourseCardHeading borderColor={course.color?.hex}>
+                  <CourseCardTitle>{course.title}</CourseCardTitle>
+                  <CourseCardCategory>{course.category.title}</CourseCardCategory>
+                </CourseCardHeading>
 
-              <CourseCardContent>
-                <CourseCardCreated created='29 Nov 2022' />
-                <CourseCardLessons count={26} />
-              </CourseCardContent>
+                <CourseCardContent>
+                  <CourseCardCreated created={course.created_at} />
+                  <CourseCardLessons count={course.lessons_count} />
+                </CourseCardContent>
 
-              <CourseCardFooter>
-                <CourseCardStat students={24} likes={14} />
-                <CourseCardWatch id='123' />
-              </CourseCardFooter>
-            </CourseCard>
+                <CourseCardFooter>
+                  <CourseCardStat students={course.students_count} likes={course.likes_count} />
+                  <CourseCardWatch id={course.id} />
+                </CourseCardFooter>
+              </CourseCard>
+            ))}
           </CourseCardList>
         </Box>
         <Divider />
@@ -100,4 +109,4 @@ const MainPage: React.FC<IPageProps> = () => {
   );
 };
 
-export default MainPage;
+export default observer(MainPage);
diff --git a/src/services/CourseService.ts b/src/services/CourseService.ts
index a6470d6..4ae127d 100644
--- a/src/services/CourseService.ts
+++ b/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;
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 8abc3ef..3211751 100644
--- a/src/types/index.d.ts
+++ b/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;