From 10d2cf378284ca9d7629b1ff045a49aea7657ec0 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 5 Jan 2022 13:06:01 +0300
Subject: [PATCH] fix: fixed updating video renred on change input

---
 .../Forms/LessonForm/LessonForm.tsx           |  2 +-
 .../VideoUploader/VideoUploader.tsx           | 51 +++++++++++++------
 src/interfaces/index.ts                       |  2 +-
 src/services/LessonService.ts                 | 11 +++-
 src/types/index.d.ts                          |  9 ++++
 5 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/src/components/Forms/LessonForm/LessonForm.tsx b/src/components/Forms/LessonForm/LessonForm.tsx
index 04ff826..a7029b8 100644
--- a/src/components/Forms/LessonForm/LessonForm.tsx
+++ b/src/components/Forms/LessonForm/LessonForm.tsx
@@ -48,10 +48,10 @@ const LessonForm: React.FC<LessonFormPropsType> = ({ onSubmit, buttonLabel, isLo
           <InputGroup>
             <Input placeholder='Lesson name' type='text' {...register('title')} />
           </InputGroup>
-          <FormHelperText>e.g Introduction</FormHelperText>
           <Text as='small' color='red.500'>
             {errors.title?.message}
           </Text>
+          <FormHelperText>e.g Introduction</FormHelperText>
         </FormControl>
 
         <FormControl isRequired id='description' isInvalid={!!errors.description}>
diff --git a/src/components/VideoUploader/VideoUploader.tsx b/src/components/VideoUploader/VideoUploader.tsx
index 92b3269..7dbb354 100644
--- a/src/components/VideoUploader/VideoUploader.tsx
+++ b/src/components/VideoUploader/VideoUploader.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+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';
@@ -10,6 +10,8 @@ type VideoUploaderPropsType = {
 
 const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [videoObjectUrl, setVideoObjectUrl] = useState<string | undefined>(undefined);
 
   const onSelectFileHandler = () => {
     if (fileInputRef.current) {
@@ -25,25 +27,30 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file }) =>
     if (files && files.length !== 0) {
       const file = files[0];
 
-      file.type.match('video.*') && onChange(file);
+      if (file.type.match('video.*')) {
+        onChange(file);
+        setVideoObjectUrl(prevUrl => {
+          prevUrl && URL.revokeObjectURL(prevUrl);
+          const newUrl = URL.createObjectURL(file);
+          return newUrl;
+        });
+      }
     }
   };
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.load();
+    }
+  }, [videoObjectUrl]);
+
   return (
     <Box>
-      <Input
-        type='file'
-        ref={fileInputRef}
-        onChange={onChangeFileHandler}
-        display='none'
-        accept={Object.keys(VideoSupportedFormatsEnum)
-          .map(ext => `.${ext.toLowerCase()}`)
-          .join(', ')}
-      />
-      {file ? (
+      {file && videoObjectUrl ? (
         <Box>
           <AspectRatio maxH='lg' mt='2'>
-            <video controls style={{ borderRadius: '5px' }}>
-              <source src={URL.createObjectURL(file)} />
+            <video ref={videoRef} controls style={{ borderRadius: '5px' }}>
+              <source src={videoObjectUrl} />
             </video>
           </AspectRatio>
           <Button
@@ -59,7 +66,7 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file }) =>
         </Box>
       ) : (
         <Flex
-          p='40px 0'
+          p='40px 10px'
           textAlign={'center'}
           borderRadius={'md'}
           flexDir={'column'}
@@ -83,6 +90,20 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file }) =>
           </Button>
         </Flex>
       )}
+      <Input
+        type='file'
+        ref={fileInputRef}
+        onChange={onChangeFileHandler}
+        maxW={'0'}
+        h='0'
+        display={'block'}
+        opacity={'0'}
+        ml='auto'
+        mr='auto'
+        accept={Object.keys(VideoSupportedFormatsEnum)
+          .map(ext => `.${ext.toLowerCase()}`)
+          .join(', ')}
+      />
     </Box>
   );
 };
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index f362080..91675ab 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -67,7 +67,7 @@ export interface ILessonMaterial {
 export interface ILessonContent {
   id: number;
   lesson_id: string;
-  video_url: string;
+  body: string;
 }
 
 export interface ICategory {
diff --git a/src/services/LessonService.ts b/src/services/LessonService.ts
index 22cb726..b1bfbec 100644
--- a/src/services/LessonService.ts
+++ b/src/services/LessonService.ts
@@ -1,7 +1,7 @@
 import { AxiosInstance } from 'axios';
 import { IApiRespose, ILesson } from '@educt/interfaces';
 import { ApiServiceInstance } from './ApiService';
-import type { LessonProgress } from '@educt/types';
+import type { CreateLessonParamsType, LessonProgress } from '@educt/types';
 
 class LessonService {
   public api: AxiosInstance;
@@ -43,6 +43,15 @@ class LessonService {
     return result.data;
   }
 
+  /**
+   * Create new lesson
+   *
+   * @param data Lesson data for creating
+   */
+  public async create(data: CreateLessonParamsType): Promise<IApiRespose<ILesson>> {
+    console.log(data);
+  }
+
   /**
    * Delete lesson by id
    *
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 6eef681..eb09026 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -160,3 +160,12 @@ export type UpdateCourseParamsType = {
   image?: File | undefined;
   status?: CourseStatusEnum | undefined;
 };
+
+export type CreateLessonParamsType = {
+  title: string;
+  description: string;
+  duration: string;
+  course_id: string;
+  video: File;
+  materials?: File[] | undefined;
+};