feat: showing lesson video

constants.ts

@@ -1 +1 @@
-export const BACKEND_URL: string = 'http://localhost:3333';
+export const BACKEND_URL = 'http://localhost:3333';

package-lock.json

@@ -1741,6 +1741,11 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -2849,6 +2854,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3324,6 +3334,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-player": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
+      "integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      }
+    },
     "react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",

package.json

@@ -28,6 +28,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.12.2",
     "react-icons": "^4.3.1",
+    "react-player": "^2.9.0",
     "react-router-dom": "^5.2.0",
     "react-spinners": "^0.11.0",
     "react-virtuoso": "^2.2.8",

src/components/Forms/LessonForm/CreateLessonForm.tsx

@@ -0,0 +1,25 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import React from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { LessonForm } from '.';
+import { InputFields } from './LessonForm';
+import LessonFormSchema from './LessonForm.validator';
+
+const CreateLessonForm: React.FC = () => {
+  const form = useForm<InputFields>({ resolver: yupResolver(LessonFormSchema) });
+
+  const onSubmit: SubmitHandler<InputFields> = async data => {
+    console.log('creating...');
+  };
+
+  return (
+    <LessonForm
+      isLoading={false}
+      reactHookForm={{ ...form }}
+      onSubmit={form.handleSubmit(onSubmit)}
+      buttonLabel='Create'
+    />
+  );
+};
+
+export default CreateLessonForm;

src/components/Forms/LessonForm/LessonForm.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Text,
+  Input,
+  InputGroup,
+  Stack,
+  Box,
+  Button,
+  Textarea,
+  Flex,
+} from '@chakra-ui/react';
+import { UseFormReturn } from 'react-hook-form';
+
+export type InputFields = {
+  title: string;
+  description: string;
+};
+
+export type LessonFormPropsType = {
+  onSubmit: () => Promise<void>;
+  buttonLabel: string;
+  isLoading: boolean;
+  reactHookForm: UseFormReturn<InputFields>;
+};
+
+const LessonForm: React.FC<LessonFormPropsType> = ({ onSubmit, buttonLabel, isLoading, reactHookForm }) => {
+  const {
+    control,
+    register,
+    watch,
+    formState: { errors, isDirty },
+  } = reactHookForm;
+
+  return (
+    <form onSubmit={onSubmit}>
+      <Stack spacing={'5'}>
+        <FormControl isRequired id='title' isInvalid={!!errors.title}>
+          <FormLabel>Title</FormLabel>
+          <InputGroup>
+            <Input placeholder='Lesson name' type='text' {...register('title')} />
+          </InputGroup>
+          <FormHelperText>e.g Variables in Javascript</FormHelperText>
+          <Text as='small' color='red.500'>
+            {errors.title?.message}
+          </Text>
+        </FormControl>
+
+        <FormControl isRequired id='description' isInvalid={!!errors.description}>
+          <FormLabel>Description</FormLabel>
+          <Textarea resize='none' minH='150px' placeholder='Course description...' {...register('description')} />
+          <Flex justifyContent='space-between'>
+            <Text as='small' color='red.500'>
+              {errors.description?.message}
+            </Text>
+          </Flex>
+        </FormControl>
+
+        <FormControl isRequired id='video'>
+          <FormLabel>Video</FormLabel>
+        </FormControl>
+
+        <Box mt='5'>
+          <Button
+            isLoading={isLoading}
+            isDisabled={!isDirty}
+            loadingText='Saving...'
+            type='submit'
+            colorScheme='blue'
+            variant='outline'
+          >
+            {buttonLabel}
+          </Button>
+        </Box>
+      </Stack>
+    </form>
+  );
+};
+
+export default LessonForm;

src/components/Forms/LessonForm/LessonForm.validator.ts

@@ -0,0 +1,11 @@
+import yup from '@educt/schema';
+
+const LessonFormSchema = yup.object().shape({
+  title: yup.string().required('Title field name is required').max(90, 'Title must be at most 90 characters'),
+  description: yup
+    .string()
+    .required('Description field name is required')
+    .max(250, 'Description must be at most 250 characters'),
+});
+
+export default LessonFormSchema;

