bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 18:29:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'release/1.1.0'

Browse Source
This commit is contained in:
Sergey Yarkov 2022-06-12 20:42:32 +03:00
commit 65fa6f23b6
29 changed files with 5992 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.dockerignore Normal file
View File

@ -0,0 +1,15 @@
node_modules
dist
dist-ssr
coverage
stats.html
Dockerfile*
docker-compose*
.dockerignore
*.md
*.local
.git
.gitignore
.vscode
.DS_STORE
.env

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ stats.html
dist
dist-ssr
*.local
.env

23
Dockerfile Normal file
View File

@ -0,0 +1,23 @@
ARG NODE_IMAGE=node:14.17.3-alpine3.11
ARG NGINX_IMAGE=nginx:1.16.0-alpine
FROM ${NODE_IMAGE} as builder
WORKDIR /home/app
COPY package*.json ./
RUN npm install
COPY . .
# Get build arguments and set env variables
ARG API_URL
ARG WS_URL
ENV VITE_API_URL=${API_URL}
ENV VITE_WS_URL=${WS_URL}
RUN npm run build
FROM ${NGINX_IMAGE} as production
WORKDIR /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY --from=builder /home/app/dist /usr/share/nginx/html
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

4
README.md
View File

@ -1,3 +1,3 @@
## Edcut client
# educt-client
...
_This service is part of [Educt](https://github.com/sergeyyarkov/educt) which contains frontend application._

2
constants.ts
View File

@ -1,2 +0,0 @@
export const BACKEND_URL = 'http://localhost:3333';
export const WS_URL = 'ws://localhost:3333';

8
nginx/default.conf Normal file
View File

@ -0,0 +1,8 @@
server {
listen 5000;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}

5811
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -1,9 +1,9 @@
{
"name": "educt-client",
"version": "1.0.0",
"version": "1.1.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"build": "vite build",
"serve": "vite preview",
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
"lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
@ -32,7 +32,7 @@
"react-player": "^2.9.0",
"react-router-dom": "^5.2.0",
"react-spinners": "^0.11.0",
"react-virtuoso": "^2.2.8",
"react-virtuoso": "^2.13.1",
"socket.io-client": "^4.4.1",
"validator": "^13.6.0",
"yup": "^0.32.9"

13
src/App.tsx
View File

@ -18,6 +18,19 @@ import { SocketContext } from './contexts';
import { HistoryMessageType, UserOnlineListType, UserSeesionType } from './types';
import { useToast } from '@chakra-ui/react';
/**
* Virtuoso's resize observer can this error,
* which is caught by DnD and aborts dragging.
*/
window.addEventListener('error', e => {
if (
e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
e.message === 'ResizeObserver loop limit exceeded'
) {
e.stopImmediatePropagation();
}
});
const App = () => {
const {
userStore,

4
src/api.config.ts
View File

@ -1,8 +1,8 @@
import { AxiosRequestConfig } from 'axios';
import * as constants from '../constants';
import * as constants from '@educt/constants';
const apiConfig: AxiosRequestConfig = {
baseURL: `${constants.BACKEND_URL}/api/`,
baseURL: `${constants.BACKEND_URL}/`,
responseType: 'json',
withCredentials: true,
};

19
src/components/Forms/CourseForm/CourseForm.tsx
View File

@ -25,6 +25,7 @@ import { useErrorHandler } from 'react-error-boundary';
* Services
*/
import { CategoryServiceInstance, UserServiceInstance } from '@educt/services';
import { DESCRIPTION_MAX_LENGTH, EDUCATION_DESCRIPTION_MAX_LENGTH } from './CourseForm.validator';
export type InputFields = {
title: string;
@ -57,9 +58,10 @@ const CourseForm: React.FC<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
*/
const loadUsersOptions = async (): Promise<OptionType[] | undefined> => {
try {
const users = await UserServiceInstance.fetchAll({ limit: 12, role: UserRoleEnum.TEACHER });
const teachers = await UserServiceInstance.fetchAll({ role: UserRoleEnum.TEACHER });
const admins = await UserServiceInstance.fetchAll({ role: UserRoleEnum.ADMIN });
return users.data.map(user => ({
return teachers.data.concat(admins.data).map(user => ({
label: user.fullname,
value: user.id,
}));
@ -113,8 +115,11 @@ const CourseForm: React.FC<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
<Text as='small' color='red.500'>
{errors.description?.message}
</Text>
<Text as='small' color={!!errors.description || watchDescription?.length > 250 ? 'red.500' : 'gray.500'}>
{watchDescription?.length || 0}/250
<Text
as='small'
color={!!errors.description || watchDescription?.length > DESCRIPTION_MAX_LENGTH ? 'red.500' : 'gray.500'}
>
{watchDescription?.length || 0}/{DESCRIPTION_MAX_LENGTH}
</Text>
</Flex>
</FormControl>
@ -130,10 +135,12 @@ const CourseForm: React.FC<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
<Text
as='small'
color={
!!errors.education_description || watchEducationDescription.length > 250 ? 'red.500' : 'gray.500'
!!errors.education_description || watchEducationDescription.length > EDUCATION_DESCRIPTION_MAX_LENGTH
? 'red.500'
: 'gray.500'
}
>
{watchEducationDescription.length || 0}/250
{watchEducationDescription.length || 0}/{EDUCATION_DESCRIPTION_MAX_LENGTH}
</Text>
)}
</Flex>

13
src/components/Forms/CourseForm/CourseForm.validator.ts
View File

@ -1,15 +1,20 @@
import yup from '@educt/schema';
const FILE_SIZE = 1000 * 1024;
const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png', 'image/webp'];
export const FILE_SIZE = 1000 * 1024;
export const SUPPORTED_FORMATS = ['image/jpg', 'image/jpeg', 'image/png', 'image/webp'];
export const DESCRIPTION_MAX_LENGTH = 250;
export const EDUCATION_DESCRIPTION_MAX_LENGTH = 250;
const CreateCourseSchema = 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'),
education_description: yup.string().max(250, 'This section must be at most 250 characters').nullable(),
.max(DESCRIPTION_MAX_LENGTH, 'Description must be at most 250 characters'),
education_description: yup
.string()
.max(EDUCATION_DESCRIPTION_MAX_LENGTH, 'This section must be at most 250 characters')
.nullable(),
image: yup
.mixed()
.test('fileSize', 'File size is too large', (value: File) => {

1
src/components/Forms/LessonForm/CreateLessonForm.tsx
View File

@ -27,6 +27,7 @@ const CreateLessonForm: React.FC = () => {
description: data.description,
duration: data.duration,
video: data.video,
linked_video_url: data.linked_video_url,
materials: Array.from(data.materials || []),
course_id,
});

2
src/components/Forms/LessonForm/EditLessonForm.tsx
View File

@ -27,6 +27,7 @@ const EditLessonForm: React.FC<EditLessonFormPropsType> = ({ lesson }) => {
title: lesson.title,
description: lesson.description,
duration: lesson.duration,
linked_video_url: lesson.linked_video_url || undefined,
video: undefined,
materials: undefined,
},
@ -41,6 +42,7 @@ const EditLessonForm: React.FC<EditLessonFormPropsType> = ({ lesson }) => {
description: data.description,
video: data.video,
duration: data.duration,
linked_video_url: data.linked_video_url,
materials: data.materials?.length !== 0 ? Array.from(data.materials || []) : null,
});

45
src/components/Forms/LessonForm/LessonForm.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import {
FormControl,
FormHelperText,
@ -13,17 +13,20 @@ import {
Flex,
Divider,
} from '@chakra-ui/react';
import * as constants from '@educt/constants';
import { Controller, UseFormReturn } from 'react-hook-form';
import VideoUploader from '@educt/components/VideoUploader';
import FilesUploader from '@educt/components/FilesUploader';
import { FileSupportedFormatsEnum, VideoSupportedFormatsEnum } from '@educt/enums';
import type { AttachmentFileType, LessonVideoType } from '@educt/types';
import { DESCRIPTION_MAX_LENGTH } from './LessonForm.validator';
export type InputFields = {
title: string;
description: string;
duration: string;
video: File;
linked_video_url?: string | undefined;
materials?: FileList | undefined;
};
@ -47,9 +50,21 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
const {
control,
register,
watch,
formState: { errors, isDirty },
unregister,
} = reactHookForm;
const [isLinkedVideoUrl, setIsLinkedVideoUrl] = useState<boolean>(false);
const watchDescription = watch('description');
useEffect(() => {
if (!isLinkedVideoUrl) {
unregister('linked_video_url');
}
}, [isLinkedVideoUrl]);
return (
<form onSubmit={onSubmit}>
<Stack spacing={'5'}>
@ -71,16 +86,39 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
<Text as='small' color='red.500'>
{errors.description?.message}
</Text>
<Text
as='small'
color={!!errors.description || watchDescription?.length > DESCRIPTION_MAX_LENGTH ? 'red.500' : 'gray.500'}
>
{watchDescription?.length || 0}/{DESCRIPTION_MAX_LENGTH}
</Text>
</Flex>
</FormControl>
<FormControl isRequired id='video'>
{isLinkedVideoUrl ? (
<FormControl id='linked_video_url'>
<FormLabel>Video URL</FormLabel>
<Input placeholder='Link to video source. (YouTube, Vimeo, .mp4)' {...register('linked_video_url')} />
<Text as='small' color='red.500'>
{errors.linked_video_url?.message}
</Text>
<FormHelperText textDecoration={'underline'} cursor='pointer' onClick={() => setIsLinkedVideoUrl(false)}>
choose from files
</FormHelperText>
</FormControl>
) : (
<FormControl id='video'>
<FormLabel>Video</FormLabel>
<Controller
control={control}
name='video'
render={({ field: { onChange, value: file } }) => (
<VideoUploader onChange={file => onChange(file)} file={file} preloadedVideoUrl={preloadedVideo?.url} />
<VideoUploader
onChange={file => onChange(file)}
file={file}
setIsLinkedVideoUrl={setIsLinkedVideoUrl}
preloadedVideoUrl={preloadedVideo && constants.BACKEND_URL + preloadedVideo.url}
/>
)}
/>
<Text as='small' color='red.500'>
@ -93,6 +131,7 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
.join(', ')}
</FormHelperText>
</FormControl>
)}
<FormControl isRequired id='duration'>
<FormLabel>Video duration</FormLabel>

10
src/components/Forms/LessonForm/LessonForm.validator.ts
View File

@ -1,8 +1,9 @@
import * as helpers from '@educt/helpers';
import yup from '@educt/schema';
const VIDEO_FILE_SIZE = 5000 * 1024 * 1024;
const MATERIAL_FILE_SIZE = 100000 * 1024;
export const VIDEO_FILE_SIZE = 5000 * 1024 * 1024;
export const MATERIAL_FILE_SIZE = 100000 * 1024;
export const DESCRIPTION_MAX_LENGTH = 250;
const CreateLessonFormSchema = yup
.object({
@ -10,14 +11,15 @@ const CreateLessonFormSchema = yup
description: yup
.string()
.required('Description field name is required')
.max(250, 'Description must be at most 250 characters'),
.max(DESCRIPTION_MAX_LENGTH, 'Description must be at most 250 characters'),
duration: yup.string().required('Duration field name is required'),
video: yup
.mixed<File>()
.test('fileSize', `File size is too large, maximum size is ${helpers.transformBytes(VIDEO_FILE_SIZE)}`, value =>
!value ? true : value.size <= VIDEO_FILE_SIZE
)
.required('Video field name is required'),
.optional(),
linked_video_url: yup.string().matches(new RegExp('^(http|https|ftp)://'), 'URL is incorrect'),
materials: yup
.mixed<File[]>()
.test(

5
src/components/Select/Select.tsx
View File

@ -41,7 +41,7 @@ const Select: React.FC<ISelectPropsType> = props => {
>
{options?.find(option => option.value === value)?.label || props?.placeholder || 'Select Option'}
</MenuButton>
<MenuList>
<MenuList maxH='175px' m='0' p='0' overflowY={'scroll'}>
{options && options.length !== 0 ? (
options.map(option => (
<MenuItem
@ -49,6 +49,9 @@ const Select: React.FC<ISelectPropsType> = props => {
onClick={() => {
props.onChange(option.value);
}}
pb='0'
pt='0'
minH='35px'
>
{option.label}
</MenuItem>

2
src/components/UserProfile/Avatar/index.ts
View File

@ -3,7 +3,7 @@ import { ChatButton } from './ChatButton';
export interface IAvatarProps {
name: string;
isOnline?: boolean | undefined;
isOnline?: boolean | null;
}
export interface IChatButtonProps {

36
src/components/VideoUploader/VideoUploader.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { Dispatch, SetStateAction, 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 { MdLink, MdUpload } from 'react-icons/md';
import { VideoSupportedFormatsEnum } from '@educt/enums';
import { LessonVideoType } from '@educt/types';
@ -8,9 +8,15 @@ type VideoUploaderPropsType = {
onChange: (file: File) => void;
file?: File | LessonVideoType | undefined;
preloadedVideoUrl?: string | undefined;
setIsLinkedVideoUrl?: Dispatch<SetStateAction<boolean>>;
};
const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, preloadedVideoUrl }) => {
const VideoUploader: React.FC<VideoUploaderPropsType> = ({
onChange,
file,
preloadedVideoUrl,
setIsLinkedVideoUrl,
}) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const [videoObjectUrl, setVideoObjectUrl] = useState<string | undefined>(undefined);
@ -42,11 +48,23 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, prelo
};
const ChangeVideoButton = () => (
<Button onClick={onSelectFileHandler} leftIcon={<MdUpload />} variant={'outline'} size='sm' mt='2' float='right'>
<Button mr='1' onClick={onSelectFileHandler} leftIcon={<MdUpload />} variant={'outline'} size='sm' mt='2'>
Change video
</Button>
);
const ChangeUrlVideoButton = () => (
<Button
onClick={() => setIsLinkedVideoUrl && setIsLinkedVideoUrl(true)}
leftIcon={<MdLink />}
variant={'outline'}
size='sm'
mt='2'
>
From URL
</Button>
);
useEffect(() => {
if (videoRef.current) {
videoRef.current.load();
@ -91,9 +109,14 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, prelo
</Text>
</Text>
</Box>
<Button onClick={onSelectFileHandler} mt='6'>
<Flex mt='4'>
<Button size='sm' onClick={onSelectFileHandler} mr='2'>
Select file
</Button>
<Button size='sm' onClick={() => setIsLinkedVideoUrl && setIsLinkedVideoUrl(true)}>
From URL
</Button>
</Flex>
</Flex>
) : (
<Box>
@ -102,7 +125,10 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, prelo
<source src={preloadedVideoUrl} />
</video>
</AspectRatio>
<Flex justifyContent={'flex-end'}>
<ChangeVideoButton />
<ChangeUrlVideoButton />
</Flex>
</Box>
)}
<Input

2
src/constants.ts Normal file
View File

@ -0,0 +1,2 @@
export const BACKEND_URL = import.meta.env.VITE_API_URL || 'http://localhost:3333';
export const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:3333';

10
src/env.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL?: string | undefined;
readonly VITE_WS_URL?: string | undefined;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

1
src/interfaces/index.ts
View File

@ -57,6 +57,7 @@ export interface ILesson {
progress: LessonProgress;
content: ILessonContent;
video?: LessonVideoType | undefined | null;
linked_video_url?: string | null;
created_at: string;
updated_at: string;
}

12
src/pages/course/course.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { observer } from 'mobx-react';
import * as helpres from '@educt/helpers';
import * as constants from '@educt/constants';
import { Redirect } from 'react-router-dom';
import { Flex, Box, Text, Heading, Button, Grid, GridItem, Divider, AvatarGroup, Avatar } from '@chakra-ui/react';
import { MdPlayCircleOutline } from 'react-icons/md';
@ -45,7 +46,7 @@ const CoursePage: React.FC<IPageProps> = () => {
const isEmptyLessons = course.lessons.length === 0;
const isEmptyStudents = course.students.length === 0;
const handleWatchCourse = () => history.push(`/lesson/${course.lessons[0].id}`);
const handleWatchCourse = () => course.lessons[0] && history.push(`/lesson/${course.lessons[0].id}`);
const handleEditCourse = () => history.push(`/courses/edit/${course.id}`);
@ -73,7 +74,7 @@ const CoursePage: React.FC<IPageProps> = () => {
<Box>
{(me.isAdmin || me.isTeacher) && <EditButton onClick={handleEditCourse} mr='2' />}
<Button
isDisabled={!isCourseAvailable}
isDisabled={!isCourseAvailable || course.lessons[0] === undefined}
onClick={handleWatchCourse}
leftIcon={<MdPlayCircleOutline />}
size='sm'
@ -83,7 +84,10 @@ const CoursePage: React.FC<IPageProps> = () => {
</Button>
</Box>
</Flex>
<CourseBackgroundImage bg={course.color?.hex} src={course.image?.url} />
<CourseBackgroundImage
bg={course.color?.hex}
src={course.image ? `${constants.BACKEND_URL + course.image.url}` : undefined}
/>
</Box>
<Box mt='4'>
<Tabs>
@ -129,7 +133,7 @@ const CoursePage: React.FC<IPageProps> = () => {
<Text fontSize={'2xl'} fontWeight={'medium'}>
What you&apos;ll learn.
</Text>
<Text fontSize={'sm'} mt='2'>
<Text fontSize={'sm'} mt='2' textAlign={'justify'}>
{course.education_description}
</Text>
</Box>

18
src/pages/courses/components/CourseList/CourseItem.tsx
View File

@ -7,6 +7,7 @@ import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
import { MdMoreHoriz, MdGroup, MdThumbUp, MdVideoLibrary } from 'react-icons/md';
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
import { DeleteIcon, EditIcon } from '@chakra-ui/icons';
import * as constants from '@educt/constants';
/**
* Types
@ -102,8 +103,9 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
<Link
to={`/course/${course.id}`}
as={ReactRouterLink}
display='block'
h='full'
display='flex'
flexDir={'column'}
h='100%'
textDecoration='none'
_visited={{ textDecoration: 'none' }}
_hover={{ textDecoration: 'none' }}
@ -128,11 +130,11 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
w='100%'
borderTopLeftRadius='lg'
borderTopRightRadius='lg'
src={course.image.url}
src={course.image ? `${constants.BACKEND_URL + course.image.url}` : undefined}
/>
)}
</Box>
<Box p='0 10px' mt='10px' pb='20px'>
<Flex flexDir={'column'} p='0 10px' mt='10px' pb='20px' h='100%'>
<Flex justifyContent='space-between'>
<Badge colorScheme='blue'>{course.category.title}</Badge>
{(me.isAdmin || me.isTeacher) && <CourseStatusBadge status={course.status} />}
@ -140,8 +142,10 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
<Heading as='h2' fontSize='xl' mt='5px'>
{course.title}
</Heading>
<Text mt='2'>{course.description}</Text>
<Flex mt='20px' flexWrap='wrap'>
<Text mt='2' mb='4'>
{course.description}
</Text>
<Flex mt='auto' flexWrap='wrap'>
<Flex alignItems='center' mr='1'>
<Icon as={MdVideoLibrary} mr='2' />
<Text mr='4'>{course.lessons_count} lessons</Text>
@ -155,7 +159,7 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
<Text>{course.likes_count} likes</Text>
</Flex>
</Flex>
</Box>
</Flex>
</Link>
</Box>
);

1
src/pages/courses/edit/components/LessonList/LessonList.tsx
View File

@ -69,6 +69,7 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
const handleChangeOrder = async (ids: string[]) => {
try {
if (ids.length <= 0) return;
const data = await LessonServiceInstance.saveOrder(ids);
return data;
} catch (error) {

21
src/pages/lesson/lesson.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import moment from 'moment';
import * as constants from '@educt/constants';
import * as helpres from '@educt/helpers';
import { Link as ReactRouterLink, Redirect } from 'react-router-dom';
import { Helmet } from 'react-helmet';
@ -83,7 +84,7 @@ const LessonPage: React.FC<IPageProps> = () => {
if (lesson !== null) {
(async () => {
await fetchCourseLessons(lesson.course_id);
lesson.video && (await fetchLessonProgress(lesson.id));
(lesson.video || lesson.linked_video_url) && (await fetchLessonProgress(lesson.id));
})();
}
}, [lesson]);
@ -137,6 +138,8 @@ const LessonPage: React.FC<IPageProps> = () => {
if (me === null) return <LoadingPage />;
const videoURL = lesson.video ? constants.BACKEND_URL + lesson.video.url : lesson.linked_video_url;
return (
<Page>
<Helmet>
@ -151,11 +154,17 @@ const LessonPage: React.FC<IPageProps> = () => {
<Page.Content>
<Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}>
<GridItem>
<Box>
{lesson.video ? (
<ReactPlayer width={'100%'} height={'100%'} controls url={lesson.video?.url} />
<Box overflowY='hidden'>
{lesson.video || lesson.linked_video_url ? (
<ReactPlayer
style={{ backgroundColor: '#000' }}
width={'100%'}
height={'547px'}
controls
url={videoURL || ''}
/>
) : (
<Flex h='500px' justifyContent={'center'} alignItems={'center'}>
<Flex h='547px' justifyContent={'center'} alignItems={'center'}>
<Text color='gray.500' userSelect={'none'}>
Video has not been uploaded yet.
</Text>
@ -191,7 +200,7 @@ const LessonPage: React.FC<IPageProps> = () => {
</GridItem>
<GridItem minWidth={'250px'}>
<Box>
<Stack maxH={'500px'} overflowY={'scroll'} spacing={'0'}>
<Stack maxH={'547px'} minH={'547px'} overflowY={'scroll'} spacing={'0'}>
{lessons.map((lesson, i) => (
<LinkBox
ref={lesson.id === id ? currentLessonRef : undefined}

2
src/providers/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, ReactNode } from 'react';
import * as constants from '../../constants';
import * as constants from '@educt/constants';
import {
ChangeEmailPageContext,
CoursesPageContext,

2
src/types/index.d.ts vendored
View File

@ -207,6 +207,7 @@ export type CreateLessonParamsType = {
duration: string;
course_id: string;
video: File;
linked_video_url?: string | undefined;
materials?: File[] | undefined;
};
@ -216,6 +217,7 @@ export type UpdateLessonParamsType = {
duration?: string | undefined;
course_id?: string | undefined;
video?: File | undefined;
linked_video_url?: string | undefined;
materials?: File[] | undefined | null;
};

16
vite.config.ts
View File

@ -1,5 +1,4 @@
import { defineConfig } from 'vite';
import * as constants from './constants';
import path from 'path';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';
@ -20,20 +19,7 @@ export default defineConfig({
publicDir: 'public',
plugins: [react()],
server: {
proxy: {
'/api': {
target: constants.BACKEND_URL,
changeOrigin: true,
},
'/uploads': {
target: constants.BACKEND_URL,
changeOrigin: true,
},
'/video': {
target: constants.BACKEND_URL,
changeOrigin: true,
},
},
port: 5000,
},
resolve: {
alias: [{ find: '@educt', replacement: path.resolve(__dirname, 'src') }],