diff --git a/src/hooks/queries/index.ts b/src/hooks/queries/index.ts index 9928bdb..d573ed1 100644 --- a/src/hooks/queries/index.ts +++ b/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, }; diff --git a/src/hooks/queries/stat/useFetchStat.ts b/src/hooks/queries/stat/useFetchStat.ts new file mode 100644 index 0000000..9ca0808 --- /dev/null +++ b/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>(fetchStat); + + useEffect(() => { + fetch(); + }, []); + + return { ...state }; +}; + +export { useFetchStat }; diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index 899f0b7..04970dd 100644 --- a/src/pages/main/main.tsx +++ b/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 = () => { userStore: { me }, } = useRootStore(); const { data: courses } = useFetchCourses({ limit: 3 }); + const { data: stat } = useFetchStat(); - if (me === null || courses === null) return ; + if (me === null || courses === null || stat === null) return ; return ( @@ -40,29 +41,29 @@ const MainPage: React.FC = () => { - Unread messages - - - - 3 - - - - - - - - Registered students + Online 24 + + Unread messages + + + + 1 + + + + + + Courses - 7 + {stat.courses_count} @@ -70,7 +71,7 @@ const MainPage: React.FC = () => { Lessons - 42 + {stat.lessons_count} diff --git a/src/services/StatService.ts b/src/services/StatService.ts new file mode 100644 index 0000000..dae67f7 --- /dev/null +++ b/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> { + const result = await this.api.get('/v1/stat'); + return result.data; + } +} + +export const StatServiceInstance = new StatService(ApiServiceInstance.api); diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 3211751..d314bdb 100644 --- a/src/types/index.d.ts +++ b/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;