src/components/Forms/LessonForm/index.ts

@@ -0,0 +1,3 @@
+import LessonForm from './LessonForm';
+
+export { LessonForm };

src/components/PageElements/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { BoxProps, Box, Heading, Text, Divider } from '@chakra-ui/react';
+import { BoxProps, Box, Flex, Heading, Text, Divider } from '@chakra-ui/react';
 
 interface IPageHeadingProps extends BoxProps {
+  headingPrefix?: JSX.Element;
   heading: string;
   description?: string;
 }
@@ -11,10 +12,13 @@ export const PageWrapper: React.FC<BoxProps> = props => {
 };
 
 export const PageHeading: React.FC<IPageHeadingProps> = props => {
-  const { heading, description, ...boxProps } = props;
+  const { headingPrefix, heading, description, ...boxProps } = props;
   return (
     <Box {...boxProps}>
-      <Heading as='h1'>{heading}</Heading>
+      <Flex alignItems={'center'}>
+        {headingPrefix}
+        <Heading as='h1'>{heading}</Heading>
+      </Flex>
       {description && <Text mt='2'>{description}</Text>}
       {props.children}
       <Divider mt='5' />

src/interfaces/index.ts

@@ -1,5 +1,5 @@
 import type { RouteComponentProps } from 'react-router-dom';
-import { AttachmentFileType, ColorType, LessonProgress, LinkType } from '@educt/types';
+import { AttachmentFileType, ColorType, LessonProgress, LessonVideoType, LinkType } from '@educt/types';
 import { CourseStatusEnum, UserRoleEnum } from '../enums';
 
 export interface IAppConfig {
@@ -48,6 +48,7 @@ export interface ILesson {
   materials: Array<ILessonMaterial>;
   progress: LessonProgress;
   content: ILessonContent;
+  video?: LessonVideoType | undefined | null;
   created_at: string;
   updated_at: string;
 }
@@ -58,7 +59,6 @@ export interface ILessonMaterial {
   name: string;
   client_name: string;
   size: number;
-  url: string;
   ext: string;
   created_at: string;
   updated_at: string;

src/pages/courses/create-lesson/create-lesson.tsx

@@ -1,16 +1,20 @@
 import React from 'react';
-import { Box, Heading } from '@chakra-ui/react';
 
 import { IPageProps } from '@educt/interfaces';
+import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
+import CreateLessonForm from '@educt/components/Forms/LessonForm/CreateLessonForm';
 
 /**
  * Create Lesson page
  */
 const CreateLessonPage: React.FC<IPageProps> = () => {
   return (
-    <Box>
-      <Heading as='h1'>Create Lesson page</Heading>
-    </Box>
+    <PageWrapper>
+      <PageHeading heading='Lesson Creation' description='Create new lesson ' />
+      <PageContent>
+        <CreateLessonForm />
+      </PageContent>
+    </PageWrapper>
   );
 };
 

src/pages/courses/create/create.tsx

@@ -11,24 +11,23 @@ import { IPageProps } from '@educt/interfaces';
  */
 import PrevPageButton from '@educt/components/PrevPageButton';
 import { CreateCourseForm } from '@educt/components/Forms/CourseForm';
+import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
 
 /**
  * Create course page
  */
 const CreateCoursePage: React.FC<IPageProps> = () => {
   return (
-    <Box>
-      <Box>
-        <Flex alignItems='center'>
-          <PrevPageButton prevPage='/courses' />
-          <Heading as='h1'>Course creation</Heading>
-        </Flex>
-        <Text mt='3'>Fill in the required fields to create a course</Text>
-      </Box>
-      <Box mt='5'>
+    <PageWrapper>
+      <PageHeading
+        headingPrefix={<PrevPageButton prevPage='/courses' />}
+        heading='Course Creation'
+        description='Fill in the required fields to create a new course'
+      />
+      <PageContent>
         <CreateCourseForm />
-      </Box>
-    </Box>
+      </PageContent>
+    </PageWrapper>
   );
 };
 

src/pages/courses/edit/components/LessonList/LessonList.tsx

@@ -60,7 +60,7 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
   const [deleting, setDeleting] = useState<Pick<ILesson, 'id' | 'title'> | null>(null);
   const handleError = useErrorHandler();
 
-  const handleCreateLesson = (): void => history.push('/lessons/create');
+  const handleCreateLesson = (): void => history.push(`/courses/edit/${course.id}/create-lesson`);
   const handleEditLesson = (id: string): void => history.push(`/lessons/edit/${id}`);
   const handleDeleteLesson = (lesson: ICourse['lessons'][number]): void => {
     setDeleting({ id: lesson.id, title: lesson.title });

src/pages/courses/edit/edit.tsx

@@ -14,6 +14,10 @@ import type { IPageProps } from '@educt/interfaces';
 import LoadingPage from '@educt/components/LoadingPage';
 import { EditCourseForm } from '@educt/components/Forms/CourseForm';
 import DeleteCourseDialog from '@educt/components/Dialogs/DeleteCourseDialog';
+import PrevPageButton from '@educt/components/PrevPageButton';
+import { DeleteButton } from '@educt/components/Buttons';
+import { StatusButton } from './components';
+import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
 import { StudentTableList, StudentTableRow } from './components/StudentTableList';
 import LessonList from './components/LessonList';
 
@@ -23,9 +27,6 @@ import LessonList from './components/LessonList';
 import { useParams } from 'react-router-dom';
 import { useFetchCourse } from '@educt/hooks/queries';
 import { useDisclosure } from '@chakra-ui/hooks';
-import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
-import { DeleteButton } from '@educt/components/Buttons';
-import { StatusButton } from './components';
 
 /**
  * Course editor
@@ -54,7 +55,11 @@ const EditCoursePage: React.FC<IPageProps> = () => {
       </Helmet>
 
       <DeleteCourseDialog course={course} onClose={onCloseDeleteDialog} isOpen={isOpenDeleteDialog} />
-      <PageHeading heading='Course editor' description={course.title}>
+      <PageHeading
+        headingPrefix={<PrevPageButton prevPage='/courses' />}
+        heading='Course editor'
+        description={course.title}
+      >
         <Flex mt='5' justifyContent='flex-end'>
           <StatusButton courseId={course.id} currentStatus={course.status} />
           <DeleteButton onClick={onOpenDeleteDialog} ml='2' />

src/pages/lesson/lesson.tsx

@@ -3,6 +3,7 @@ import moment from 'moment';
 import * as helpres from '@educt/helpers';
 import { Link as ReactRouterLink, Redirect } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import axios from 'axios';
 import {
   Flex,
   Box,
@@ -17,11 +18,12 @@ import {
   Stack,
   Icon,
   IconButton,
-  useColorModeValue,
 } from '@chakra-ui/react';
+import ReactPlayer from 'react-player';
 import { MdOutlineCircle, MdCheckCircle, MdOutlineFilePresent, MdSkipNext, MdSkipPrevious } from 'react-icons/md';
 import LoadingPage from '@educt/components/LoadingPage';
 import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
+import { EditIcon } from '@chakra-ui/icons';
 
 /**
  * Types
@@ -33,6 +35,8 @@ import { ILesson, ILessonMaterial, IPageProps } from '@educt/interfaces';
  */
 import { useEffect, useRef, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
+import { useRootStore } from '@educt/hooks/useRootStore';
+import { useColorModeValue, useToast } from '@chakra-ui/react';
 import { useFetchLesson } from '@educt/hooks/queries/lesson/useFetchLesson';
 import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCourseLessons';
 import { useFetchLessonProgress } from '@educt/hooks/queries/lesson/useFetchLessonProgress';
@@ -47,10 +51,14 @@ import { LessonServiceInstance } from '@educt/services';
  */
 const LessonPage: React.FC<IPageProps> = () => {
   const { id } = useParams<{ id: string }>();
+  const {
+    userStore: { me },
+  } = useRootStore();
   const { error, data: lesson, isLoading } = useFetchLesson(id);
   const { fetchCourseLessons, data: lessons } = useFetchCourseLessons();
   const { fetchLessonProgress } = useFetchLessonProgress();
   const history = useHistory();
+  const toast = useToast();
   const [nextLesson, setNextLesson] = useState<ILesson | null>(null);
   const [prevLesson, setPrevLesson] = useState<ILesson | null>(null);
   const currentLessonRef = useRef<HTMLDivElement | null>(null);
@@ -75,7 +83,7 @@ const LessonPage: React.FC<IPageProps> = () => {
     if (lesson !== null) {
       (async () => {
         await fetchCourseLessons(lesson.course_id);
-        await fetchLessonProgress(lesson.id);
+        lesson.video && (await fetchLessonProgress(lesson.id));
       })();
     }
   }, [lesson]);
@@ -100,34 +108,62 @@ const LessonPage: React.FC<IPageProps> = () => {
 
   const handlePrevLesson = () => prevLesson && history.push(`/lesson/${prevLesson.id}`);
 
+  const handleEditLesson = () => history.push(`/lessons/edit/${id}`);
+
   const handleDownloadMaterial =
     ({ name, client_name }: ILessonMaterial) =>
     async () => {
-      const blob = await LessonServiceInstance.fetchMaterial(name);
-      if (blob instanceof Blob) {
-        const link = document.createElement('a');
-        link.href = window.URL.createObjectURL(blob);
-        link.download = `${client_name}`;
-        link.click();
-        window.URL.revokeObjectURL(link.href);
+      try {
+        const blob = await LessonServiceInstance.fetchMaterial(name);
+        if (blob instanceof Blob) {
+          const link = document.createElement('a');
+          link.href = window.URL.createObjectURL(blob);
+          link.download = `${client_name}`;
+          link.click();
+          window.URL.revokeObjectURL(link.href);
+        }
+      } catch (error: unknown) {
+        if (axios.isAxiosError(error)) {
+          if (error.response) {
+            if (error.response.status === 404) {
+              toast({ title: 'File not found.', status: 'error' });
+            }
+          }
+        } else {
+          console.error(error);
+        }
       }
     };
 
+  if (me === null) return <LoadingPage />;
+
   return (
     <PageWrapper>
       <Helmet>
         <title>{lesson.title}</title>
       </Helmet>
       <PageHeading heading={lesson.title}>
-        <Box mt='3'>
+        <Flex mt='3' alignItems={'center'} justifyContent={'space-between'}>
           <Text fontSize={'sm'}>~{moment.duration(lesson.duration, 'minutes').humanize()}</Text>
-        </Box>
+          {(me.isAdmin || me.isTeacher) && (
+            <Button onClick={handleEditLesson} leftIcon={<EditIcon />} variant={'outline'} size='sm'>
+              Edit
+            </Button>
+          )}
+        </Flex>
       </PageHeading>
       <PageContent>
         <Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}>
           <GridItem>
             <Box>
-              <Box bg={lesson.color?.hex} h={{ base: '200px', sm: '350px', lg: '400px', xl: '500' }} />
+              <ReactPlayer width={'100%'} height={'100%'} controls url={lesson.video?.url} />
+              {!lesson.video && (
+                <Flex h='500px' justifyContent={'center'} alignItems={'center'}>
+                  <Text color='gray.500' userSelect={'none'}>
+                    Video has not been uploaded yet.
+                  </Text>
+                </Flex>
+              )}
             </Box>
 
             <Flex justifyContent={'flex-end'} mt='3'>

src/types/index.d.ts

@@ -40,6 +40,17 @@ export type LessonProgress = {
   } | null;
 };
 
+export type LessonVideoType = {
+  id: number;
+  client_name: string;
+  ext: string;
+  name: string;
+  size: number;
+  url: string;
+  created_at: '2022-01-02T21:39:08.481+03:00';
+  updated_at: string;
+};
+
 export type ConfirmEmailContainerDataType = {
   newEmail: string;
   expired_seconds: number;

vite.config.ts

@@ -29,6 +29,10 @@ export default defineConfig({
         target: constants.BACKEND_URL,
         changeOrigin: true,
       },
+      '/video': {
+        target: constants.BACKEND_URL,
+        changeOrigin: true,
+      },
     },
   },
   resolve: {