From 784c1ed4316472ec446cd5aa9c8c90ace391011b Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 3 Jan 2022 23:45:52 +0300
Subject: [PATCH] feat: added create lesson layout

---
 .../Forms/LessonForm/LessonForm.tsx           | 76 ++++++++++++++++++-
 .../courses/create-lesson/create-lesson.tsx   | 12 +++
 src/pages/courses/edit/edit.tsx               |  6 --
 3 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/src/components/Forms/LessonForm/LessonForm.tsx b/src/components/Forms/LessonForm/LessonForm.tsx
index 3f14cb1..d31d406 100644
--- a/src/components/Forms/LessonForm/LessonForm.tsx
+++ b/src/components/Forms/LessonForm/LessonForm.tsx
@@ -11,12 +11,20 @@ import {
   Button,
   Textarea,
   Flex,
+  Icon,
+  IconButton,
+  Divider,
 } from '@chakra-ui/react';
+import { AddIcon, CloseIcon } from '@chakra-ui/icons';
 import { UseFormReturn } from 'react-hook-form';
+import { MdOutlineFilePresent, MdUpload } from 'react-icons/md';
 
 export type InputFields = {
   title: string;
   description: string;
+  duration: string;
+  video: File;
+  materials?: File[] | undefined;
 };
 
 export type LessonFormPropsType = {
@@ -42,7 +50,7 @@ const LessonForm: React.FC<LessonFormPropsType> = ({ onSubmit, buttonLabel, isLo
           <InputGroup>
             <Input placeholder='Lesson name' type='text' {...register('title')} />
           </InputGroup>
-          <FormHelperText>e.g Variables in Javascript</FormHelperText>
+          <FormHelperText>e.g Introduction</FormHelperText>
           <Text as='small' color='red.500'>
             {errors.title?.message}
           </Text>
@@ -50,7 +58,7 @@ const LessonForm: React.FC<LessonFormPropsType> = ({ onSubmit, buttonLabel, isLo
 
         <FormControl isRequired id='description' isInvalid={!!errors.description}>
           <FormLabel>Description</FormLabel>
-          <Textarea resize='none' minH='150px' placeholder='Course description...' {...register('description')} />
+          <Textarea resize='none' minH='150px' placeholder='Lesson description...' {...register('description')} />
           <Flex justifyContent='space-between'>
             <Text as='small' color='red.500'>
               {errors.description?.message}
@@ -60,8 +68,72 @@ const LessonForm: React.FC<LessonFormPropsType> = ({ onSubmit, buttonLabel, isLo
 
         <FormControl isRequired id='video'>
           <FormLabel>Video</FormLabel>
+          <Flex
+            p='40px 0'
+            textAlign={'center'}
+            borderRadius={'md'}
+            flexDir={'column'}
+            justifyContent={'center'}
+            alignItems={'center'}
+            borderWidth={'1px'}
+          >
+            <Box bg='gray.100' p='6' borderRadius={'full'}>
+              <Icon as={MdUpload} h={16} w={16} color='gray.400' />
+            </Box>
+            <Box mt='4'>
+              <Text fontSize={'md'}>
+                Upload a video file <br />
+                <Text as='span' fontSize='sm' color='gray.500'>
+                  The video will be uploaded to cloud or local storage depending on the server configuration.
+                </Text>
+              </Text>
+            </Box>
+            <Button mt='6'>Select file</Button>
+          </Flex>
+          <FormHelperText>Supported formats: mp4, mov, avi, wmv, webm, flv</FormHelperText>
         </FormControl>
 
+        <FormControl isRequired id='duration'>
+          <FormLabel>Video duration</FormLabel>
+          <Input type='time' defaultValue={'00:30:00'} step='1' {...register('duration')} />
+          <FormHelperText>hours:minutes:seconds</FormHelperText>
+        </FormControl>
+
+        <FormControl>
+          <FormLabel>Materials</FormLabel>
+          <Stack spacing={'1'}>
+            {[1, 2, 3].map(k => (
+              <Flex
+                key={k}
+                alignItems={'center'}
+                justifyContent={'space-between'}
+                p='3'
+                bg={'gray.50'}
+                borderRadius={'lg'}
+                maxW='500px'
+              >
+                <Flex alignItems={'center'}>
+                  <Icon as={MdOutlineFilePresent} mr='2' h={4} w={4} />
+                  <Text overflow={'hidden'} fontSize={'sm'} fontWeight={'medium'} lineHeight={'1rem'}>
+                    file.pdf
+                    <br />
+                    <Text as='small' color='gray.500'>
+                      245kB
+                    </Text>
+                  </Text>
+                </Flex>
+                <IconButton aria-label='remove' variant={'unstyled'} size='xs' icon={<CloseIcon />} />
+              </Flex>
+            ))}
+          </Stack>
+          <Button leftIcon={<AddIcon />} variant={'outline'} size='sm' mt='3'>
+            Upload new
+          </Button>
+          <FormHelperText>Supported formats: pdf, zip, rar, doc, docx</FormHelperText>
+        </FormControl>
+
+        <Divider />
+
         <Box mt='5'>
           <Button
             isLoading={isLoading}
diff --git a/src/pages/courses/create-lesson/create-lesson.tsx b/src/pages/courses/create-lesson/create-lesson.tsx
index 761d1c3..e0e9d04 100644
--- a/src/pages/courses/create-lesson/create-lesson.tsx
+++ b/src/pages/courses/create-lesson/create-lesson.tsx
@@ -3,11 +3,23 @@ import React from 'react';
 import { IPageProps } from '@educt/interfaces';
 import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
 import CreateLessonForm from '@educt/components/Forms/LessonForm/CreateLessonForm';
+import { Redirect, useParams } from 'react-router-dom';
+import { useFetchCourse } from '@educt/hooks/queries';
+import LoadingPage from '@educt/components/LoadingPage';
 
 /**
  * Create Lesson page
  */
 const CreateLessonPage: React.FC<IPageProps> = () => {
+  const params = useParams<{ id: string }>();
+  const { error, data: course, isLoading } = useFetchCourse(params.id);
+
+  if (error?.response?.status === 404) {
+    return <Redirect to='/404' />;
+  }
+
+  if (!course || isLoading) return <LoadingPage />;
+
   return (
     <PageWrapper>
       <PageHeading heading='Lesson Creation' description='Create new lesson ' />
diff --git a/src/pages/courses/edit/edit.tsx b/src/pages/courses/edit/edit.tsx
index 8507687..5f31d85 100644
--- a/src/pages/courses/edit/edit.tsx
+++ b/src/pages/courses/edit/edit.tsx
@@ -36,16 +36,10 @@ const EditCoursePage: React.FC<IPageProps> = () => {
   const { error, data: course, isLoading } = useFetchCourse(params.id);
   const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure();
 
-  /**
-   * Not Found
-   */
   if (error?.response?.status === 404) {
     return <Redirect to='/404' />;
   }
 
-  /**
-   * Loading
-   */
   if (!course || isLoading) return <LoadingPage />;
 
   return (