feat: rendering basic stat info

src/hooks/queries/index.ts

@@ -38,6 +38,11 @@ import { useCreateCategory } from './category/useCreateCategory';
 import { useDeleteCategory } from './category/useDeleteCategory';
 import { useUpdateCategory } from './category/useUpdateCategory';
 
+/**
+ * Stat
+ */
+import { useFetchStat } from './stat/useFetchStat';
+
 export {
   useLogin,
   useLogout,
@@ -59,4 +64,5 @@ export {
   useDeleteCategory,
   useUpdateCategory,
   useFetchCategories,
+  useFetchStat,
 };

src/hooks/queries/stat/useFetchStat.ts

@@ -0,0 +1,29 @@
+import { StatServiceInstance } from '@educt/services/StatService';
+import { StatInfoType } from '@educt/types';
+import { useEffect } from 'react';
+import useAsync from '@educt/hooks/useAsync';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useFetchStat = () => {
+  const handleError = useErrorHandler();
+
+  const fetchStat = async () => {
+    try {
+      const result = await StatServiceInstance.fetchStat();
+      return result.data;
+    } catch (error) {
+      handleError(error);
+      return Promise.reject(error);
+    }
+  };
+
+  const { execute: fetch, ...state } = useAsync<StatInfoType, Parameters<typeof fetchStat>>(fetchStat);
+
+  useEffect(() => {
+    fetch();
+  }, []);
+
+  return { ...state };
+};
+
+export { useFetchStat };

src/pages/main/main.tsx

@@ -21,7 +21,7 @@ import {
   CourseCardList,
 } from './components';
 import { observer } from 'mobx-react';
-import { useFetchCourses } from '@educt/hooks/queries';
+import { useFetchCourses, useFetchStat } from '@educt/hooks/queries';
 
 /**
  * Main page
@@ -31,8 +31,9 @@ const MainPage: React.FC<IPageProps> = () => {
     userStore: { me },
   } = useRootStore();
   const { data: courses } = useFetchCourses({ limit: 3 });
+  const { data: stat } = useFetchStat();
 
-  if (me === null || courses === null) return <LoadingPage />;
+  if (me === null || courses === null || stat === null) return <LoadingPage />;
 
   return (
     <PageWrapper>
@@ -40,29 +41,29 @@ const MainPage: React.FC<IPageProps> = () => {
       <PageContent>
         <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing='6'>
           <Stat>
-            <StatLabel>Unread messages</StatLabel>
-            <StatContent>
-              <StatNumber>
-                <Link as={ReactRouterLink} to='/messages'>
-                  3
-                </Link>
-              </StatNumber>
-              <StatIcon icon={MdOutlineMessage} />
-            </StatContent>
-          </Stat>
-
-          <Stat>
-            <StatLabel>Registered students</StatLabel>
+            <StatLabel>Online</StatLabel>
             <StatContent>
               <StatNumber>24</StatNumber>
               <StatIcon icon={MdOutlineGroup} />
             </StatContent>
           </Stat>
 
+          <Stat>
+            <StatLabel>Unread messages</StatLabel>
+            <StatContent>
+              <StatNumber>
+                <Link as={ReactRouterLink} to='/messages'>
+                  1
+                </Link>
+              </StatNumber>
+              <StatIcon icon={MdOutlineMessage} />
+            </StatContent>
+          </Stat>
+
           <Stat>
             <StatLabel>Courses</StatLabel>
             <StatContent>
-              <StatNumber>7</StatNumber>
+              <StatNumber>{stat.courses_count}</StatNumber>
               <StatIcon icon={MdOutlineCollectionsBookmark} />
             </StatContent>
           </Stat>
@@ -70,7 +71,7 @@ const MainPage: React.FC<IPageProps> = () => {
           <Stat>
             <StatLabel>Lessons</StatLabel>
             <StatContent>
-              <StatNumber>42</StatNumber>
+              <StatNumber>{stat.lessons_count}</StatNumber>
               <StatIcon icon={MdOutlineVideoLibrary} />
             </StatContent>
           </Stat>

src/services/StatService.ts

@@ -0,0 +1,24 @@
+import { AxiosInstance } from 'axios';
+import { ApiServiceInstance } from '.';
+import { IApiRespose } from '@educt/interfaces';
+import { StatInfoType } from '@educt/types';
+
+class StatService {
+  public api: AxiosInstance;
+
+  constructor(api: AxiosInstance) {
+    this.api = api;
+  }
+
+  /**
+   * Get basic stat info about system
+   *
+   * @returns Stat info
+   */
+  public async fetchStat(): Promise<IApiRespose<StatInfoType>> {
+    const result = await this.api.get('/v1/stat');
+    return result.data;
+  }
+}
+
+export const StatServiceInstance = new StatService(ApiServiceInstance.api);

src/types/index.d.ts

@@ -40,6 +40,11 @@ export type LessonProgress = {
   } | null;
 };
 
+export type StatInfoType = {
+  courses_count: string;
+  lessons_count: string;
+};
+
 export type LessonVideoType = {
   id: number;
   client_name: string;