feat: set course like & fixed edit user modal

src/components/Modals/EditUserModal/EditUserModal.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import BaseModal from '@educt/components/Modal';
-
 import * as helpers from '@educt/helpers';
 import { FormControl, FormLabel, FormHelperText, Input, Select, Stack } from '@chakra-ui/react';
-import { CheckIcon } from '@chakra-ui/icons';
 import { MdModeEdit } from 'react-icons/md';
 import { yupResolver } from '@hookform/resolvers/yup';
+import BaseModal from '@educt/components/Modal';
 
 /**
  * Types
@@ -49,6 +47,14 @@ const EditUserModal: React.FC<EditUserModalPropsType> = props => {
     userStore: { me },
   } = useRootStore();
   const { updateUser, isLoading } = useUpdateUser();
+  const defaultValues = {
+    login: null,
+    first_name: user.first_name,
+    last_name: user.last_name,
+    email: user.email,
+    role: user.roles[0].slug,
+    password: null,
+  };
   const {
     register,
     handleSubmit,
@@ -57,7 +63,7 @@ const EditUserModal: React.FC<EditUserModalPropsType> = props => {
   } = useForm<UpdateUserInputType>({
     resolver: yupResolver(EditUserSchema),
     defaultValues: useMemo(() => {
-      return props.user;
+      return defaultValues;
     }, [props]),
   });
 
@@ -78,7 +84,7 @@ const EditUserModal: React.FC<EditUserModalPropsType> = props => {
   };
 
   useEffect(() => {
-    reset(props.user);
+    reset(defaultValues);
   }, [props.user]);
 
   return (

src/interfaces/index.ts

@@ -107,6 +107,7 @@ export interface IMe extends IUser {
    * does not have the STUDENT role
    */
   courses?: UserCourseType[];
+  likes: Array<Pick<ICourse, 'id'>>;
   isAdmin: boolean;
   isTeacher: boolean;
   isStudent: boolean;

src/pages/course/index.tsx

@@ -38,6 +38,8 @@ import type { ICourse, ILesson } from '@educt/interfaces';
  */
 import { useColorModeValue } from '@chakra-ui/react';
 import { useRootStore } from '@educt/hooks/useRootStore';
+import { CourseServiceInstance } from '@educt/services';
+import { runInAction } from 'mobx';
 
 export const CourseHeader: React.FC<FlexProps> = props => (
   <Flex justifyContent='space-between' flexDir={{ base: 'column', xl: 'row' }} {...props}>
@@ -75,13 +77,36 @@ interface ICourseInfoProps extends BoxProps {
   likesCount: string;
 }
 export const CourseInfo: React.FC<ICourseInfoProps> = props => {
+  const { userStore } = useRootStore();
+  const { me } = userStore;
   const { id, lessonsCount, studentsCount, likesCount, ...boxProps } = props;
+  const [isLoading, setIsLoading] = useState(false);
   const [likes, setLikes] = useState<number>(Number.parseInt(likesCount, 10));
 
-  const handleLikeCourse = (id: string) => () => {
-    // TODO set like request
+  const handleLikeCourse = (id: string) => async () => {
+    if (isLoading || me === null) {
+      return;
+    }
+
+    try {
+      const isCourseLiked = me.likes.some(course => course.id === id);
+      const setCourseLike = () => me.likes.push({ id });
+      const unsetCourseLike = () => (me.likes = me.likes.filter(course => course.id !== id));
+
+      if (!isCourseLiked) {
+        setIsLoading(true);
         setLikes(likes => likes + 1);
-    console.log(`like course: ${id}`);
+        await CourseServiceInstance.setLike(id);
+        runInAction(setCourseLike);
+      } else {
+        setIsLoading(true);
+        setLikes(likes => likes - 1);
+        await CourseServiceInstance.unsetLike(id);
+        runInAction(unsetCourseLike);
+      }
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (

src/services/CourseService.ts

@@ -54,6 +54,28 @@ class CourseService {
     return result.data;
   }
 
+  /**
+   * Set course like
+   *
+   * @param id Course id
+   * @returns Empty data
+   */
+  public async setLike(id: string): Promise<IApiRespose<Record<string, never>>> {
+    const result = await this.api.put(`/v1/courses/${id}/likes`);
+    return result.data;
+  }
+
+  /**
+   * Unset course like
+   *
+   * @param id Course id
+   * @returns Empty data
+   */
+  public async unsetLike(id: string): Promise<IApiRespose<Record<string, never>>> {
+    const result = await this.api.delete(`/v1/courses/${id}/likes`);
+    return result.data;
+  }
+
   /**
    *
    * @param data Data for creating course

src/stores/UserStore.ts

@@ -62,7 +62,7 @@ export default class UserStore {
   public async loadCurrentUserData() {
     const result = await UserServiceInstance.fetchMe();
     const {
-      data: { id, first_name, last_name, fullname, email, roles, contacts, courses, created_at, updated_at },
+      data: { id, first_name, last_name, fullname, email, roles, likes, contacts, courses, created_at, updated_at },
     } = result;
 
     runInAction(() => {
@@ -73,6 +73,7 @@ export default class UserStore {
         email,
         roles,
         fullname,
+        likes,
         contacts,
         courses,
         isAdmin: helpers.userContainRoles(roles, [UserRoleEnum.ADMIN]),