fix: update course image

src/components/AsyncSelect/AsyncSelect.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Select from '@educt/components/Select';
 import { ISelectPropsType } from '../Select/Select';
 import { OptionType } from '@educt/types';
+import useIsMountedRef from '@educt/hooks/useIsMountedRef';
 
 interface IAsyncSelectPropsType extends ISelectPropsType {
   loadOptions: () => Promise<OptionType[] | undefined>;
@@ -10,13 +11,22 @@ interface IAsyncSelectPropsType extends ISelectPropsType {
 const AsyncSelect: React.FC<IAsyncSelectPropsType> = props => {
   const [options, setOptions] = useState<OptionType[] | []>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const isMountedRef = useIsMountedRef();
   const { loadOptions, ...selectProps } = props;
 
   useEffect(() => {
-    setIsLoading(true);
+    if (isMountedRef.current) setIsLoading(true);
     loadOptions()
-      .then(options => options && setOptions(options))
-      .finally(() => setIsLoading(false));
+      .then(options => {
+        if (options && isMountedRef.current) {
+          setOptions(options);
+        }
+      })
+      .finally(() => {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      });
   }, []);
 
   return <Select options={options} isLoading={isLoading} {...selectProps} />;

src/components/FileSelect/FileSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Flex, Box, Text } from '@chakra-ui/layout';
 import { Input } from '@chakra-ui/input';
 import { Button } from '@chakra-ui/button';
@@ -13,10 +13,10 @@ import { useColorModeValue } from '@chakra-ui/color-mode';
 type FileSelectPropsType = {
   onChange: (file: File) => void;
   supportedFormats?: string[];
+  file?: File | undefined;
 };
 
-const FileSelect: React.FC<FileSelectPropsType> = ({ onChange, supportedFormats }) => {
-  const [selectedFile, setSelectedFile] = useState<File | undefined>(undefined);
+const FileSelect: React.FC<FileSelectPropsType> = ({ onChange, file, supportedFormats }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   /**
@@ -37,7 +37,6 @@ const FileSelect: React.FC<FileSelectPropsType> = ({ onChange, supportedFormats
       const file = files[0];
 
       onChange(file);
-      setSelectedFile(file);
     }
   };
 
@@ -52,12 +51,12 @@ const FileSelect: React.FC<FileSelectPropsType> = ({ onChange, supportedFormats
       <Input type='file' ref={fileInputRef} onChange={onChangeFileHandler} display='none' />
       <Flex justifyContent='space-between' alignItems='center' sx={{ gap: '10px' }}>
         <Box>
-          {selectedFile ? (
+          {file ? (
             <Text fontSize='lg' fontWeight='bold'>
-              {selectedFile.name}
+              {file.name}
               <br />
               <Text as='small' fontWeight='normal'>
-                {helpres.transformBytes(selectedFile.size)}
+                {helpres.transformBytes(file.size)}
               </Text>
             </Text>
           ) : (

src/components/Forms/CourseForm/CourseForm.tsx

@@ -177,8 +177,12 @@ const CourseForm: React.FC<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
               <Controller
                 control={control}
                 name='image'
-                render={({ field: { onChange } }) => (
-                  <FileSelect onChange={file => onChange(file)} supportedFormats={['JPG', 'JPEG', 'PNG', 'WEBP']} />
+                render={({ field: { onChange, value: file } }) => (
+                  <FileSelect
+                    onChange={file => onChange(file)}
+                    file={file}
+                    supportedFormats={['JPG', 'JPEG', 'PNG', 'WEBP']}
+                  />
                 )}
               />
               <Text as='small' color='red.500'>

src/components/Forms/CourseForm/EditCourseForm.tsx

@@ -70,6 +70,7 @@ const EditFormCourse: React.FC<EditFormCoursePropsType> = ({ defaultValues }) =>
         description: data.description,
         teacher_id: data.teacher_id,
         category_id: data.category_id,
+        image: data.image,
       });
       toast({ title: `Course updated.`, status: 'info' });
 
@@ -81,6 +82,7 @@ const EditFormCourse: React.FC<EditFormCoursePropsType> = ({ defaultValues }) =>
         description: course.data.description,
         teacher_id: course.data.teacher.id,
         category_id: course.data.category.id,
+        image: undefined,
       });
     } catch (error: any) {
       if (error.response) {

src/hooks/useFetchCourseQuery.ts

@@ -5,6 +5,7 @@ import { ICourse } from '@educt/interfaces';
  */
 import { useEffect, useState } from 'react';
 import { useErrorHandler } from 'react-error-boundary';
+import useIsMountedRef from './useIsMountedRef';
 import { useRootStore } from './useRootStore';
 
 type CourseStateType = {
@@ -19,6 +20,7 @@ const useFetchCourseQuery = (id: string) => {
     courseStore: { courseService },
   } = useRootStore();
   const [state, setState] = useState<CourseStateType>({ data: null, error: null, loading: false, fetched: false });
+  const isMountedRef = useIsMountedRef();
   const handleError = useErrorHandler();
 
   /**
@@ -29,17 +31,23 @@ const useFetchCourseQuery = (id: string) => {
     courseService
       .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]);
 

src/services/CourseService.ts

@@ -76,7 +76,11 @@ export class CourseService {
     id: string,
     data: UpdateCourseParamsType
   ): Promise<IApiRespose<Omit<ICourse, 'students_count' | 'likes_count' | 'lessons_count'>>> {
-    const result = await this.api.patch(`/v1/courses/${id}`, data);
+    const result = await this.api.patch(`/v1/courses/${id}`, helpers.transformToFormData(data), {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
 
     return result.data;
   }