mirror of
https://github.com/sergeyyarkov/educt-client.git
synced 2026-10-11 10:19:22 +03:00
refactor: refactored other hooks query
This commit is contained in:
parent
dd86228cab
commit
e329326821
@ -22,11 +22,11 @@ import UserBadge from '@educt/components/UserBadge';
|
|||||||
/**
|
/**
|
||||||
* Hooks
|
* Hooks
|
||||||
*/
|
*/
|
||||||
import useLogoutQuery from '@educt/hooks/useLogoutQuery';
|
import { useLogout } from '@educt/hooks/queries';
|
||||||
|
|
||||||
const UserInfo: React.FC = () => {
|
const UserInfo: React.FC = () => {
|
||||||
const { userStore } = useRootStore();
|
const { userStore } = useRootStore();
|
||||||
const { logout } = useLogoutQuery();
|
const { logout } = useLogout();
|
||||||
|
|
||||||
if (userStore.me === null) {
|
if (userStore.me === null) {
|
||||||
return <Skeleton width='260px' height='40px' borderRadius='md' />;
|
return <Skeleton width='260px' height='40px' borderRadius='md' />;
|
||||||
|
|||||||
@ -17,7 +17,7 @@ import NavList from '../NavList';
|
|||||||
/**
|
/**
|
||||||
* Hooks
|
* Hooks
|
||||||
*/
|
*/
|
||||||
import useLogoutQuery from '@educt/hooks/useLogoutQuery';
|
import { useLogout } from '@educt/hooks/queries';
|
||||||
import { useRootStore } from '@educt/hooks/useRootStore';
|
import { useRootStore } from '@educt/hooks/useRootStore';
|
||||||
import { useColorMode, useDisclosure } from '@chakra-ui/react';
|
import { useColorMode, useDisclosure } from '@chakra-ui/react';
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ const NavMobile: React.FC = () => {
|
|||||||
} = useRootStore();
|
} = useRootStore();
|
||||||
const { colorMode } = useColorMode();
|
const { colorMode } = useColorMode();
|
||||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||||
const { logout } = useLogoutQuery();
|
const { logout } = useLogout();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|||||||
import { Button } from '@chakra-ui/react';
|
import { Button } from '@chakra-ui/react';
|
||||||
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
|
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
|
||||||
import { CourseStatusEnum } from '@educt/enums';
|
import { CourseStatusEnum } from '@educt/enums';
|
||||||
import useSetCourseStatusQuery from '@educt/hooks/useSetCourseStatusQuery';
|
import { useSetCourseStatus } from '@educt/hooks/queries';
|
||||||
|
|
||||||
type SetCourseStatusButtonPropsType = {
|
type SetCourseStatusButtonPropsType = {
|
||||||
courseId: string;
|
courseId: string;
|
||||||
@ -16,7 +16,7 @@ const SetCourseStatusButton: React.FC<SetCourseStatusButtonPropsType> = ({
|
|||||||
loadingText = 'Wait a second...',
|
loadingText = 'Wait a second...',
|
||||||
}) => {
|
}) => {
|
||||||
const [status, setStatus] = useState<keyof typeof CourseStatusEnum>(currentStatus);
|
const [status, setStatus] = useState<keyof typeof CourseStatusEnum>(currentStatus);
|
||||||
const { setCourseStatus, isLoading } = useSetCourseStatusQuery();
|
const { setCourseStatus, isLoading } = useSetCourseStatus();
|
||||||
|
|
||||||
const handleChangeStatus = async (newStatus: CourseStatusEnum) => {
|
const handleChangeStatus = async (newStatus: CourseStatusEnum) => {
|
||||||
await setCourseStatus(courseId, newStatus);
|
await setCourseStatus(courseId, newStatus);
|
||||||
|
|||||||
@ -1,10 +1,12 @@
|
|||||||
import { useToast } from '@chakra-ui/react';
|
import { useToast } from '@chakra-ui/react';
|
||||||
import { IToken } from '@educt/interfaces';
|
import { IToken } from '@educt/interfaces';
|
||||||
import { useErrorHandler } from 'react-error-boundary';
|
import { useErrorHandler } from 'react-error-boundary';
|
||||||
import useAsync from './useAsync';
|
import useAsync from '../../useAsync';
|
||||||
import { useRootStore } from './useRootStore';
|
import { useRootStore } from '../../useRootStore';
|
||||||
|
|
||||||
const useLoginQuery = () => {
|
type LoginResultDataType = IToken | undefined;
|
||||||
|
|
||||||
|
const useLogin = () => {
|
||||||
const { authStore } = useRootStore();
|
const { authStore } = useRootStore();
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
const handleError = useErrorHandler();
|
const handleError = useErrorHandler();
|
||||||
@ -21,16 +23,13 @@ const useLoginQuery = () => {
|
|||||||
return result.data;
|
return result.data;
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
if (error.response) {
|
if (error.response) {
|
||||||
/**
|
|
||||||
* Handle response error
|
|
||||||
*/
|
|
||||||
switch (error.response.status) {
|
switch (error.response.status) {
|
||||||
case 404:
|
case 404:
|
||||||
toast({ title: 'User not found in a system.', status: 'error', duration: 2000 });
|
toast({ title: 'User not found in a system.', status: 'error', duration: 2000 });
|
||||||
throw error;
|
break;
|
||||||
case 401:
|
case 401:
|
||||||
toast({ title: 'Invalid password.', status: 'error', duration: 2000 });
|
toast({ title: 'Invalid password.', status: 'error', duration: 2000 });
|
||||||
throw error;
|
break;
|
||||||
default:
|
default:
|
||||||
handleError(error);
|
handleError(error);
|
||||||
break;
|
break;
|
||||||
@ -38,12 +37,14 @@ const useLoginQuery = () => {
|
|||||||
} else {
|
} else {
|
||||||
handleError(error);
|
handleError(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const { execute, ...state } = useAsync<IToken | undefined, Parameters<typeof login>>(login);
|
const { execute, ...state } = useAsync<LoginResultDataType, Parameters<typeof login>>(login);
|
||||||
|
|
||||||
return { login: execute, ...state };
|
return { login: execute, ...state };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useLoginQuery;
|
export { useLogin };
|
||||||
@ -1,10 +1,12 @@
|
|||||||
import { useToast } from '@chakra-ui/react';
|
import { useToast } from '@chakra-ui/react';
|
||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import { useRootStore } from './useRootStore';
|
import { useRootStore } from '../../useRootStore';
|
||||||
import { useErrorHandler } from 'react-error-boundary';
|
import { useErrorHandler } from 'react-error-boundary';
|
||||||
import useAsync from './useAsync';
|
import useAsync from '../../useAsync';
|
||||||
|
|
||||||
const useLogoutQuery = () => {
|
type LogoutResultDataType = {};
|
||||||
|
|
||||||
|
const useLogout = () => {
|
||||||
const { authStore } = useRootStore();
|
const { authStore } = useRootStore();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
@ -12,17 +14,19 @@ const useLogoutQuery = () => {
|
|||||||
|
|
||||||
const logout = async () => {
|
const logout = async () => {
|
||||||
try {
|
try {
|
||||||
await authStore.logout();
|
const result = await authStore.logout();
|
||||||
history.push('/auth');
|
history.push('/auth');
|
||||||
toast({ title: 'You are logged out.', isClosable: true, status: 'info' });
|
toast({ title: 'You are logged out.', isClosable: true, status: 'info' });
|
||||||
} catch (error) {
|
return result.data;
|
||||||
|
} catch (error: any) {
|
||||||
handleError(error);
|
handleError(error);
|
||||||
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const { execute, ...state } = useAsync<void, Parameters<typeof logout>>(logout);
|
const { execute, ...state } = useAsync<LogoutResultDataType, Parameters<typeof logout>>(logout);
|
||||||
|
|
||||||
return { logout: execute, ...state };
|
return { logout: execute, ...state };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useLogoutQuery;
|
export { useLogout };
|
||||||
@ -28,10 +28,13 @@ const useCreateCourse = () => {
|
|||||||
return result.data;
|
return result.data;
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
if (error.response) {
|
if (error.response) {
|
||||||
if (error.response.status === 422) {
|
switch (error.response.status) {
|
||||||
|
case 422:
|
||||||
toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
|
toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
|
||||||
} else {
|
break;
|
||||||
|
default:
|
||||||
toast({ title: `${error.message}`, status: 'error' });
|
toast({ title: `${error.message}`, status: 'error' });
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
handleError(error);
|
handleError(error);
|
||||||
|
|||||||
@ -7,12 +7,12 @@ import { ICourse } from '@educt/interfaces';
|
|||||||
* Hooks
|
* Hooks
|
||||||
*/
|
*/
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import useAsync from './useAsync';
|
import useAsync from '../../useAsync';
|
||||||
import { useRootStore } from './useRootStore';
|
import { useRootStore } from '../../useRootStore';
|
||||||
|
|
||||||
type QueryResponseDataType = Omit<ICourse, 'students_count' | 'likes_count' | 'lessons_count'> | undefined;
|
type CourseResultDataType = Omit<ICourse, 'students_count' | 'likes_count' | 'lessons_count'> | undefined;
|
||||||
|
|
||||||
const useFetchCourseQuery = (id: string) => {
|
const useFetchCourse = (id: string) => {
|
||||||
const {
|
const {
|
||||||
pageStore: { editCourseStore },
|
pageStore: { editCourseStore },
|
||||||
} = useRootStore();
|
} = useRootStore();
|
||||||
@ -22,7 +22,7 @@ const useFetchCourseQuery = (id: string) => {
|
|||||||
return result.data;
|
return result.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
const { execute: fetchCourseById, ...state } = useAsync<QueryResponseDataType, Parameters<typeof fetch>>(fetch);
|
const { execute: fetchCourseById, ...state } = useAsync<CourseResultDataType, Parameters<typeof fetch>>(fetch);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchCourseById(id);
|
fetchCourseById(id);
|
||||||
@ -31,4 +31,4 @@ const useFetchCourseQuery = (id: string) => {
|
|||||||
return { ...state };
|
return { ...state };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useFetchCourseQuery;
|
export { useFetchCourse };
|
||||||
@ -3,17 +3,17 @@
|
|||||||
*/
|
*/
|
||||||
import { CourseStatusEnum } from '@educt/enums';
|
import { CourseStatusEnum } from '@educt/enums';
|
||||||
import { useErrorHandler } from 'react-error-boundary';
|
import { useErrorHandler } from 'react-error-boundary';
|
||||||
import useAsync from './useAsync';
|
import useAsync from '../../useAsync';
|
||||||
import { useRootStore } from './useRootStore';
|
import { useRootStore } from '../../useRootStore';
|
||||||
import { useToast } from '@chakra-ui/toast';
|
import { useToast } from '@chakra-ui/toast';
|
||||||
|
|
||||||
type QueryResponseDataType = {} | undefined;
|
type SetCourseStatusResultDataType = {} | undefined;
|
||||||
export type SetCourseStatusFnType = (
|
export type SetCourseStatusFnType = (
|
||||||
id: string,
|
id: string,
|
||||||
newStatus: CourseStatusEnum
|
newStatus: CourseStatusEnum
|
||||||
) => Promise<QueryResponseDataType | undefined>;
|
) => Promise<SetCourseStatusResultDataType | undefined>;
|
||||||
|
|
||||||
const useSetCourseStatusQuery = () => {
|
const useSetCourseStatus = () => {
|
||||||
const { courseStore } = useRootStore();
|
const { courseStore } = useRootStore();
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
const handleError = useErrorHandler();
|
const handleError = useErrorHandler();
|
||||||
@ -38,12 +38,16 @@ const useSetCourseStatusQuery = () => {
|
|||||||
} else {
|
} else {
|
||||||
handleError(error);
|
handleError(error);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const { execute, ...state } = useAsync<QueryResponseDataType, Parameters<SetCourseStatusFnType>>(setCourseStatus);
|
const { execute, ...state } = useAsync<SetCourseStatusResultDataType, Parameters<typeof setCourseStatus>>(
|
||||||
|
setCourseStatus
|
||||||
|
);
|
||||||
|
|
||||||
return { setCourseStatus: execute, ...state };
|
return { setCourseStatus: execute, ...state };
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useSetCourseStatusQuery;
|
export { useSetCourseStatus };
|
||||||
@ -1,6 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* Auth
|
||||||
|
*/
|
||||||
|
import { useLogin } from './auth/useLogin';
|
||||||
|
import { useLogout } from './auth/useLogout';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lesson
|
||||||
|
*/
|
||||||
import { useDeleteLesson } from './lesson/useDeleteLesson';
|
import { useDeleteLesson } from './lesson/useDeleteLesson';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Course
|
||||||
|
*/
|
||||||
import { useCreateCourse } from './course/useCreateCourse';
|
import { useCreateCourse } from './course/useCreateCourse';
|
||||||
import { useUpdateCourse } from './course/useUpdateCourse';
|
import { useUpdateCourse } from './course/useUpdateCourse';
|
||||||
|
import { useFetchCourse } from './course/useFetchCourse';
|
||||||
|
import { useSetCourseStatus } from './course/useSetCourseStatus';
|
||||||
|
|
||||||
export { useCreateCourse, useUpdateCourse, useDeleteLesson };
|
/**
|
||||||
|
* User
|
||||||
|
*/
|
||||||
|
import { useUpdateUserEmail } from './user/useUpdateUserEmail';
|
||||||
|
|
||||||
|
export {
|
||||||
|
useLogin,
|
||||||
|
useLogout,
|
||||||
|
useCreateCourse,
|
||||||
|
useUpdateCourse,
|
||||||
|
useFetchCourse,
|
||||||
|
useSetCourseStatus,
|
||||||
|
useDeleteLesson,
|
||||||
|
useUpdateUserEmail,
|
||||||
|
};
|
||||||
|
|||||||
49
src/hooks/queries/user/useUpdateUserEmail.ts
Normal file
49
src/hooks/queries/user/useUpdateUserEmail.ts
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { useToast } from '@chakra-ui/toast';
|
||||||
|
import { useErrorHandler } from 'react-error-boundary';
|
||||||
|
import { useRootStore } from '@educt/hooks/useRootStore';
|
||||||
|
import useAsync from '@educt/hooks/useAsync';
|
||||||
|
|
||||||
|
type ConfirmationResultDataType = { expired_seconds: number } | null;
|
||||||
|
|
||||||
|
const useUpdateUserEmail = () => {
|
||||||
|
const { userStore } = useRootStore();
|
||||||
|
const toast = useToast();
|
||||||
|
const handleError = useErrorHandler();
|
||||||
|
|
||||||
|
const sendConfirmationCode = async (email: string) => {
|
||||||
|
try {
|
||||||
|
const result = await userStore.updateCurrentUserEmail(email);
|
||||||
|
toast({ title: 'Confirmation code has been sent.', status: 'info' });
|
||||||
|
return result.data;
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error.response) {
|
||||||
|
if (error.response.status === 503) {
|
||||||
|
switch (error.response.data.code) {
|
||||||
|
case 'E_CONFIRM_CODE_EXIST':
|
||||||
|
toast({ title: 'Please, try send code later.', status: 'info' });
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
toast({ title: `Unable to send confirmation code, try again later.`, status: 'error' });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else if (error.response.status === 422) {
|
||||||
|
toast({ title: error.response.data.errors[0].message, status: 'error' });
|
||||||
|
} else {
|
||||||
|
handleError(error);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
handleError(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const { execute, ...state } = useAsync<ConfirmationResultDataType, Parameters<typeof sendConfirmationCode>>(
|
||||||
|
sendConfirmationCode
|
||||||
|
);
|
||||||
|
|
||||||
|
return { sendConfirmationCode: execute, ...state };
|
||||||
|
};
|
||||||
|
|
||||||
|
export { useUpdateUserEmail };
|
||||||
@ -1,56 +0,0 @@
|
|||||||
// /**
|
|
||||||
// * Types
|
|
||||||
// */
|
|
||||||
// import { ILesson } from '@educt/interfaces';
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Hooks
|
|
||||||
// */
|
|
||||||
// import { useEffect, useState } from 'react';
|
|
||||||
// import { useErrorHandler } from 'react-error-boundary';
|
|
||||||
// import useIsMountedRef from './useIsMountedRef';
|
|
||||||
|
|
||||||
// type LessonStateType = {
|
|
||||||
// data: ILesson | null;
|
|
||||||
// error: any;
|
|
||||||
// loading: boolean;
|
|
||||||
// fetched: boolean;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const useFetchLessonQuery = (id: string) => {
|
|
||||||
// const [state, setState] = useState<LessonStateType>({ data: null, error: null, loading: false, fetched: false });
|
|
||||||
// const isMountedRef = useIsMountedRef();
|
|
||||||
// const handleError = useErrorHandler();
|
|
||||||
|
|
||||||
// /**
|
|
||||||
// * Fetch course handler
|
|
||||||
// */
|
|
||||||
// useEffect(() => {
|
|
||||||
// setState(s => ({ ...s, loading: true }));
|
|
||||||
// lessonService
|
|
||||||
// .fetchById(id)
|
|
||||||
// .then(data => {
|
|
||||||
// if (isMountedRef.current) {
|
|
||||||
// setState(s => ({ ...s, data: data.data }));
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// .catch(error => {
|
|
||||||
// if (error.response) {
|
|
||||||
// if (isMountedRef.current) {
|
|
||||||
// setState(s => ({ ...s, error }));
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// handleError(error);
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// .finally(() => {
|
|
||||||
// if (isMountedRef.current) {
|
|
||||||
// setState(s => ({ ...s, loading: false, fetched: true }));
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }, [id]);
|
|
||||||
|
|
||||||
// return { ...state };
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export default useFetchLessonQuery;
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
import { useToast } from '@chakra-ui/toast';
|
|
||||||
import { IApiRespose } from '@educt/interfaces';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useErrorHandler } from 'react-error-boundary';
|
|
||||||
import useIsMountedRef from './useIsMountedRef';
|
|
||||||
import { useRootStore } from './useRootStore';
|
|
||||||
|
|
||||||
type UpdateUserEmailStateType = {
|
|
||||||
result: IApiRespose<{ expired_seconds: number }> | null;
|
|
||||||
error: any;
|
|
||||||
loading: boolean;
|
|
||||||
fetched: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const useUpdateUserEmailQuery = () => {
|
|
||||||
const isMountedRef = useIsMountedRef();
|
|
||||||
const { userStore } = useRootStore();
|
|
||||||
const [state, setState] = useState<UpdateUserEmailStateType>({
|
|
||||||
result: null,
|
|
||||||
error: null,
|
|
||||||
loading: false,
|
|
||||||
fetched: false,
|
|
||||||
});
|
|
||||||
const toast = useToast();
|
|
||||||
const handleError = useErrorHandler();
|
|
||||||
|
|
||||||
const sendConfirmationCode = async (email: string) => {
|
|
||||||
try {
|
|
||||||
setState(s => ({ ...s, loading: true }));
|
|
||||||
const result = await userStore.updateCurrentUserEmail(email);
|
|
||||||
toast({ title: 'Confirmation code has been sent.', status: 'info' });
|
|
||||||
|
|
||||||
if (isMountedRef.current) {
|
|
||||||
setState(s => ({ ...s, result }));
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
} catch (error: any) {
|
|
||||||
if (isMountedRef.current) {
|
|
||||||
setState(s => ({ ...s, error }));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error.response) {
|
|
||||||
const status = error.response.status;
|
|
||||||
if (status === 503) {
|
|
||||||
switch (error.response.data.code) {
|
|
||||||
case 'E_CONFIRM_CODE_EXIST':
|
|
||||||
toast({ title: 'Please, try send code later.', status: 'info' });
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
toast({ title: `Unable to send confirmation code, try again later.`, status: 'error' });
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} else if (status === 422) {
|
|
||||||
toast({ title: error.response.data.errors[0].message, status: 'error' });
|
|
||||||
} else {
|
|
||||||
handleError(error);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
handleError(error);
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (isMountedRef.current) {
|
|
||||||
setState(s => ({ ...s, loading: false, fetched: true }));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return { ...state, sendConfirmationCode };
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useUpdateUserEmailQuery;
|
|
||||||
@ -23,7 +23,7 @@ import type { SubmitHandler } from 'react-hook-form';
|
|||||||
* Hooks
|
* Hooks
|
||||||
*/
|
*/
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import useLoginQuery from '@educt/hooks/useLoginQuery';
|
import { useLogin } from '@educt/hooks/queries';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Schema
|
* Schema
|
||||||
@ -44,7 +44,7 @@ const AuthForm: React.FC = () => {
|
|||||||
} = useForm<AuthInputType>({
|
} = useForm<AuthInputType>({
|
||||||
resolver: yupResolver(LoginSchema),
|
resolver: yupResolver(LoginSchema),
|
||||||
});
|
});
|
||||||
const { login, isLoading } = useLoginQuery();
|
const { login, isLoading } = useLogin();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Login handler
|
* Login handler
|
||||||
|
|||||||
@ -12,8 +12,8 @@ import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
|
|||||||
* Types
|
* Types
|
||||||
*/
|
*/
|
||||||
import { ICourse } from '@educt/interfaces';
|
import { ICourse } from '@educt/interfaces';
|
||||||
|
import type { SetCourseStatusFnType } from '@educt/hooks/queries/course/useSetCourseStatus';
|
||||||
import { CourseStatusEnum } from '@educt/enums';
|
import { CourseStatusEnum } from '@educt/enums';
|
||||||
import { SetCourseStatusFnType } from '@educt/hooks/useSetCourseStatusQuery';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Components
|
* Components
|
||||||
|
|||||||
@ -18,6 +18,7 @@ import LoadingList from '@educt/components/LoadingList';
|
|||||||
* Hooks
|
* Hooks
|
||||||
*/
|
*/
|
||||||
import { useContext, useEffect } from 'react';
|
import { useContext, useEffect } from 'react';
|
||||||
|
import { useSetCourseStatus } from '@educt/hooks/queries';
|
||||||
import { useRootStore } from '@educt/hooks/useRootStore';
|
import { useRootStore } from '@educt/hooks/useRootStore';
|
||||||
import { useDisclosure } from '@chakra-ui/hooks';
|
import { useDisclosure } from '@chakra-ui/hooks';
|
||||||
|
|
||||||
@ -25,7 +26,6 @@ import { useDisclosure } from '@chakra-ui/hooks';
|
|||||||
* Contexts
|
* Contexts
|
||||||
*/
|
*/
|
||||||
import { CoursesPageContext } from '@educt/contexts';
|
import { CoursesPageContext } from '@educt/contexts';
|
||||||
import useSetCourseStatusQuery from '@educt/hooks/useSetCourseStatusQuery';
|
|
||||||
|
|
||||||
type CourseListPropsType = {
|
type CourseListPropsType = {
|
||||||
render: React.FC<CourseItemPropsType>;
|
render: React.FC<CourseItemPropsType>;
|
||||||
@ -38,7 +38,7 @@ const CourseList: React.FC<CourseListPropsType> = ({ render: Item }) => {
|
|||||||
} = useRootStore();
|
} = useRootStore();
|
||||||
const { selectedCategory, courseStatus, deletingCourse, setDeletingCourse } = useContext(CoursesPageContext);
|
const { selectedCategory, courseStatus, deletingCourse, setDeletingCourse } = useContext(CoursesPageContext);
|
||||||
const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
|
const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
|
||||||
const { setCourseStatus } = useSetCourseStatusQuery();
|
const { setCourseStatus } = useSetCourseStatus();
|
||||||
const { courses, isLoading } = courseStore;
|
const { courses, isLoading } = courseStore;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -22,7 +22,7 @@ import { StudentList, StudentItem } from './components/StudentList';
|
|||||||
*/
|
*/
|
||||||
import { useParams } from 'react-router-dom';
|
import { useParams } from 'react-router-dom';
|
||||||
import { useRootStore } from '@educt/hooks/useRootStore';
|
import { useRootStore } from '@educt/hooks/useRootStore';
|
||||||
import useFetchCourseQuery from '@educt/hooks/useFetchCourseQuery';
|
import { useFetchCourse } from '@educt/hooks/queries';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Course editor
|
* Course editor
|
||||||
@ -34,7 +34,7 @@ const EditCoursePage: React.FC<IPageProps> = () => {
|
|||||||
editCourseStore: { course },
|
editCourseStore: { course },
|
||||||
},
|
},
|
||||||
} = useRootStore();
|
} = useRootStore();
|
||||||
const { error, isLoading } = useFetchCourseQuery(params.id);
|
const { error, isLoading } = useFetchCourse(params.id);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Not Found
|
* Not Found
|
||||||
|
|||||||
@ -15,7 +15,7 @@ import type { SubmitHandler } from 'react-hook-form';
|
|||||||
*/
|
*/
|
||||||
import { useContext, useEffect, useState } from 'react';
|
import { useContext, useEffect, useState } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import useUpdateUserEmailQuery from '@educt/hooks/useUpdateUserEmailQuery.ts';
|
import { useUpdateUserEmail } from '@educt/hooks/queries';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Contexts
|
* Contexts
|
||||||
@ -41,7 +41,7 @@ type UpdateEmailFormPropsType = {
|
|||||||
const UpdateEmailForm: React.FC<UpdateEmailFormPropsType> = ({ currentEmail }) => {
|
const UpdateEmailForm: React.FC<UpdateEmailFormPropsType> = ({ currentEmail }) => {
|
||||||
const [newEmail, setNewEmail] = useState<string | null>(null);
|
const [newEmail, setNewEmail] = useState<string | null>(null);
|
||||||
const { setIsCodeSent, setConfirmEmailData } = useContext(ChangeEmailPageContext);
|
const { setIsCodeSent, setConfirmEmailData } = useContext(ChangeEmailPageContext);
|
||||||
const { sendConfirmationCode, loading, result } = useUpdateUserEmailQuery();
|
const { sendConfirmationCode, isLoading, data } = useUpdateUserEmail();
|
||||||
const {
|
const {
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
register,
|
register,
|
||||||
@ -54,11 +54,11 @@ const UpdateEmailForm: React.FC<UpdateEmailFormPropsType> = ({ currentEmail }) =
|
|||||||
* Change page view in confirmation code has been sent
|
* Change page view in confirmation code has been sent
|
||||||
*/
|
*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (newEmail !== null && result !== null) {
|
if (newEmail !== null && data !== null) {
|
||||||
setIsCodeSent(true);
|
setIsCodeSent(true);
|
||||||
setConfirmEmailData({ newEmail, expired_seconds: result.data.expired_seconds });
|
setConfirmEmailData({ newEmail, expired_seconds: data.expired_seconds });
|
||||||
}
|
}
|
||||||
}, [result]);
|
}, [data]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Submit form handler
|
* Submit form handler
|
||||||
@ -93,7 +93,7 @@ const UpdateEmailForm: React.FC<UpdateEmailFormPropsType> = ({ currentEmail }) =
|
|||||||
type='submit'
|
type='submit'
|
||||||
size='md'
|
size='md'
|
||||||
variant='outline'
|
variant='outline'
|
||||||
isLoading={loading}
|
isLoading={isLoading}
|
||||||
loadingText='Sending...'
|
loadingText='Sending...'
|
||||||
>
|
>
|
||||||
Send code
|
Send code
|
||||||
|
|||||||
@ -12,7 +12,7 @@ import { ConfirmEmailDataType } from '@educt/types';
|
|||||||
* Hooks
|
* Hooks
|
||||||
*/
|
*/
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import useUpdateUserEmailQuery from '@educt/hooks/useUpdateUserEmailQuery.ts';
|
import { useUpdateUserEmail } from '@educt/hooks/queries';
|
||||||
import useIsMountedRef from '@educt/hooks/useIsMountedRef';
|
import useIsMountedRef from '@educt/hooks/useIsMountedRef';
|
||||||
import { useRootStore } from '@educt/hooks/useRootStore';
|
import { useRootStore } from '@educt/hooks/useRootStore';
|
||||||
import { useToast } from '@chakra-ui/toast';
|
import { useToast } from '@chakra-ui/toast';
|
||||||
@ -25,7 +25,7 @@ type ConfirmEmailContainerPropsType = {
|
|||||||
|
|
||||||
const ConfirmEmailContainer: React.FC<ConfirmEmailContainerPropsType> = ({ data }) => {
|
const ConfirmEmailContainer: React.FC<ConfirmEmailContainerPropsType> = ({ data }) => {
|
||||||
const { userStore } = useRootStore();
|
const { userStore } = useRootStore();
|
||||||
const { sendConfirmationCode, loading } = useUpdateUserEmailQuery();
|
const { sendConfirmationCode, isLoading } = useUpdateUserEmail();
|
||||||
const [isVerifying, setIsVerifying] = useState<boolean>(false);
|
const [isVerifying, setIsVerifying] = useState<boolean>(false);
|
||||||
const [code, setCode] = useState<string>('');
|
const [code, setCode] = useState<string>('');
|
||||||
const [expired, setExpired] = useState(data.expired_seconds);
|
const [expired, setExpired] = useState(data.expired_seconds);
|
||||||
@ -93,11 +93,11 @@ const ConfirmEmailContainer: React.FC<ConfirmEmailContainerPropsType> = ({ data
|
|||||||
|
|
||||||
const resendCodeHandler = async () => {
|
const resendCodeHandler = async () => {
|
||||||
const result = await sendConfirmationCode(data.newEmail);
|
const result = await sendConfirmationCode(data.newEmail);
|
||||||
if (result !== undefined) {
|
if (result !== null) {
|
||||||
/**
|
/**
|
||||||
* Reset timer state
|
* Reset timer state
|
||||||
*/
|
*/
|
||||||
const { expired_seconds } = result.data;
|
const { expired_seconds } = result;
|
||||||
setExpired(v => (v = expired_seconds));
|
setExpired(v => (v = expired_seconds));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -158,7 +158,7 @@ const ConfirmEmailContainer: React.FC<ConfirmEmailContainerPropsType> = ({ data
|
|||||||
mt='3'
|
mt='3'
|
||||||
textDecoration='underline'
|
textDecoration='underline'
|
||||||
loadingText='Wait a second.'
|
loadingText='Wait a second.'
|
||||||
isLoading={loading}
|
isLoading={isLoading}
|
||||||
>
|
>
|
||||||
Resend code
|
Resend code
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { observer } from 'mobx-react';
|
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
Tabs,
|
Tabs,
|
||||||
@ -35,7 +34,7 @@ import CourseList from '@educt/pages/profile/components/CourseList';
|
|||||||
import { useHistory } from 'react-router-dom';
|
import { useHistory } from 'react-router-dom';
|
||||||
import { useColorMode } from '@chakra-ui/color-mode';
|
import { useColorMode } from '@chakra-ui/color-mode';
|
||||||
import { useRootStore } from '@educt/hooks/useRootStore';
|
import { useRootStore } from '@educt/hooks/useRootStore';
|
||||||
import useLogoutQuery from '@educt/hooks/useLogoutQuery';
|
import { useLogout } from '@educt/hooks/queries';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Profile page
|
* Profile page
|
||||||
@ -45,7 +44,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
|
|||||||
userStore: { me },
|
userStore: { me },
|
||||||
} = useRootStore();
|
} = useRootStore();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const { logout } = useLogoutQuery();
|
const { logout } = useLogout();
|
||||||
const { colorMode } = useColorMode();
|
const { colorMode } = useColorMode();
|
||||||
|
|
||||||
if (me === null) return <LoadingPage />;
|
if (me === null) return <LoadingPage />;
|
||||||
@ -139,7 +138,7 @@ const ProfilePage: React.FC<IPageProps> = () => {
|
|||||||
</Tabs>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
<Box textAlign='center' mt='3'>
|
<Box textAlign='center' mt='3'>
|
||||||
<Button onClick={logout} w={{ base: 'full', sm: '150px' }}>
|
<Button onClick={logout} size='sm' w={{ base: 'full', sm: '150px' }}>
|
||||||
Sign Out
|
Sign Out
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@ -84,6 +84,7 @@ const CreateUserModal: React.FC<CreateUserFormPropsType> = () => {
|
|||||||
/**
|
/**
|
||||||
* Submit handler
|
* Submit handler
|
||||||
*/
|
*/
|
||||||
|
// TODO: move to hook
|
||||||
const onSubmit: SubmitHandler<CreateUserInputType> = async data => {
|
const onSubmit: SubmitHandler<CreateUserInputType> = async data => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|||||||
@ -44,6 +44,7 @@ const DeleteUserDialog: React.FC<DeleteUserDialogPropsType> = ({ isOpen, onClose
|
|||||||
* @param isConfirmed Is dialog confirmed
|
* @param isConfirmed Is dialog confirmed
|
||||||
* @param id User id
|
* @param id User id
|
||||||
*/
|
*/
|
||||||
|
// TODO: move to hook
|
||||||
const deleteUserHandler = async (isConfirmed: boolean, id: string) => {
|
const deleteUserHandler = async (isConfirmed: boolean, id: string) => {
|
||||||
if (isConfirmed) {
|
if (isConfirmed) {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -94,6 +94,7 @@ const UpdateUserForm: React.FC<UpdateUserFormPropsType> = ({ user, onClose, isOp
|
|||||||
/**
|
/**
|
||||||
* Submit handler
|
* Submit handler
|
||||||
*/
|
*/
|
||||||
|
// TODO: move to hook
|
||||||
const onSubmit: SubmitHandler<UpdateUserInputType> = async data => {
|
const onSubmit: SubmitHandler<UpdateUserInputType> = async data => {
|
||||||
try {
|
try {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|||||||
@ -28,7 +28,7 @@ class AuthService implements AuthServiceImpl {
|
|||||||
* @param password User password
|
* @param password User password
|
||||||
* @returns Token result data
|
* @returns Token result data
|
||||||
*/
|
*/
|
||||||
public async requestLogin(login: string, password: string) {
|
public async requestLogin(login: string, password: string): Promise<IApiRespose<IToken>> {
|
||||||
const result = await this.api.post('v1/auth/login', {
|
const result = await this.api.post('v1/auth/login', {
|
||||||
login,
|
login,
|
||||||
password,
|
password,
|
||||||
@ -41,7 +41,7 @@ class AuthService implements AuthServiceImpl {
|
|||||||
*
|
*
|
||||||
* @returns Empty obj
|
* @returns Empty obj
|
||||||
*/
|
*/
|
||||||
public async requestLogout() {
|
public async requestLogout(): Promise<IApiRespose<{}>> {
|
||||||
const result = await this.api.post('v1/auth/logout');
|
const result = await this.api.post('v1/auth/logout');
|
||||||
return result.data;
|
return result.data;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user