feat: lesson updating

src/components/FilesUploader/FilesUploader.tsx

@@ -88,7 +88,7 @@ const FilesUploader: React.FC<FilesUploaderPropsType> = ({ onChange, files, prel
               <FileContent name={file.name} size={file.size} />
               <IconButton
                 onClick={() => {
-                  setPreloaded(prev => prev.filter(file => file.size !== file.size));
+                  setPreloaded(prev => prev.filter(prevFile => prevFile.size !== file.size));
                   onChange([]);
                 }}
                 aria-label='remove'

src/components/Forms/LessonForm/EditLessonForm.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import * as helpers from '@educt/helpers';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import type { InputFields } from './LessonForm';
@@ -13,8 +12,9 @@ import { EditLessonFormSchema } from './LessonForm.validator';
 /**
  * Hooks
  */
-import { useHistory, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { ILesson } from '@educt/interfaces';
+import { useUpdateLesson } from '@educt/hooks/queries';
 
 type EditLessonFormPropsType = {
   lesson: ILesson;
@@ -31,17 +31,22 @@ const EditLessonForm: React.FC<EditLessonFormPropsType> = ({ lesson }) => {
       materials: undefined,
     },
   });
-  const { id: lesson_id } = useParams<{ id: string }>();
-  const history = useHistory();
+  const { updateLesson, isLoading } = useUpdateLesson();
+  const { id } = useParams<{ id: string }>();
 
   const onSubmit: SubmitHandler<InputFields> = async data => {
-    const updatedFields = helpers.getDirtyFields(form.formState.dirtyFields, data);
-    console.log(updatedFields);
+    await updateLesson(id, {
+      title: data.title,
+      description: data.description,
+      video: data.video,
+      duration: data.duration,
+      materials: data.materials?.length !== 0 ? Array.from(data.materials || []) : null,
+    });
   };
 
   return (
     <LessonForm
-      isLoading={false}
+      isLoading={isLoading}
       reactHookForm={{ ...form }}
       onSubmit={form.handleSubmit(onSubmit)}
       buttonLabel='Save'

src/helpers/index.ts

@@ -54,6 +54,11 @@ export function transformToFormData(data: object): FormData {
         return;
       }
 
+      if (value === null) {
+        formData.append(key, '');
+        return;
+      }
+
       formData.append(key, value);
     }
   });

src/hooks/queries/index.ts

@@ -9,6 +9,7 @@ import { useLogout } from './auth/useLogout';
  */
 import { useCreateLesson } from './lesson/useCreateLesson';
 import { useDeleteLesson } from './lesson/useDeleteLesson';
+import { useUpdateLesson } from './lesson/useUpdateLesson';
 
 /**
  * Course
@@ -39,6 +40,7 @@ export {
   useDetachStudents,
   useCreateLesson,
   useDeleteLesson,
+  useUpdateLesson,
   useCreateUser,
   useDeleteUser,
   useUpdateUser,

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<ILesson, Parameters<typeof updateLesson>>(updateLesson);
+
+  return { updateLesson: execute, ...state };
+};
+
+export { useUpdateLesson };

src/services/LessonService.ts

@@ -2,7 +2,7 @@ import { AxiosInstance } from 'axios';
 import * as helpers from '@educt/helpers';
 import { IApiRespose, ILesson } from '@educt/interfaces';
 import { ApiServiceInstance } from './ApiService';
-import type { CreateLessonParamsType, LessonProgress } from '@educt/types';
+import type { CreateLessonParamsType, LessonProgress, UpdateLessonParamsType } from '@educt/types';
 
 class LessonService {
   public api: AxiosInstance;
@@ -65,6 +65,18 @@ class LessonService {
     return result.data;
   }
 
+  /**
+   * Update lesson by id
+   *
+   * @param id Lesson ud
+   * @param data New data
+   * @returns Updated lesson
+   */
+  public async update(id: string, data: UpdateLessonParamsType): Promise<IApiRespose<ILesson>> {
+    const result = await this.api.patch(`/v1/lessons/${id}`, helpers.transformToFormData(data));
+    return result.data;
+  }
+
   /**
    * Save order of lessons
    *

src/types/index.d.ts

@@ -169,3 +169,12 @@ export type CreateLessonParamsType = {
   video: File;
   materials?: File[] | undefined;
 };
+
+export type UpdateLessonParamsType = {
+  title?: string | undefined;
+  description?: string | undefined;
+  duration?: string | undefined;
+  course_id?: string | undefined;
+  video?: File | undefined;
+  materials?: File[] | undefined | null;
+};