= ({ updated }) => (
+ | {new Date(updated).toLocaleDateString()} |
+);
+
+type ActionsCellPropsType = {
+ onEdit: () => void;
+ onDelete: () => void;
+};
+export const ActionsCell: React.FC = ({ onEdit, onDelete }) => (
+
+
+ |
+);
diff --git a/src/components/Tables/CategoryTableList/index.tsx b/src/components/Tables/CategoryTableList/index.tsx
new file mode 100644
index 0000000..5d6e569
--- /dev/null
+++ b/src/components/Tables/CategoryTableList/index.tsx
@@ -0,0 +1,4 @@
+import CategoryTableList from './CategoryTableList';
+import CategoryTableRow from './CategoryTableRow';
+
+export { CategoryTableList, CategoryTableRow };
diff --git a/src/components/UserBadge/UserBadge.tsx b/src/components/UserBadge/UserBadge.tsx
index ee037d0..6a37661 100644
--- a/src/components/UserBadge/UserBadge.tsx
+++ b/src/components/UserBadge/UserBadge.tsx
@@ -1,38 +1,30 @@
-import { Badge } from '@chakra-ui/react';
+import { BadgeProps, Badge } from '@chakra-ui/react';
import React from 'react';
import { UserRoleEnum } from '@educt/enums';
import { IUserRole } from '@educt/interfaces';
import { userHasRoles } from '@educt/helpers';
-/**
- * Returns the badge for user based on roles
- */
-const UserBadge: React.FC<{ roles: IUserRole[] }> = ({ roles }) => {
+export interface IUserBadgeProps extends BadgeProps {
+ roles: IUserRole[];
+}
+
+const UserBadge: React.FC = props => {
+ const { roles } = props;
const getCurrentRole = () => {
if (userHasRoles(roles, [UserRoleEnum.ADMIN])) return { name: 'Administrator', color: 'purple' };
if (userHasRoles(roles, [UserRoleEnum.TEACHER])) return { name: 'Teacher', color: 'orange' };
if (userHasRoles(roles, [UserRoleEnum.STUDENT])) return { name: 'Student', color: 'blue' };
- /**
- * The user has no roles
- */
return { name: 'Guest', color: 'gray' };
};
const role = getCurrentRole();
- if (role !== undefined) {
- return (
-
- {role.name}
-
- );
- }
-
- /**
- * Cannot find any role for user
- */
- return null;
+ return (
+
+ {role.name}
+
+ );
};
export default UserBadge;
diff --git a/src/components/UserProfile/Avatar/Avatar.tsx b/src/components/UserProfile/Avatar/Avatar.tsx
new file mode 100644
index 0000000..b0f7ede
--- /dev/null
+++ b/src/components/UserProfile/Avatar/Avatar.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Flex, Avatar as ChakraAvatar, AvatarBadge as ChakraAvatarBadge, useColorModeValue } from '@chakra-ui/react';
+import type { IAvatarProps } from '.';
+
+const Avatar: React.FC = props => {
+ const { name, isOnline } = props;
+ const onlineColor = isOnline ? 'green.500' : 'red.500';
+ const borderColor = useColorModeValue('#E2E8F0', '#2D3748');
+
+ return (
+
+
+ {isOnline !== undefined && }
+
+ {props.children}
+
+ );
+};
+
+export { Avatar };
diff --git a/src/components/UserProfile/Avatar/ChatButton.tsx b/src/components/UserProfile/Avatar/ChatButton.tsx
new file mode 100644
index 0000000..4186059
--- /dev/null
+++ b/src/components/UserProfile/Avatar/ChatButton.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button, ButtonProps } from '@chakra-ui/react';
+import { MdOutlineMessage } from 'react-icons/md';
+import { useHistory } from 'react-router-dom';
+import type { IChatButtonProps } from '.';
+
+const ChatButton: React.FC = props => {
+ const { userid } = props;
+ const history = useHistory();
+ const handleChat = () => history.push(`/messages?chat_id=${userid}`);
+
+ return (
+ } {...props}>
+ Chat
+
+ );
+};
+
+export { ChatButton };
diff --git a/src/components/UserProfile/Avatar/index.ts b/src/components/UserProfile/Avatar/index.ts
new file mode 100644
index 0000000..191590b
--- /dev/null
+++ b/src/components/UserProfile/Avatar/index.ts
@@ -0,0 +1,13 @@
+import { Avatar } from './Avatar';
+import { ChatButton } from './ChatButton';
+
+export interface IAvatarProps {
+ name: string;
+ isOnline?: boolean | undefined;
+}
+
+export interface IChatButtonProps {
+ userid: string;
+}
+
+export { Avatar, ChatButton };
diff --git a/src/components/UserProfile/Base/Base.tsx b/src/components/UserProfile/Base/Base.tsx
new file mode 100644
index 0000000..09e6f7c
--- /dev/null
+++ b/src/components/UserProfile/Base/Base.tsx
@@ -0,0 +1,12 @@
+import { Flex, FlexProps } from '@chakra-ui/react';
+import React from 'react';
+
+const Base: React.FC = props => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export { Base };
diff --git a/src/components/UserProfile/Base/index.ts b/src/components/UserProfile/Base/index.ts
new file mode 100644
index 0000000..32893c8
--- /dev/null
+++ b/src/components/UserProfile/Base/index.ts
@@ -0,0 +1 @@
+export { Base } from './Base';
diff --git a/src/components/UserProfile/Info/About.tsx b/src/components/UserProfile/Info/About.tsx
new file mode 100644
index 0000000..7f4fe5e
--- /dev/null
+++ b/src/components/UserProfile/Info/About.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import type { IAboutProps } from '.';
+
+const About: React.FC = ({ about }) => {
+ return (
+
+
+ {about ? (
+ about
+ ) : (
+
+ No description provided
+
+ )}
+
+
+ );
+};
+
+export { About };
diff --git a/src/components/UserProfile/Info/Contacts.tsx b/src/components/UserProfile/Info/Contacts.tsx
new file mode 100644
index 0000000..f3c8f4e
--- /dev/null
+++ b/src/components/UserProfile/Info/Contacts.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Button, HStack } from '@chakra-ui/react';
+import { FaPhone, FaTelegram, FaTwitter } from 'react-icons/fa';
+import type { IContactsProps } from '.';
+
+const Contacts: React.FC = observer(({ contacts }) => {
+ if (contacts === null) return null;
+
+ const { phone_number, twitter_id, telegram_id } = contacts;
+
+ const phoneHandler = () => window.open(`tel:${phone_number}`, '_blank');
+ const twitterHandler = () => window.open(`https://twitter.com/${twitter_id?.substring(1)}`, '_blank');
+ const telegramHandler = () => window.open(`https://t.me/${telegram_id?.substring(1)}`, '_blank');
+
+ return (
+
+ {phone_number && (
+ }>
+ Call me
+
+ )}
+ {twitter_id && (
+ }>
+ Twitter
+
+ )}
+ {telegram_id && (
+ }>
+ Telegram
+
+ )}
+
+ );
+});
+
+export { Contacts };
diff --git a/src/components/UserProfile/Info/Details.tsx b/src/components/UserProfile/Info/Details.tsx
new file mode 100644
index 0000000..b856a8a
--- /dev/null
+++ b/src/components/UserProfile/Info/Details.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import moment from 'moment';
+import { Flex, Text, Icon, Divider } from '@chakra-ui/react';
+import { CalendarIcon, RepeatClockIcon } from '@chakra-ui/icons';
+import type { IDetailsProps } from '.';
+
+const Details: React.FC = ({ registered, lastLogin }) => {
+ return (
+ <>
+
+
+
+
+
+ Joined: {new Date(registered).toLocaleDateString()}
+
+
+
+
+
+ Last login: {lastLogin ? `${moment(lastLogin).fromNow()}` : 'Never'}
+
+
+
+
+
+
+ );
+};
+
+export { Details };
diff --git a/src/components/UserProfile/Info/Heading.tsx b/src/components/UserProfile/Info/Heading.tsx
new file mode 100644
index 0000000..85778f9
--- /dev/null
+++ b/src/components/UserProfile/Info/Heading.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import UserBadge from '@educt/components/UserBadge';
+import { Flex, Box, Heading as ChakraHeading } from '@chakra-ui/react';
+import type { IHeadingProps } from '.';
+
+const Heading: React.FC = ({ fullname, roles }) => {
+ return (
+
+
+ {fullname} •
+
+
+
+
+
+ );
+};
+
+export { Heading };
diff --git a/src/components/UserProfile/Info/Info.tsx b/src/components/UserProfile/Info/Info.tsx
new file mode 100644
index 0000000..6faeb84
--- /dev/null
+++ b/src/components/UserProfile/Info/Info.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+
+const Info: React.FC = props => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export { Info };
diff --git a/src/components/UserProfile/Info/index.ts b/src/components/UserProfile/Info/index.ts
new file mode 100644
index 0000000..6f3cb03
--- /dev/null
+++ b/src/components/UserProfile/Info/index.ts
@@ -0,0 +1,26 @@
+import { IUser } from '@educt/interfaces';
+import { Info } from './Info';
+import { Heading } from './Heading';
+import { Details } from './Details';
+import { About } from './About';
+import { Contacts } from './Contacts';
+
+export interface IHeadingProps {
+ fullname: string;
+ roles: IUser['roles'];
+}
+
+export interface IDetailsProps {
+ registered: string;
+ lastLogin: IUser['last_login'];
+}
+
+export interface IAboutProps {
+ about: IUser['about'];
+}
+
+export interface IContactsProps {
+ contacts: IUser['contacts'];
+}
+
+export { Info, Heading, Details, About, Contacts };
diff --git a/src/components/UserProfile/Settings/Entry.tsx b/src/components/UserProfile/Settings/Entry.tsx
new file mode 100644
index 0000000..dda09f5
--- /dev/null
+++ b/src/components/UserProfile/Settings/Entry.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+
+const Entry: React.FC = props => {
+ return {props.children};
+};
+
+export { Entry };
diff --git a/src/components/UserProfile/Settings/EntryContent.tsx b/src/components/UserProfile/Settings/EntryContent.tsx
new file mode 100644
index 0000000..568ca77
--- /dev/null
+++ b/src/components/UserProfile/Settings/EntryContent.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Flex } from '@chakra-ui/react';
+
+const EntryContent: React.FC = props => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export { EntryContent };
diff --git a/src/components/UserProfile/Settings/Fields/index.tsx b/src/components/UserProfile/Settings/Fields/index.tsx
new file mode 100644
index 0000000..d810b4a
--- /dev/null
+++ b/src/components/UserProfile/Settings/Fields/index.tsx
@@ -0,0 +1,196 @@
+import React from 'react';
+import {
+ Box,
+ FormControl,
+ FormHelperText,
+ FormLabel,
+ Input,
+ InputGroup,
+ InputRightElement,
+ InputProps,
+ Button,
+ Textarea,
+ Text,
+ TextareaProps,
+ Select,
+ SelectProps,
+ Switch,
+ SwitchProps,
+ ButtonProps,
+} from '@chakra-ui/react';
+import { SaveButton } from '@educt/components/Buttons';
+
+/**
+ * Hooks
+ */
+import { useColorMode } from '@chakra-ui/react';
+import { useSettingsContext } from '../context';
+import { useHistory } from 'react-router-dom';
+
+const InputWithButton: React.FC<
+ InputProps & { buttonText?: string | undefined; buttonHandler?: () => void }
+> = props => {
+ const { buttonText, buttonHandler, ...inputProps } = props;
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export const FullnameInput: React.FC = props => (
+
+ Fullname
+
+
+);
+
+export const EmailInput: React.FC = props => {
+ const history = useHistory();
+
+ const onChangeEmail = () => history.push(`/profile/change-email`);
+
+ return (
+
+ Email
+
+
+ );
+};
+
+export const AboutInput: React.FC = props => {
+ const {
+ form: {
+ register,
+ formState: { errors },
+ },
+ } = useSettingsContext();
+
+ return (
+
+ About
+
+
+ {errors.about?.message}
+
+ Write description for your profile.
+
+ );
+};
+
+export const PhoneInput: React.FC = props => {
+ const {
+ form: {
+ register,
+ formState: { errors },
+ },
+ } = useSettingsContext();
+
+ return (
+
+ Phone
+
+
+ {errors.phone_number?.message}
+
+
+ );
+};
+
+export const TwitterInput: React.FC = props => {
+ const {
+ form: {
+ register,
+ formState: { errors },
+ },
+ } = useSettingsContext();
+
+ return (
+
+ Twitter
+
+
+ {errors.twitter_id?.message}
+
+
+ );
+};
+
+export const TelegramInput: React.FC = props => {
+ const {
+ form: {
+ register,
+ formState: { errors },
+ },
+ } = useSettingsContext();
+
+ return (
+
+ Telegram
+
+
+ {errors.telegram_id?.message}
+
+
+ );
+};
+
+export const PasswordInput: React.FC = props => {
+ const history = useHistory();
+
+ const onChangePassword = () => history.push(`/profile/change-password`);
+
+ return (
+
+ Password
+
+
+ );
+};
+
+export const LanguageSelect: React.FC = props => {
+ return (
+
+ Display Language
+
+
+ );
+};
+
+export const ThemeSwitcher: React.FC = props => {
+ const { colorMode, toggleColorMode } = useColorMode();
+
+ return (
+
+
+
+ );
+};
+
+export const SaveSettingsButton: React.FC = props => {
+ const {
+ form: {
+ formState: { isDirty },
+ },
+ isLoading,
+ } = useSettingsContext();
+
+ return (
+
+
+
+ );
+};
diff --git a/src/components/UserProfile/Settings/Settings.tsx b/src/components/UserProfile/Settings/Settings.tsx
new file mode 100644
index 0000000..eab189f
--- /dev/null
+++ b/src/components/UserProfile/Settings/Settings.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+ Box,
+ BoxProps,
+ Heading as ChakraHeading,
+ Divider,
+ InputProps,
+ TextareaProps,
+ Stack,
+ StackDivider,
+ SelectProps,
+ ButtonProps,
+} from '@chakra-ui/react';
+import { Title, ITitleProps } from './Title';
+import { Entry } from './Entry';
+import { EntryContent } from './EntryContent';
+import { SettingsContextProvider } from './SettingsContextProvider';
+
+/**
+ * Form input fields
+ */
+import {
+ FullnameInput,
+ EmailInput,
+ AboutInput,
+ PhoneInput,
+ TwitterInput,
+ TelegramInput,
+ PasswordInput,
+ LanguageSelect,
+ ThemeSwitcher,
+ SaveSettingsButton,
+} from './Fields';
+import { SwitchProps } from 'react-router-dom';
+
+export interface ISettingsComposition {
+ Title: React.FC;
+ Entry: React.FC;
+ EntryContent: React.FC;
+ FullnameInput: React.FC;
+ EmailInput: React.FC;
+ AboutInput: React.FC;
+ PhoneInput: React.FC;
+ TwitterInput: React.FC;
+ TelegramInput: React.FC;
+ PasswordInput: React.FC;
+ LanguageSelect: React.FC;
+ ThemeSwitcher: React.FC;
+ SaveSettingsButton: React.FC;
+}
+
+const Settings: React.FC & ISettingsComposition = props => {
+ return (
+
+
+
+ Account Settings
+
+
+ } spacing={'5'}>
+ {props.children}
+
+
+
+ );
+};
+
+Settings.Title = Title;
+Settings.Entry = Entry;
+Settings.EntryContent = EntryContent;
+Settings.FullnameInput = FullnameInput;
+Settings.EmailInput = EmailInput;
+Settings.AboutInput = AboutInput;
+Settings.PhoneInput = PhoneInput;
+Settings.TwitterInput = TwitterInput;
+Settings.TelegramInput = TelegramInput;
+Settings.PasswordInput = PasswordInput;
+Settings.LanguageSelect = LanguageSelect;
+Settings.ThemeSwitcher = ThemeSwitcher;
+Settings.SaveSettingsButton = SaveSettingsButton;
+
+export { Settings };
diff --git a/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.validator.ts b/src/components/UserProfile/Settings/Settings.validator.ts
similarity index 77%
rename from src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.validator.ts
rename to src/components/UserProfile/Settings/Settings.validator.ts
index 1d5a861..b2225d5 100644
--- a/src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.validator.ts
+++ b/src/components/UserProfile/Settings/Settings.validator.ts
@@ -1,6 +1,11 @@
import yup from '@educt/schema';
-const UpdateUserContactsSchema = yup.object().shape({
+const SettingsSchema = yup.object().shape({
+ about: yup
+ .string()
+ .max(250, 'Description must be at most 250 characters')
+ .transform(val => (!val ? null : val))
+ .nullable(true),
phone_number: yup
.string()
.isMobileValid(['en-US', 'ru-RU'], { strictMode: true })
@@ -16,11 +21,6 @@ const UpdateUserContactsSchema = yup.object().shape({
.matches(/(^|[^@\w])@(\w{1,64})\b/, 'Telegram username is not valid')
.transform(val => (!val ? null : val))
.nullable(true),
- vk_id: yup
- .string()
- .matches(/^([a-zA-Z0-9_]){1,64}$/, 'VKontakte username is not valid')
- .transform(val => (!val ? null : val))
- .nullable(true),
});
-export default UpdateUserContactsSchema;
+export { SettingsSchema };
diff --git a/src/components/UserProfile/Settings/SettingsContextProvider.tsx b/src/components/UserProfile/Settings/SettingsContextProvider.tsx
new file mode 100644
index 0000000..6e23b71
--- /dev/null
+++ b/src/components/UserProfile/Settings/SettingsContextProvider.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { runInAction } from 'mobx';
+import * as helpers from '@educt/helpers';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormTypes, SettingsContext } from './context';
+
+/**
+ * Hooks
+ */
+import { useForm } from 'react-hook-form';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { useUpdateUserInfo } from '@educt/hooks/queries';
+
+/**
+ * Validator
+ */
+import { SettingsSchema } from './Settings.validator';
+
+const SettingsContextProvider: React.FC = ({ children }) => {
+ const {
+ userStore: { me },
+ } = useRootStore();
+ const form = useForm({
+ resolver: yupResolver(SettingsSchema),
+ defaultValues: {
+ about: me?.about || '',
+ phone_number: me?.contacts?.phone_number || '',
+ twitter_id: me?.contacts?.twitter_id || '',
+ telegram_id: me?.contacts?.telegram_id || '',
+ },
+ });
+ const { updateInfo, isLoading } = useUpdateUserInfo();
+ const {
+ formState: { dirtyFields },
+ reset,
+ } = form;
+
+ const onSubmit = async (data: FormTypes) => {
+ try {
+ const updatedFields = helpers.getDirtyFields(dirtyFields, data);
+
+ const { about, phone_number, telegram_id, twitter_id } = await updateInfo(updatedFields);
+
+ /**
+ * Update info in store
+ */
+ runInAction(() => {
+ if (me !== null) {
+ me.about = about === undefined ? me.about : about;
+ me.contacts = {
+ phone_number: phone_number === undefined ? me.contacts?.phone_number || null : phone_number,
+ twitter_id: twitter_id === undefined ? me.contacts?.twitter_id || null : twitter_id,
+ telegram_id: telegram_id === undefined ? me.contacts?.telegram_id || null : telegram_id,
+ vk_id: null,
+ };
+ }
+ });
+
+ reset(data);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+
+
+
+ );
+};
+
+export { SettingsContextProvider };
diff --git a/src/components/UserProfile/Settings/Title.tsx b/src/components/UserProfile/Settings/Title.tsx
new file mode 100644
index 0000000..43d5fce
--- /dev/null
+++ b/src/components/UserProfile/Settings/Title.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, BoxProps, Heading } from '@chakra-ui/react';
+
+export interface ITitleProps {
+ title?: string | undefined;
+}
+
+const Title: React.FC = props => {
+ return (
+
+
+ {props.title}
+
+
+ );
+};
+
+export { Title };
diff --git a/src/components/UserProfile/Settings/context.ts b/src/components/UserProfile/Settings/context.ts
new file mode 100644
index 0000000..6478a08
--- /dev/null
+++ b/src/components/UserProfile/Settings/context.ts
@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+
+interface ISettingsContext {
+ form: UseFormReturn;
+ isLoading: boolean;
+}
+
+export type FormTypes = {
+ about: string;
+ phone_number: string;
+ twitter_id: string;
+ telegram_id: string;
+};
+
+export const SettingsContext = createContext(undefined);
+
+export const useSettingsContext = () => {
+ const context = useContext(SettingsContext);
+
+ if (!context) {
+ throw new Error('SettingsContext was outside of its provider');
+ }
+
+ return context;
+};
diff --git a/src/components/UserProfile/Settings/index.ts b/src/components/UserProfile/Settings/index.ts
new file mode 100644
index 0000000..ec5d979
--- /dev/null
+++ b/src/components/UserProfile/Settings/index.ts
@@ -0,0 +1 @@
+export { Settings } from './Settings';
diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
new file mode 100644
index 0000000..a3bdbd2
--- /dev/null
+++ b/src/components/UserProfile/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { BoxProps, Flex, FlexProps } from '@chakra-ui/react';
+import { Base } from './Base';
+import { Avatar, ChatButton, IAvatarProps, IChatButtonProps } from './Avatar';
+import {
+ About,
+ Contacts,
+ Details,
+ Heading,
+ IAboutProps,
+ IContactsProps,
+ IDetailsProps,
+ IHeadingProps,
+ Info,
+} from './Info';
+import { Settings } from './Settings';
+import { ISettingsComposition } from './Settings/Settings';
+
+interface IUserProfileComposition {
+ Base: React.FC;
+ Avatar: React.FC;
+ ChatButton: React.FC;
+ Info: React.FC;
+ Heading: React.FC;
+ Details: React.FC;
+ About: React.FC;
+ Contacts: React.FC;
+ Settings: React.FC & ISettingsComposition;
+}
+
+const UserProfile: React.FC & IUserProfileComposition = props => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+UserProfile.Base = Base;
+UserProfile.Avatar = Avatar;
+UserProfile.ChatButton = ChatButton;
+UserProfile.Info = Info;
+UserProfile.Heading = Heading;
+UserProfile.Details = Details;
+UserProfile.About = About;
+UserProfile.Contacts = Contacts;
+UserProfile.Settings = Settings;
+
+export { UserProfile };
diff --git a/src/components/VideoUploader/VideoUploader.tsx b/src/components/VideoUploader/VideoUploader.tsx
new file mode 100644
index 0000000..35c4023
--- /dev/null
+++ b/src/components/VideoUploader/VideoUploader.tsx
@@ -0,0 +1,127 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Flex, Box, Icon, Text, Button, Input, AspectRatio, useColorModeValue } from '@chakra-ui/react';
+import { MdUpload } from 'react-icons/md';
+import { VideoSupportedFormatsEnum } from '@educt/enums';
+import { LessonVideoType } from '@educt/types';
+
+type VideoUploaderPropsType = {
+ onChange: (file: File) => void;
+ file?: File | LessonVideoType | undefined;
+ preloadedVideoUrl?: string | undefined;
+};
+
+const VideoUploader: React.FC = ({ onChange, file, preloadedVideoUrl }) => {
+ const fileInputRef = useRef(null);
+ const videoRef = useRef(null);
+ const [videoObjectUrl, setVideoObjectUrl] = useState(undefined);
+ const isPreloadedVideo = preloadedVideoUrl !== undefined;
+
+ const onSelectFileHandler = () => {
+ if (fileInputRef.current) {
+ fileInputRef.current.click();
+ }
+ };
+
+ const onChangeFileHandler = (e: React.ChangeEvent) => {
+ e.preventDefault();
+
+ const { files } = e.target;
+
+ if (files && files.length !== 0) {
+ const file = files[0];
+
+ if (file.type.match('video.*')) {
+ onChange(file);
+ setVideoObjectUrl(prevUrl => {
+ prevUrl && URL.revokeObjectURL(prevUrl);
+ const newUrl = URL.createObjectURL(file);
+ return newUrl;
+ });
+ }
+ }
+ };
+
+ const ChangeVideoButton = () => (
+ } variant={'outline'} size='sm' mt='2' float='right'>
+ Change video
+
+ );
+
+ useEffect(() => {
+ if (videoRef.current) {
+ videoRef.current.load();
+ }
+ }, [videoObjectUrl]);
+
+ useEffect(() => {
+ if (file && file instanceof File) {
+ setVideoObjectUrl(URL.createObjectURL(file));
+ }
+ }, []);
+
+ return (
+
+ {file && videoObjectUrl ? (
+
+
+
+
+
+
+ ) : !isPreloadedVideo ? (
+
+
+
+
+
+
+ Upload a video file
+
+ The video will be uploaded to cloud or local storage depending on the server configuration.
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+ )}
+ `.${ext.toLowerCase()}`)
+ .join(', ')}
+ />
+
+ );
+};
+
+export default VideoUploader;
diff --git a/src/components/VideoUploader/index.ts b/src/components/VideoUploader/index.ts
new file mode 100644
index 0000000..a91e97c
--- /dev/null
+++ b/src/components/VideoUploader/index.ts
@@ -0,0 +1,3 @@
+import VideoUploader from './VideoUploader';
+
+export default VideoUploader;
diff --git a/src/config.ts b/src/config.ts
index 06102fe..b36b9ff 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,12 @@
import { UserRoleEnum } from '@educt/enums';
-import { MdAccountCircle, MdCollectionsBookmark, MdGroup, MdHome, MdMessage, MdList } from 'react-icons/md';
+import {
+ MdOutlineHome,
+ MdOutlineMessage,
+ MdOutlineCollectionsBookmark,
+ MdOutlineGroup,
+ MdOutlineAccountCircle,
+ MdOutlineCategory,
+} from 'react-icons/md';
import { IAppConfig } from './interfaces';
import packageJson from '../package.json';
@@ -11,28 +18,29 @@ const config: IAppConfig = {
appName: 'Educt',
appDescription: 'Learning management system',
appVersion: packageJson.version,
+ appGithubLink: 'https://github.com/sergeyyarkov/educt-client',
},
/**
* Links that are rendered in the navigation
*/
links: [
- { location: '/', title: 'Main', public: true, icon: MdHome },
- { location: '/courses', title: 'Courses', public: true, icon: MdCollectionsBookmark },
+ { location: '/', title: 'Main', public: true, icon: MdOutlineHome },
+ { location: '/courses', title: 'Courses', public: true, icon: MdOutlineCollectionsBookmark },
{
- location: '/lessons',
- title: 'Lessons',
+ location: '/categories',
+ title: 'Categories',
public: false,
- icon: MdList,
roles: [UserRoleEnum.ADMIN, UserRoleEnum.TEACHER],
+ icon: MdOutlineCategory,
},
- { location: '/messages', title: 'Messages', public: true, icon: MdMessage },
- { location: '/profile', title: 'Profile', public: true, icon: MdAccountCircle },
+ { location: '/messages', title: 'Messages', public: true, icon: MdOutlineMessage },
+ { location: '/profile', title: 'Profile', public: true, icon: MdOutlineAccountCircle },
{
location: '/users',
title: 'Users',
public: false,
roles: [UserRoleEnum.ADMIN, UserRoleEnum.TEACHER],
- icon: MdGroup,
+ icon: MdOutlineGroup,
},
],
};
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index 6174192..3b545c7 100644
--- a/src/contexts/index.ts
+++ b/src/contexts/index.ts
@@ -1,34 +1,33 @@
import { createContext } from 'react';
import { ChangeEmailPageContextType, CoursesPageContextType, UsersPageContextType } from '@educt/types';
import RootStore from '../stores/RootStore';
+import { Socket } from 'socket.io-client';
export const StoreContext = createContext(undefined);
+export const SocketContext = createContext<{ socket: Socket | null }>({
+ socket: null,
+});
+
export const ChangeEmailPageContext = createContext({
isCodeSent: false,
- setIsCodeSent: () => {},
+ setIsCodeSent: () => null,
confirmEmailData: undefined,
- setConfirmEmailData: () => {},
+ setConfirmEmailData: () => null,
});
export const UsersPageContext = createContext({
searchingRole: undefined,
- setSearchingRole: () => {},
+ setSearchingRole: () => null,
searchingPage: 1,
- setSearchingPage: () => {},
+ setSearchingPage: () => null,
search: undefined,
- setSearch: () => {},
- editingUser: undefined,
- setEditingUser: () => {},
- deletingUser: undefined,
- setDeletingUser: () => {},
+ setSearch: () => null,
});
export const CoursesPageContext = createContext({
selectedCategory: undefined,
- setSelectedCategory: () => {},
+ setSelectedCategory: () => null,
courseStatus: undefined,
- setCourseStatus: () => {},
- deletingCourse: undefined,
- setDeletingCourse: () => {},
+ setCourseStatus: () => null,
});
diff --git a/src/enums/index.ts b/src/enums/index.ts
index c3fc012..429a7e7 100644
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@@ -8,3 +8,19 @@ export enum CourseStatusEnum {
PUBLISHED = 'PUBLISHED',
DRAFT = 'DRAFT',
}
+
+export enum VideoSupportedFormatsEnum {
+ MP4 = 'video/mp4',
+ MOV = 'video/quicktime',
+ AVI = 'video/x-msvideo',
+ WMV = 'video/x-ms-wmv',
+ FLV = 'video/x-flv',
+}
+
+export enum FileSupportedFormatsEnum {
+ PDF = 'application/pdf',
+ ZIP = 'application/x-zip-compressed',
+ RAR = 'application/x-rar-compressed',
+ DOC = 'application/msword',
+ DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+}
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 71a7dbf..585af3d 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,5 +1,5 @@
import { UserRoleEnum } from '@educt/enums';
-import { IUserRole } from '@educt/interfaces';
+import { ICourse, IUserRole, UserCourseType } from '@educt/interfaces';
export function userHasRoles(userRoles: IUserRole[], roles: UserRoleEnum[]): boolean {
for (let i = 0; i < roles.length; i += 1) {
@@ -31,6 +31,7 @@ export function userContainRoles(userRoles: IUserRole[], roles: UserRoleEnum[]):
* @returns Clean object that don't have null values
*/
export function removeEmptyValues(obj: object) {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
return Object.fromEntries(Object.entries(obj).filter(([_, value]) => value !== null));
}
@@ -46,7 +47,21 @@ export function transformToFormData(data: object): FormData {
/**
* Append value to form-data format
*/
- Object.entries(data).forEach(([key, value]) => value && formData.append(key, value));
+ Object.entries(data).forEach(([key, value]) => {
+ if (value !== undefined) {
+ if (Array.isArray(value)) {
+ value.forEach((v, i) => formData.append(`${key}[${i}]`, v));
+ return;
+ }
+
+ if (value === null) {
+ formData.append(key, '');
+ return;
+ }
+
+ formData.append(key, value);
+ }
+ });
return formData;
}
@@ -70,6 +85,11 @@ export function transformBytes(bytes: number, decimals = 2): string {
return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
}
+export function transformBlobToFile(blob: Blob, fileName: string) {
+ const file = new File([blob], fileName, { type: blob.type });
+ return file;
+}
+
/**
*
* @param array Array
@@ -84,3 +104,12 @@ export function arrayMove(array: T[], from: number, to: number) {
result.splice(to, 0, removed);
return result;
}
+
+export function getDirtyFields(dirtyFields: { [key: string]: boolean | undefined }, data: T) {
+ return Object.fromEntries(Object.keys(dirtyFields).map(k => [k, data[k as keyof T]]));
+}
+
+export function userHasCourse(findingCourse: ICourse, userCourses?: Array | undefined) {
+ if (!userCourses) return true;
+ return userCourses.some(course => course.id === findingCourse.id);
+}
diff --git a/src/hooks/useLoginQuery.ts b/src/hooks/queries/auth/useLogin.ts
similarity index 65%
rename from src/hooks/useLoginQuery.ts
rename to src/hooks/queries/auth/useLogin.ts
index f1bf2e1..1e4a9d2 100644
--- a/src/hooks/useLoginQuery.ts
+++ b/src/hooks/queries/auth/useLogin.ts
@@ -1,11 +1,16 @@
import { useToast } from '@chakra-ui/react';
-import { IApiRespose, IToken } from '@educt/interfaces';
+import { SocketContext } from '@educt/contexts';
+import { IToken } from '@educt/interfaces';
+import { useContext } from 'react';
import { useErrorHandler } from 'react-error-boundary';
-import useAsync from './useAsync';
-import { useRootStore } from './useRootStore';
+import useAsync from '../../useAsync';
+import { useRootStore } from '../../useRootStore';
-const useLoginQuery = () => {
+type LoginResultDataType = IToken;
+
+const useLogin = () => {
const { authStore } = useRootStore();
+ const { socket } = useContext(SocketContext);
const toast = useToast();
const handleError = useErrorHandler();
@@ -18,19 +23,17 @@ const useLoginQuery = () => {
isClosable: true,
status: 'success',
});
+ socket?.connect();
return result.data;
} catch (error: any) {
if (error.response) {
- /**
- * Handle response error
- */
switch (error.response.status) {
case 404:
toast({ title: 'User not found in a system.', status: 'error', duration: 2000 });
- throw error;
+ break;
case 401:
toast({ title: 'Invalid password.', status: 'error', duration: 2000 });
- throw error;
+ break;
default:
handleError(error);
break;
@@ -38,12 +41,14 @@ const useLoginQuery = () => {
} else {
handleError(error);
}
+
+ return Promise.reject(error);
}
};
- const { execute, ...state } = useAsync>(login);
+ const { execute, ...state } = useAsync>(login);
return { login: execute, ...state };
};
-export default useLoginQuery;
+export { useLogin };
diff --git a/src/hooks/queries/auth/useLogout.ts b/src/hooks/queries/auth/useLogout.ts
new file mode 100644
index 0000000..3d1008b
--- /dev/null
+++ b/src/hooks/queries/auth/useLogout.ts
@@ -0,0 +1,52 @@
+import { useToast } from '@chakra-ui/react';
+import { useHistory } from 'react-router-dom';
+import { useRootStore } from '../../useRootStore';
+import { useErrorHandler } from 'react-error-boundary';
+import useAsync from '../../useAsync';
+import { useContext } from 'react';
+
+/**
+ * Contexts
+ */
+import { SocketContext } from '@educt/contexts';
+
+type LogoutResultDataType = Record;
+
+const useLogout = () => {
+ const { authStore } = useRootStore();
+ const { socket } = useContext(SocketContext);
+ const history = useHistory();
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const logout = async () => {
+ try {
+ const result = await authStore.logout();
+
+ history.push('/auth');
+ toast({ title: 'You are logged out.', isClosable: true, status: 'info' });
+
+ /**
+ * Destroy session
+ */
+ if (socket) {
+ window.localStorage.removeItem('sessionId');
+
+ socket.auth = { sessionId: undefined };
+ socket.emit('user:logout');
+ socket.disconnect();
+ }
+
+ return result.data;
+ } catch (error) {
+ handleError(error);
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(logout);
+
+ return { logout: execute, ...state };
+};
+
+export { useLogout };
diff --git a/src/hooks/queries/category/useCreateCategory.ts b/src/hooks/queries/category/useCreateCategory.ts
new file mode 100644
index 0000000..68ba18f
--- /dev/null
+++ b/src/hooks/queries/category/useCreateCategory.ts
@@ -0,0 +1,43 @@
+import axios from 'axios';
+import { useToast } from '@chakra-ui/react';
+import useAsync from '@educt/hooks/useAsync';
+import { ICategory } from '@educt/interfaces';
+import { CategoryServiceInstance } from '@educt/services';
+import { CreateCategoryParamsType } from '@educt/types';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useCreateCategory = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const create = async (data: CreateCategoryParamsType) => {
+ try {
+ const result = await CategoryServiceInstance.create(data);
+ return result.data;
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ switch (error.response.status) {
+ case 422:
+ toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
+ break;
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+ } else {
+ handleError(error);
+ }
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: createCategory, ...state } = useAsync>(create);
+
+ return { createCategory, ...state };
+};
+
+export { useCreateCategory };
diff --git a/src/hooks/queries/category/useDeleteCategory.ts b/src/hooks/queries/category/useDeleteCategory.ts
new file mode 100644
index 0000000..6d657c5
--- /dev/null
+++ b/src/hooks/queries/category/useDeleteCategory.ts
@@ -0,0 +1,34 @@
+import axios from 'axios';
+import { CategoryServiceInstance } from '@educt/services';
+import { useErrorHandler } from 'react-error-boundary';
+import { ICategory } from '@educt/interfaces';
+import { useToast } from '@chakra-ui/react';
+import useAsync from '@educt/hooks/useAsync';
+
+const useDeleteCategory = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const query = async (id: string) => {
+ try {
+ const result = await CategoryServiceInstance.delete(id);
+ toast({ title: 'Category deleted.', status: 'info' });
+ return result.data;
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ console.error('Error: ', error);
+ } else {
+ handleError(error);
+ }
+ }
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: deleteCategory, ...state } = useAsync>(query);
+
+ return { deleteCategory, ...state };
+};
+
+export { useDeleteCategory };
diff --git a/src/hooks/queries/category/useFetchCategories.ts b/src/hooks/queries/category/useFetchCategories.ts
new file mode 100644
index 0000000..38967ba
--- /dev/null
+++ b/src/hooks/queries/category/useFetchCategories.ts
@@ -0,0 +1,29 @@
+import useAsync from '@educt/hooks/useAsync';
+import { ICategory } from '@educt/interfaces';
+import { CategoryServiceInstance } from '@educt/services';
+import { useEffect } from 'react';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useFetchCategories = () => {
+ const handleError = useErrorHandler();
+
+ const fetchCategories = async () => {
+ try {
+ const result = await CategoryServiceInstance.fetchAll();
+ return result.data;
+ } catch (error) {
+ handleError(error);
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: fetch, ...state } = useAsync>(fetchCategories);
+
+ useEffect(() => {
+ fetch();
+ }, []);
+
+ return { ...state };
+};
+
+export { useFetchCategories };
diff --git a/src/hooks/queries/category/useUpdateCategory.ts b/src/hooks/queries/category/useUpdateCategory.ts
new file mode 100644
index 0000000..c8296f0
--- /dev/null
+++ b/src/hooks/queries/category/useUpdateCategory.ts
@@ -0,0 +1,42 @@
+import axios from 'axios';
+import { ICategory } from '@educt/interfaces';
+import { CategoryServiceInstance } from '@educt/services';
+import { UpdateCategoryParamsType } from '@educt/types';
+import useAsync from '@educt/hooks/useAsync';
+import { useToast } from '@chakra-ui/react';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useUpdateCategory = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const update = async (id: string, data: UpdateCategoryParamsType) => {
+ try {
+ const result = await CategoryServiceInstance.update(id, data);
+ toast({ title: 'Category updated.', status: 'info' });
+ return result.data;
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ switch (error.response.status) {
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: updateCategory, ...state } = useAsync>(update);
+
+ return { updateCategory, ...state };
+};
+
+export { useUpdateCategory };
diff --git a/src/hooks/queries/chat/useFetchConversations.ts b/src/hooks/queries/chat/useFetchConversations.ts
new file mode 100644
index 0000000..394dd63
--- /dev/null
+++ b/src/hooks/queries/chat/useFetchConversations.ts
@@ -0,0 +1,25 @@
+import useAsync from '@educt/hooks/useAsync';
+import { ChatServiceInstance } from '@educt/services/ChatService';
+import { ConversationType } from '@educt/types';
+import { useEffect } from 'react';
+
+const useFetchConversations = () => {
+ const fetch = async () => {
+ try {
+ const result = await ChatServiceInstance.fetchConversations();
+ return result.data;
+ } catch (error) {
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: fetchConversations, ...state } = useAsync>(fetch);
+
+ useEffect(() => {
+ fetchConversations();
+ }, []);
+
+ return { ...state };
+};
+
+export { useFetchConversations };
diff --git a/src/hooks/queries/course/useAttachStudents.ts b/src/hooks/queries/course/useAttachStudents.ts
new file mode 100644
index 0000000..280b96c
--- /dev/null
+++ b/src/hooks/queries/course/useAttachStudents.ts
@@ -0,0 +1,28 @@
+import { useToast } from '@chakra-ui/toast';
+import { useErrorHandler } from 'react-error-boundary';
+import useAsync from '@educt/hooks/useAsync';
+import { CourseServiceInstance } from '@educt/services';
+
+type AttachedStudentsDataType = Record;
+
+const useAttachStudents = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const attachStudents = async (courseId: string, ids: Array) => {
+ try {
+ const result = await CourseServiceInstance.attachStudentsList(courseId, ids);
+ toast({ title: 'Student(s) attached to the course.', status: 'info' });
+ return result.data;
+ } catch (error) {
+ handleError(error);
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(attachStudents);
+
+ return { attachStudents: execute, ...state };
+};
+
+export { useAttachStudents };
diff --git a/src/hooks/queries/course/useCreateCourse.ts b/src/hooks/queries/course/useCreateCourse.ts
new file mode 100644
index 0000000..9fc54c2
--- /dev/null
+++ b/src/hooks/queries/course/useCreateCourse.ts
@@ -0,0 +1,51 @@
+import { useToast } from '@chakra-ui/toast';
+import { CourseStatusEnum } from '@educt/enums';
+import { ICourse } from '@educt/interfaces';
+import { CourseServiceInstance } from '@educt/services';
+import { CreateCourseParamsType } from '@educt/types';
+import { useErrorHandler } from 'react-error-boundary';
+import useAsync from '../../useAsync';
+
+type CreatedCourseDataType = Pick;
+
+const useCreateCourse = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const createCourse = async (data: CreateCourseParamsType) => {
+ try {
+ const result = await CourseServiceInstance.create({
+ title: data.title,
+ description: data.description,
+ education_description: data.education_description,
+ teacher_id: data.teacher_id,
+ category_id: data.category_id,
+ image: data.image,
+ status: CourseStatusEnum.DRAFT,
+ });
+ toast({ title: `Course successfully created.`, status: 'success' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ switch (error.response.status) {
+ case 422:
+ toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
+ break;
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(createCourse);
+
+ return { createCourse: execute, ...state };
+};
+
+export { useCreateCourse };
diff --git a/src/hooks/queries/course/useDeleteCourse.ts b/src/hooks/queries/course/useDeleteCourse.ts
new file mode 100644
index 0000000..9f67b8b
--- /dev/null
+++ b/src/hooks/queries/course/useDeleteCourse.ts
@@ -0,0 +1,35 @@
+import { useToast } from '@chakra-ui/toast';
+import { ICourse } from '@educt/interfaces';
+import { useErrorHandler } from 'react-error-boundary';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import useAsync from '@educt/hooks/useAsync';
+
+type DeletedCourseDataType = Omit;
+
+const useDeleteCourse = () => {
+ const { courseStore } = useRootStore();
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const deleteCourse = async (id: string) => {
+ try {
+ const result = await courseStore.deleteCourse(id);
+ toast({ title: 'Course deleted.', status: 'info' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ toast({ title: error.message, status: 'error' });
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(deleteCourse);
+
+ return { deleteCourse: execute, ...state };
+};
+
+export { useDeleteCourse };
diff --git a/src/hooks/queries/course/useDetachStudents.ts b/src/hooks/queries/course/useDetachStudents.ts
new file mode 100644
index 0000000..6cf3876
--- /dev/null
+++ b/src/hooks/queries/course/useDetachStudents.ts
@@ -0,0 +1,29 @@
+import { useToast } from '@chakra-ui/toast';
+import { useErrorHandler } from 'react-error-boundary';
+import useAsync from '@educt/hooks/useAsync';
+import { CourseServiceInstance } from '@educt/services';
+
+type DetachedStudentsDataType = Record;
+
+const useDetachStudents = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const detachStudents = async (courseId: string, ids: Array) => {
+ try {
+ const result = await CourseServiceInstance.detachStudentsList(courseId, ids);
+ toast({ title: 'Student(s) detached from course.', status: 'info' });
+ return result.data;
+ } catch (error) {
+ handleError(error);
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(detachStudents);
+
+ return { detachStudents: execute, ...state };
+};
+
+export { useDetachStudents };
diff --git a/src/hooks/queries/course/useFetchCourse.ts b/src/hooks/queries/course/useFetchCourse.ts
new file mode 100644
index 0000000..636ad5a
--- /dev/null
+++ b/src/hooks/queries/course/useFetchCourse.ts
@@ -0,0 +1,28 @@
+/**
+ * Types
+ */
+import { ICourse } from '@educt/interfaces';
+import { CourseServiceInstance } from '@educt/services';
+
+/**
+ * Hooks
+ */
+import { useEffect } from 'react';
+import useAsync from '../../useAsync';
+
+const useFetchCourse = (id: string) => {
+ const fetch = async (id: string) => {
+ const { data } = await CourseServiceInstance.fetchById(id);
+ return data;
+ };
+
+ const { execute: fetchCourseById, ...state } = useAsync>(fetch);
+
+ useEffect(() => {
+ fetchCourseById(id);
+ }, [id]);
+
+ return { ...state };
+};
+
+export { useFetchCourse };
diff --git a/src/hooks/queries/course/useFetchCourseLessons.ts b/src/hooks/queries/course/useFetchCourseLessons.ts
new file mode 100644
index 0000000..644102f
--- /dev/null
+++ b/src/hooks/queries/course/useFetchCourseLessons.ts
@@ -0,0 +1,21 @@
+import useAsync from '@educt/hooks/useAsync';
+import { ILesson } from '@educt/interfaces';
+import { CourseServiceInstance } from '@educt/services';
+
+const useFetchCourseLessons = () => {
+ const fetch = async (id: string) => {
+ try {
+ const { data } = await CourseServiceInstance.fetchLessonsById(id);
+ return data;
+ } catch (error) {
+ console.error(error);
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync, Parameters>(fetch);
+
+ return { fetchCourseLessons: execute, ...state };
+};
+
+export { useFetchCourseLessons };
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[],
+ Parameters
+ >(fetchCourses);
+
+ useEffect(() => {
+ fetch(params);
+ }, []);
+
+ return { ...state };
+};
+
+export { useFetchCourses };
diff --git a/src/hooks/useSetCourseStatusQuery.ts b/src/hooks/queries/course/useSetCourseStatus.ts
similarity index 67%
rename from src/hooks/useSetCourseStatusQuery.ts
rename to src/hooks/queries/course/useSetCourseStatus.ts
index 853988c..db1cd58 100644
--- a/src/hooks/useSetCourseStatusQuery.ts
+++ b/src/hooks/queries/course/useSetCourseStatus.ts
@@ -3,17 +3,14 @@
*/
import { CourseStatusEnum } from '@educt/enums';
import { useErrorHandler } from 'react-error-boundary';
-import useAsync from './useAsync';
-import { useRootStore } from './useRootStore';
+import useAsync from '../../useAsync';
+import { useRootStore } from '../../useRootStore';
import { useToast } from '@chakra-ui/toast';
-type QueryResponseDataType = {} | undefined;
-export type SetCourseStatusFnType = (
- id: string,
- newStatus: CourseStatusEnum
-) => Promise;
+type SetCourseStatusResultDataType = Record;
+export type SetCourseStatusFnType = (id: string, newStatus: CourseStatusEnum) => Promise;
-const useSetCourseStatusQuery = () => {
+const useSetCourseStatus = () => {
const { courseStore } = useRootStore();
const toast = useToast();
const handleError = useErrorHandler();
@@ -38,12 +35,16 @@ const useSetCourseStatusQuery = () => {
} else {
handleError(error);
}
+
+ return Promise.reject(error);
}
};
- const { execute, ...state } = useAsync>(setCourseStatus);
+ const { execute, ...state } = useAsync>(
+ setCourseStatus
+ );
return { setCourseStatus: execute, ...state };
};
-export default useSetCourseStatusQuery;
+export { useSetCourseStatus };
diff --git a/src/hooks/queries/course/useUpdateCourse.ts b/src/hooks/queries/course/useUpdateCourse.ts
new file mode 100644
index 0000000..afc291f
--- /dev/null
+++ b/src/hooks/queries/course/useUpdateCourse.ts
@@ -0,0 +1,42 @@
+import { useToast } from '@chakra-ui/toast';
+import { useErrorHandler } from 'react-error-boundary';
+import { CourseServiceInstance } from '@educt/services';
+import { UpdateCourseParamsType } from '@educt/types';
+import useAsync from '../../useAsync';
+import { ICourse } from '@educt/interfaces';
+
+type UpdatedCourseDataType = Omit;
+
+const useUpdateCourse = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const updateCourse = async (id: string, data: UpdateCourseParamsType) => {
+ try {
+ const result = await CourseServiceInstance.update(id, {
+ title: data.title,
+ description: data.description,
+ education_description: data.education_description,
+ teacher_id: data.teacher_id,
+ category_id: data.category_id,
+ image: data.image,
+ });
+ toast({ title: `Course updated.`, status: 'info' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ toast({ title: `${error.message}`, status: 'error' });
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(updateCourse);
+
+ return { updateCourse: execute, ...state };
+};
+
+export { useUpdateCourse };
diff --git a/src/hooks/queries/index.ts b/src/hooks/queries/index.ts
new file mode 100644
index 0000000..325df9a
--- /dev/null
+++ b/src/hooks/queries/index.ts
@@ -0,0 +1,80 @@
+/**
+ * Auth
+ */
+import { useLogin } from './auth/useLogin';
+import { useLogout } from './auth/useLogout';
+
+/**
+ * Lesson
+ */
+import { useCreateLesson } from './lesson/useCreateLesson';
+import { useDeleteLesson } from './lesson/useDeleteLesson';
+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';
+import { useSetCourseStatus } from './course/useSetCourseStatus';
+import { useAttachStudents } from './course/useAttachStudents';
+import { useDetachStudents } from './course/useDetachStudents';
+
+/**
+ * User
+ */
+import { useFetchUsers } from './user/useFetchUsers';
+import { useFetchUser } from './user/useFetchUser';
+import { useCreateUser } from './user/useCreateUser';
+import { useDeleteUser } from './user/useDeleteUser';
+import { useUpdateUser } from './user/useUpdateUser';
+import { useUpdateUserEmail } from './user/useUpdateUserEmail';
+import { useUpdateUserInfo } from './user/useUpdateUserInfo';
+
+/**
+ * Category
+ */
+import { useFetchCategories } from './category/useFetchCategories';
+import { useCreateCategory } from './category/useCreateCategory';
+import { useDeleteCategory } from './category/useDeleteCategory';
+import { useUpdateCategory } from './category/useUpdateCategory';
+
+/**
+ * Stat
+ */
+import { useFetchStat } from './stat/useFetchStat';
+
+/**
+ * Chat
+ */
+import { useFetchConversations } from './chat/useFetchConversations';
+
+export {
+ useLogin,
+ useLogout,
+ useFetchCourses,
+ useCreateCourse,
+ useUpdateCourse,
+ useFetchCourse,
+ useSetCourseStatus,
+ useAttachStudents,
+ useDetachStudents,
+ useCreateLesson,
+ useDeleteLesson,
+ useUpdateLesson,
+ useFetchUsers,
+ useFetchUser,
+ useCreateUser,
+ useDeleteUser,
+ useUpdateUser,
+ useUpdateUserInfo,
+ useUpdateUserEmail,
+ useCreateCategory,
+ useDeleteCategory,
+ useUpdateCategory,
+ useFetchCategories,
+ useFetchStat,
+ useFetchConversations,
+};
diff --git a/src/hooks/queries/lesson/useCreateLesson.ts b/src/hooks/queries/lesson/useCreateLesson.ts
new file mode 100644
index 0000000..b58dec3
--- /dev/null
+++ b/src/hooks/queries/lesson/useCreateLesson.ts
@@ -0,0 +1,45 @@
+import axios from 'axios';
+import { ILesson } from '@educt/interfaces';
+import { LessonServiceInstance } from '@educt/services';
+import type { CreateLessonParamsType } from '@educt/types';
+import useAsync from '@educt/hooks/useAsync';
+import { useErrorHandler } from 'react-error-boundary';
+import { useToast } from '@chakra-ui/react';
+
+const useCreateLesson = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const createLesson = async (data: CreateLessonParamsType) => {
+ try {
+ const result = await LessonServiceInstance.create(data);
+ toast({ title: `Lesson successfully created.`, status: 'success' });
+ return result.data;
+ } catch (error: unknown) {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ switch (error.response.status) {
+ case 422:
+ toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
+ break;
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(createLesson);
+
+ return { createLesson: execute, ...state };
+};
+
+export { useCreateLesson };
diff --git a/src/hooks/queries/lesson/useDeleteLesson.ts b/src/hooks/queries/lesson/useDeleteLesson.ts
new file mode 100644
index 0000000..46e2459
--- /dev/null
+++ b/src/hooks/queries/lesson/useDeleteLesson.ts
@@ -0,0 +1,34 @@
+import { useToast } from '@chakra-ui/toast';
+import { ILesson } from '@educt/interfaces';
+import { LessonServiceInstance } from '@educt/services';
+import { useErrorHandler } from 'react-error-boundary';
+import useAsync from '../../useAsync';
+
+type CreatedLessonDataType = ILesson;
+
+const useDeleteLesson = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const deleteLesson = async (id: string) => {
+ try {
+ const result = await LessonServiceInstance.deleteLesson(id);
+ toast({ title: 'Lesson deleted.', status: 'info' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ console.error('Error: ', error);
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(deleteLesson);
+
+ return { deleteLesson: execute, ...state };
+};
+
+export { useDeleteLesson };
diff --git a/src/hooks/queries/lesson/useFetchLesson.ts b/src/hooks/queries/lesson/useFetchLesson.ts
new file mode 100644
index 0000000..ddf6915
--- /dev/null
+++ b/src/hooks/queries/lesson/useFetchLesson.ts
@@ -0,0 +1,37 @@
+import { ILesson } from '@educt/interfaces';
+import { LessonServiceInstance } from '@educt/services';
+import useAsync from '@educt/hooks/useAsync';
+import { useEffect } from 'react';
+import { useToast } from '@chakra-ui/react';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useFetchLesson = (id: string) => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const fetch = async (id: string) => {
+ try {
+ const { data } = await LessonServiceInstance.fetchLessonById(id);
+ return data;
+ } catch (error: any) {
+ if (error.response) {
+ if (error.response.status === 403) {
+ toast({ title: 'You are not able to view this lesson.', status: 'warning' });
+ }
+ } else {
+ handleError(error);
+ }
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: fetchLessonById, ...state } = useAsync>(fetch);
+
+ useEffect(() => {
+ fetchLessonById(id);
+ }, [id]);
+
+ return { ...state };
+};
+
+export { useFetchLesson };
diff --git a/src/hooks/queries/lesson/useFetchLessonProgress.ts b/src/hooks/queries/lesson/useFetchLessonProgress.ts
new file mode 100644
index 0000000..da9facf
--- /dev/null
+++ b/src/hooks/queries/lesson/useFetchLessonProgress.ts
@@ -0,0 +1,22 @@
+import { LessonServiceInstance } from '@educt/services';
+import type { LessonProgress } from '@educt/types';
+import useAsync from '../../useAsync';
+
+const useFetchLessonProgress = () => {
+ const fetch = async (id: string) => {
+ try {
+ const result = await LessonServiceInstance.fetchProgress(id);
+ return result.data;
+ } catch (error) {
+ console.error(error);
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(fetch);
+
+ return { fetchLessonProgress: execute, ...state };
+};
+
+export { useFetchLessonProgress };
diff --git a/src/hooks/queries/lesson/useUpdateLesson.ts b/src/hooks/queries/lesson/useUpdateLesson.ts
new file mode 100644
index 0000000..ddda82e
--- /dev/null
+++ b/src/hooks/queries/lesson/useUpdateLesson.ts
@@ -0,0 +1,42 @@
+import { useToast } from '@chakra-ui/react';
+import useAsync from '@educt/hooks/useAsync';
+import { ILesson } from '@educt/interfaces';
+import { LessonServiceInstance } from '@educt/services';
+import { UpdateLessonParamsType } from '@educt/types';
+import axios from 'axios';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useUpdateLesson = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const updateLesson = async (id: string, data: UpdateLessonParamsType) => {
+ try {
+ const result = await LessonServiceInstance.update(id, data);
+ toast({ title: 'Lesson updated', status: 'info' });
+ return result.data;
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ switch (error.response.status) {
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(updateLesson);
+
+ return { updateLesson: execute, ...state };
+};
+
+export { useUpdateLesson };
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/hooks/queries/user/useCreateUser.ts b/src/hooks/queries/user/useCreateUser.ts
new file mode 100644
index 0000000..9753f2c
--- /dev/null
+++ b/src/hooks/queries/user/useCreateUser.ts
@@ -0,0 +1,43 @@
+import { useErrorHandler } from 'react-error-boundary';
+import { CreateUserParamsType, FetchUsersParamsType } from '@educt/types';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { useToast } from '@chakra-ui/toast';
+import { IUser } from '@educt/interfaces';
+import useAsync from '@educt/hooks/useAsync';
+
+type CreatedUserDataType = IUser;
+
+const useCreateUser = () => {
+ const { userStore } = useRootStore();
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const createUser = async (data: CreateUserParamsType, paramsContext?: FetchUsersParamsType | undefined) => {
+ try {
+ const result = await userStore.createUser(data, paramsContext);
+ toast({ title: 'User created.', status: 'info' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ switch (error.response.status) {
+ case 422:
+ toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
+ break;
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(createUser);
+
+ return { createUser: execute, ...state };
+};
+
+export { useCreateUser };
diff --git a/src/hooks/queries/user/useDeleteUser.ts b/src/hooks/queries/user/useDeleteUser.ts
new file mode 100644
index 0000000..6f19f81
--- /dev/null
+++ b/src/hooks/queries/user/useDeleteUser.ts
@@ -0,0 +1,36 @@
+import { useToast } from '@chakra-ui/toast';
+import useAsync from '@educt/hooks/useAsync';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { IUser } from '@educt/interfaces';
+import { FetchUsersParamsType } from '@educt/types';
+import { useErrorHandler } from 'react-error-boundary';
+
+type DeletedUserDataType = IUser;
+
+const useDeleteUser = () => {
+ const { userStore } = useRootStore();
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const deleteUser = async (id: string, paramsContext?: FetchUsersParamsType | undefined) => {
+ try {
+ const result = await userStore.deleteUser(id, paramsContext);
+ toast({ title: 'User deleted.', status: 'info' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ toast({ title: error.message, status: 'error' });
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(deleteUser);
+
+ return { deleteUser: execute, ...state };
+};
+
+export { useDeleteUser };
diff --git a/src/hooks/queries/user/useFetchUser.ts b/src/hooks/queries/user/useFetchUser.ts
new file mode 100644
index 0000000..3b27c66
--- /dev/null
+++ b/src/hooks/queries/user/useFetchUser.ts
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import useAsync from '@educt/hooks/useAsync';
+import { IUser } from '@educt/interfaces';
+import { UserServiceInstance } from '@educt/services';
+
+const useFetchUser = (id: string) => {
+ const fetch = async (id: string) => {
+ try {
+ const { data } = await UserServiceInstance.fetchUserById(id);
+ return data;
+ } catch (error) {
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: fetchUserById, ...state } = useAsync>(fetch);
+
+ useEffect(() => {
+ fetchUserById(id);
+ }, []);
+
+ return { ...state };
+};
+
+export { useFetchUser };
diff --git a/src/hooks/queries/user/useFetchUsers.ts b/src/hooks/queries/user/useFetchUsers.ts
new file mode 100644
index 0000000..baa2458
--- /dev/null
+++ b/src/hooks/queries/user/useFetchUsers.ts
@@ -0,0 +1,30 @@
+import useAsync from '@educt/hooks/useAsync';
+import { IUser } from '@educt/interfaces';
+import { UserServiceInstance } from '@educt/services';
+import { FetchUsersParamsType } from '@educt/types';
+import { useEffect } from 'react';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useFetchUsers = (params?: FetchUsersParamsType | undefined) => {
+ const handleError = useErrorHandler();
+
+ const fetch = async (params?: FetchUsersParamsType | undefined) => {
+ try {
+ const result = await UserServiceInstance.fetchAll(params);
+ return result.data;
+ } catch (error) {
+ handleError(error);
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute: fetchUsers, ...state } = useAsync>(fetch);
+
+ useEffect(() => {
+ fetchUsers(params);
+ }, []);
+
+ return { ...state };
+};
+
+export { useFetchUsers };
diff --git a/src/hooks/queries/user/useUpdateUser.ts b/src/hooks/queries/user/useUpdateUser.ts
new file mode 100644
index 0000000..b4c575e
--- /dev/null
+++ b/src/hooks/queries/user/useUpdateUser.ts
@@ -0,0 +1,43 @@
+import { useErrorHandler } from 'react-error-boundary';
+import { useToast } from '@chakra-ui/toast';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { UpdateUserParamsType } from '@educt/types';
+import { IUser } from '@educt/interfaces';
+import useAsync from '@educt/hooks/useAsync';
+
+type UpdatedUserDataType = IUser;
+
+const useUpdateUser = () => {
+ const { userStore } = useRootStore();
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const updateUser = async (id: string, params: UpdateUserParamsType) => {
+ try {
+ const result = await userStore.updateUser(id, params);
+ toast({ title: 'User updated.', status: 'info' });
+ return result.data;
+ } catch (error: any) {
+ if (error.response) {
+ switch (error.response.status) {
+ case 422:
+ toast({ title: `${error.response.data.errors[0].message}`, status: 'error' });
+ break;
+ default:
+ toast({ title: `${error.message}`, status: 'error' });
+ break;
+ }
+ } else {
+ handleError(error);
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync>(updateUser);
+
+ return { updateUser: execute, ...state };
+};
+
+export { useUpdateUser };
diff --git a/src/hooks/queries/user/useUpdateUserEmail.ts b/src/hooks/queries/user/useUpdateUserEmail.ts
new file mode 100644
index 0000000..d512946
--- /dev/null
+++ b/src/hooks/queries/user/useUpdateUserEmail.ts
@@ -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 };
+
+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>(
+ sendConfirmationCode
+ );
+
+ return { sendConfirmationCode: execute, ...state };
+};
+
+export { useUpdateUserEmail };
diff --git a/src/hooks/queries/user/useUpdateUserInfo.ts b/src/hooks/queries/user/useUpdateUserInfo.ts
new file mode 100644
index 0000000..fcf6e6e
--- /dev/null
+++ b/src/hooks/queries/user/useUpdateUserInfo.ts
@@ -0,0 +1,42 @@
+import { useToast } from '@chakra-ui/react';
+import useAsync from '@educt/hooks/useAsync';
+import { IUserInfo } from '@educt/interfaces';
+import { UserServiceInstance } from '@educt/services';
+import { UpdateUserInfoParamsType } from '@educt/types';
+import axios from 'axios';
+import { useErrorHandler } from 'react-error-boundary';
+
+const useUpdateUserInfo = () => {
+ const toast = useToast();
+ const handleError = useErrorHandler();
+
+ const fetch = async (data: UpdateUserInfoParamsType) => {
+ try {
+ const result = await UserServiceInstance.updateInfo(data);
+ toast({ title: 'Info updated.', status: 'info' });
+ return result.data;
+ } catch (error) {
+ if (axios.isAxiosError(error)) {
+ if (error.response) {
+ switch (error.response.status) {
+ case 422:
+ toast({ title: error.response.data.errors[0].message, status: 'error', duration: 2000 });
+ break;
+ default:
+ handleError(error);
+ }
+ } else {
+ handleError(error);
+ }
+ }
+
+ return Promise.reject(error);
+ }
+ };
+
+ const { execute, ...state } = useAsync, Parameters>(fetch);
+
+ return { updateInfo: execute, ...state };
+};
+
+export { useUpdateUserInfo };
diff --git a/src/hooks/useFetchCourseQuery.ts b/src/hooks/useFetchCourseQuery.ts
deleted file mode 100644
index 8a3de78..0000000
--- a/src/hooks/useFetchCourseQuery.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Types
- */
-import { ICourse } from '@educt/interfaces';
-import { useEffect } from 'react';
-
-/**
- * Hooks
- */
-import useAsync from './useAsync';
-import { useRootStore } from './useRootStore';
-
-type QueryResponseDataType = Omit | undefined;
-
-const useFetchCourseQuery = (id: string) => {
- const {
- courseStore: { courseService },
- } = useRootStore();
-
- const fetch = async (id: string) => {
- const result = await courseService.fetchById(id);
- return result.data;
- };
-
- const { execute: fetchCourseById, ...state } = useAsync>(fetch);
-
- useEffect(() => {
- fetchCourseById(id);
- }, [id]);
-
- return { ...state };
-};
-
-export default useFetchCourseQuery;
diff --git a/src/hooks/useFetchLessonQuery.ts b/src/hooks/useFetchLessonQuery.ts
deleted file mode 100644
index d280966..0000000
--- a/src/hooks/useFetchLessonQuery.ts
+++ /dev/null
@@ -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({ 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;
diff --git a/src/hooks/useLogoutQuery.ts b/src/hooks/useLogoutQuery.ts
deleted file mode 100644
index 67eed7f..0000000
--- a/src/hooks/useLogoutQuery.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useToast } from '@chakra-ui/react';
-import { useHistory } from 'react-router-dom';
-import { useRootStore } from './useRootStore';
-import { useErrorHandler } from 'react-error-boundary';
-import useAsync from './useAsync';
-
-const useLogoutQuery = () => {
- const { authStore } = useRootStore();
- const history = useHistory();
- const toast = useToast();
- const handleError = useErrorHandler();
-
- const logout = async () => {
- try {
- await authStore.logout();
- history.push('/auth');
- toast({ title: 'You are logged out.', isClosable: true, status: 'info' });
- } catch (error) {
- handleError(error);
- }
- };
-
- const { execute, ...state } = useAsync>(logout);
-
- return { logout: execute, ...state };
-};
-
-export default useLogoutQuery;
diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
new file mode 100644
index 0000000..4aead93
--- /dev/null
+++ b/src/hooks/useSocket.ts
@@ -0,0 +1,23 @@
+import { io, Socket } from 'socket.io-client';
+import { useEffect, useState } from 'react';
+
+export const useSocket = (url: string) => {
+ const [socket, setSocket] = useState(null);
+
+ useEffect(() => {
+ const socketClient = io(url, {
+ autoConnect: false,
+ withCredentials: true,
+ transports: ['websocket'],
+ upgrade: false,
+ });
+
+ setSocket(socketClient);
+
+ return () => {
+ socket?.close();
+ };
+ }, []);
+
+ return socket;
+};
diff --git a/src/hooks/useSocketEvent.ts b/src/hooks/useSocketEvent.ts
new file mode 100644
index 0000000..a14a276
--- /dev/null
+++ b/src/hooks/useSocketEvent.ts
@@ -0,0 +1,18 @@
+import { useContext, useEffect } from 'react';
+import { SocketContext } from '@educt/contexts';
+
+export const useSocketEvent = (event: string, callback: (data: T) => void) => {
+ const { socket } = useContext(SocketContext);
+
+ useEffect(() => {
+ if (!socket) {
+ return;
+ }
+
+ socket.on(event, callback);
+
+ return () => {
+ socket.off(event, callback);
+ };
+ }, [callback, event, socket]);
+};
diff --git a/src/hooks/useUpdateUserEmailQuery.ts.ts b/src/hooks/useUpdateUserEmailQuery.ts.ts
deleted file mode 100644
index 6c52bc0..0000000
--- a/src/hooks/useUpdateUserEmailQuery.ts.ts
+++ /dev/null
@@ -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({
- 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;
diff --git a/src/index.tsx b/src/index.tsx
index c2f00a8..ed4dd9d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,18 @@
-import { ChakraProvider, ColorModeScript, theme } from '@chakra-ui/react';
import * as React from 'react';
import ReactDOM from 'react-dom';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import App from './App';
-import { RootStoreProvider } from './providers';
+import { theme } from './theme';
+import { RootStoreProvider, SocketContextProvider } from './providers';
ReactDOM.render(
<>
-
+
+
+
,
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 9b2f49f..ee151d1 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,5 +1,12 @@
import type { RouteComponentProps } from 'react-router-dom';
-import { AttachmentFileType, ColorType, LinkType } from '@educt/types';
+import {
+ AttachmentFileType,
+ ColorType,
+ LessonProgress,
+ LessonVideoType,
+ LinkType,
+ NotificationType,
+} from '@educt/types';
import { CourseStatusEnum, UserRoleEnum } from '../enums';
export interface IAppConfig {
@@ -7,11 +14,13 @@ export interface IAppConfig {
appName: string;
appDescription: string;
appVersion: string;
+ appGithubLink: string;
};
links: LinkType[];
}
export interface IToken {
+ userId: string;
token: string;
type: string;
expires_at: string;
@@ -22,11 +31,12 @@ export interface ICourse {
image: AttachmentFileType | null;
title: string;
description: string;
+ education_description: string | null;
status: CourseStatusEnum;
- teacher: Pick;
+ teacher: Pick;
category: ICategory;
- lessons: ILesson[];
- students: Array>;
+ lessons: Omit[];
+ students: IUser[];
color: ColorType | null;
students_count: string;
likes_count: string;
@@ -42,15 +52,39 @@ export interface ILesson {
description: string;
duration: string;
color?: ColorType | undefined | null;
+ materials_count?: string | undefined;
+ materials: Array;
+ progress: LessonProgress;
+ content: ILessonContent;
+ video?: LessonVideoType | undefined | null;
created_at: string;
updated_at: string;
}
+export interface ILessonMaterial {
+ id: number;
+ lesson_id: string;
+ name: string;
+ client_name: string;
+ size: number;
+ ext: string;
+ created_at: string;
+ updated_at: string;
+}
+
+export interface ILessonContent {
+ id: number;
+ lesson_id: string;
+ body: string;
+}
+
export interface ICategory {
id: string;
title: string;
description: string;
color?: ColorType | undefined | null;
+ created_at: string;
+ updated_at: string;
}
/**
@@ -89,9 +123,13 @@ export interface IUser {
first_name: string;
last_name: string;
fullname: string;
+ about: string | null;
+ last_login: string | null;
email: string;
roles: IUserRole[];
contacts: IUserContacts | null;
+ created_at: string;
+ updated_at: string;
}
/**
@@ -103,9 +141,8 @@ export interface IMe extends IUser {
* does not have the STUDENT role
*/
courses?: UserCourseType[];
- isAdmin: boolean;
- isTeacher: boolean;
- isStudent: boolean;
+ likes: Array>;
+ notifications: Array;
}
export interface IUserContacts {
@@ -115,6 +152,10 @@ export interface IUserContacts {
vk_id: string | null;
}
+export interface IUserInfo extends IUserContacts {
+ about: string | null;
+}
+
export interface IUserRole {
id: number;
name: string;
diff --git a/src/pages/404/404.tsx b/src/pages/404/404.tsx
index 32b1a4c..7e9bf88 100644
--- a/src/pages/404/404.tsx
+++ b/src/pages/404/404.tsx
@@ -1,38 +1,45 @@
import React from 'react';
import Helmet from 'react-helmet';
import { Link as ReactRouterLink } from 'react-router-dom';
-import { Flex, Box, Heading, Text, useToast, Link } from '@chakra-ui/react';
+import { Heading, Text, Link, Icon } from '@chakra-ui/react';
import { MdError } from 'react-icons/md';
/**
* Types
*/
import { IPageProps } from '@educt/interfaces';
+import { Page } from '@educt/components/PageElements';
+
+/**
+ * Hooks
+ */
+import { useEffect } from 'react';
+import { useToast } from '@chakra-ui/react';
const NotFoundPage: React.FC = ({ title }) => {
const toast = useToast();
- React.useEffect(() => {
+ useEffect(() => {
toast({ title: `Page not found`, duration: 10000, isClosable: true, status: 'warning' });
- });
+ }, []);
return (
<>
{title}
-
-
-
-
-
- Page not found
-
- Sorry the page you are looking for could not be found.
-
- Return to main page
-
-
+
+
+
+
+ Page not found
+
+ Sorry the page you are looking for could not be found.
+
+ Return to main page
+
+
+
);
};
diff --git a/src/pages/auth/auth.tsx b/src/pages/auth/auth.tsx
index da894e9..9c1632b 100644
--- a/src/pages/auth/auth.tsx
+++ b/src/pages/auth/auth.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import Helmet from 'react-helmet';
-import { observer } from 'mobx-react';
import { Redirect } from 'react-router-dom';
-import { Flex } from '@chakra-ui/react';
+import { observer } from 'mobx-react';
+import { Box } from '@chakra-ui/react';
/**
* Types
@@ -12,12 +12,15 @@ import { IPageProps } from '@educt/interfaces';
/**
* Components
*/
+import Logo from '@educt/components/Logo';
import AuthForm from './components/AuthForm';
+import { Card } from '@educt/components/Card';
/**
* Hooks
*/
import { useRootStore } from '@educt/hooks/useRootStore';
+import { useColorModeValue } from '@chakra-ui/react';
/**
* Auth page
@@ -34,14 +37,17 @@ const AuthPage: React.FC = ({ title }) => {
}
return (
- <>
+
{title}
-
-
-
-
+
+
+
+
+
+
+
);
};
diff --git a/src/pages/auth/components/AuthForm/AuthForm.tsx b/src/pages/auth/components/AuthForm/AuthForm.tsx
index b20c5c2..60dd7e2 100644
--- a/src/pages/auth/components/AuthForm/AuthForm.tsx
+++ b/src/pages/auth/components/AuthForm/AuthForm.tsx
@@ -8,10 +8,9 @@ import {
Button,
Icon,
Text,
- Flex,
- Box,
+ Stack,
} from '@chakra-ui/react';
-import { MdAccountCircle, MdSchool, MdVpnKey } from 'react-icons/md';
+import { MdAccountCircle } from 'react-icons/md';
import { yupResolver } from '@hookform/resolvers/yup';
/**
@@ -23,12 +22,13 @@ import type { SubmitHandler } from 'react-hook-form';
* Hooks
*/
import { useForm } from 'react-hook-form';
-import useLoginQuery from '@educt/hooks/useLoginQuery';
+import { useLogin } from '@educt/hooks/queries';
/**
* Schema
*/
import LoginSchema from './AuthForm.validator';
+import { PasswordField } from '@educt/components/Fields/PasswordField';
type AuthInputType = {
login: string;
@@ -44,7 +44,7 @@ const AuthForm: React.FC = () => {
} = useForm({
resolver: yupResolver(LoginSchema),
});
- const { login, isLoading } = useLoginQuery();
+ const { login, isLoading } = useLogin();
/**
* Login handler
@@ -52,52 +52,49 @@ const AuthForm: React.FC = () => {
const onSubmit: SubmitHandler = data => login(data.login, data.password).finally(() => reset());
return (
-
-