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

feat: downloading materials from lesson

Browse Source
This commit is contained in:
Sergey Yarkov 2021-12-21 20:51:08 +03:00
parent 2f8b7d3f71
commit 37c5d8c36e
7 changed files with 120 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/hooks/queries/lesson/useFetchLesson.ts
View File

@ -1,12 +1,28 @@
import useAsync from '@educt/hooks/useAsync';
import { ILesson } from '@educt/interfaces';
import { LessonServiceInstance } from '@educt/services';
import useAsync from '@educt/hooks/useAsync';
import { useEffect } from 'react';
import { useToast } from '@chakra-ui/react';
import { useErrorHandler } from 'react-error-boundary';
const useFetchLesson = (id: string) => {
const toast = useToast();
const handleError = useErrorHandler();
const fetch = async (id: string) => {
const { data } = await LessonServiceInstance.fetchLessonById(id);
return data;
try {
const { data } = await LessonServiceInstance.fetchLessonById(id);
return data;
} catch (error: any) {
if (error.response) {
if (error.response.status === 403) {
toast({ title: 'You are not able to view this lesson.', status: 'warning' });
}
} else {
handleError(error);
}
return Promise.reject(error);
}
};
const { execute: fetchLessonById, ...state } = useAsync<ILesson, Parameters<typeof fetch>>(fetch);

22
src/interfaces/index.ts
View File

@ -27,7 +27,7 @@ export interface ICourse {
status: CourseStatusEnum;
teacher: Pick<IUser, 'id' | 'first_name' | 'fullname' | 'last_name' | 'email' | 'created_at' | 'updated_at'>;
category: ICategory;
lessons: ILesson[];
lessons: Omit<ILesson, 'materials' | 'content'>[];
students: IUser[];
color: ColorType | null;
students_count: string;
@ -45,10 +45,30 @@ export interface ILesson {
duration: string;
color?: ColorType | undefined | null;
materials_count?: string | undefined;
materials: Array<ILessonMaterial>;
content: ILessonContent;
created_at: string;
updated_at: string;
}
export interface ILessonMaterial {
id: number;
lesson_id: string;
name: string;
client_name: string;
size: number;
url: string;
ext: string;
created_at: string;
updated_at: string;
}
export interface ILessonContent {
id: number;
lesson_id: string;
video_url: string;
}
export interface ICategory {
id: string;
title: string;

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

@ -56,13 +56,13 @@ const CreateLessonButton: React.FC<{ id: string }> = ({ id }) => {
const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
const history = useHistory();
const { onOpen: onOpenDelDialog, onClose: onCloseDelDialog, isOpen: isOpenDelDialog } = useDisclosure();
const [lessons, setLessons] = useState<Array<ILesson>>(course.lessons);
const [lessons, setLessons] = useState<ICourse['lessons']>(course.lessons);
const [deleting, setDeleting] = useState<Pick<ILesson, 'id' | 'title'> | null>(null);
const handleError = useErrorHandler();
const handleCreateLesson = (): void => history.push('/lessons/create');
const handleEditLesson = (id: string): void => history.push(`/lessons/edit/${id}`);
const handleDeleteLesson = (lesson: ILesson): void => {
const handleDeleteLesson = (lesson: ICourse['lessons'][number]): void => {
setDeleting({ id: lesson.id, title: lesson.title });
onOpenDelDialog();
};
@ -93,7 +93,7 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
index,
}: {
provided: DraggableProvided;
lesson: ILesson;
lesson: ICourse['lessons'][number];
isDragging: boolean;
index: number;
}) => {

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

@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import moment from 'moment';
import * as helpres from '@educt/helpers';
import { Link as ReactRouterLink, useHistory } from 'react-router-dom';
import {
Flex,
@ -15,14 +16,13 @@ import {
Stack,
Icon,
IconButton,
useToast,
useColorModeValue,
} from '@chakra-ui/react';
/**
* Types
*/
import { ILesson, IPageProps } from '@educt/interfaces';
import { ILesson, ILessonMaterial, IPageProps } from '@educt/interfaces';
/**
* Hooks
@ -32,41 +32,23 @@ import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageEle
import { useFetchLesson } from '@educt/hooks/queries/lesson/useFetchLesson';
import LoadingPage from '@educt/components/LoadingPage';
import { MdOutlineCircle, MdOutlineFilePresent, MdSkipNext, MdSkipPrevious } from 'react-icons/md';
import { useRootStore } from '@educt/hooks/useRootStore';
import { Helmet } from 'react-helmet';
import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCourseLessons';
import { LessonServiceInstance } from '@educt/services';
/**
* Lesson Page
*/
const LessonPage: React.FC<IPageProps> = () => {
const {
userStore: { me },
} = useRootStore();
const { id } = useParams<{ id: string }>();
const { error, data: lesson, isLoading } = useFetchLesson(id);
const { fetchCourseLessons, data: lessons } = useFetchCourseLessons();
const toast = useToast();
const history = useHistory();
const [nextLesson, setNextLesson] = useState<ILesson | null>(null);
const [prevLesson, setPrevLesson] = useState<ILesson | null>(null);
const [isPageAvailable, setIsPageAvailable] = useState<boolean>(true);
const currentLessonRef = useRef<HTMLDivElement | null>(null);
const bg = useColorModeValue('gray.50', 'gray.700');
useEffect(() => {
/**
* Сheck if the user has access to the lesson
*/
if (me === null || lesson === null) return;
const isHasAccess = me.courses?.some(course => course.id === lesson.course_id) ?? true;
if (!isHasAccess) {
toast({ title: 'You are not able to view this lesson.', status: 'warning' });
setIsPageAvailable(false);
}
}, []);
useEffect(() => {
currentLessonRef.current?.scrollIntoView({ block: 'center' });
window.scrollTo(0, 0);
@ -88,17 +70,39 @@ const LessonPage: React.FC<IPageProps> = () => {
}
}, [lesson]);
/**
* Lesson not found
*/
if (error?.response?.status === 404) {
return <Redirect to='/404' />;
}
/**
* Unavailable lesson for authorized user
*/
if (error?.response?.status === 403) {
return <Redirect to={`/courses`} />;
}
if (!lesson || !lessons || isLoading) return <LoadingPage />;
if (!isPageAvailable) return <Redirect to={`/course/${lesson.course_id}`} />;
const handleNextLesson = () => nextLesson && history.push(`/lesson/${nextLesson.id}`);
const handlePrevLesson = () => prevLesson && history.push(`/lesson/${prevLesson.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);
}
};
return (
<PageWrapper>
<Helmet>
@ -177,17 +181,41 @@ const LessonPage: React.FC<IPageProps> = () => {
<Text fontSize={'2xl'} fontWeight={'medium'}>
Materials
</Text>
<Stack>
{[1, 2, 3].map(n => (
<Flex key={n} alignItems={'center'} mt='5' p='3' bg={bg} borderRadius={'lg'}>
<Icon as={MdOutlineFilePresent} mr='2' h={4} w={4} />
<Text fontSize={'sm'} fontWeight={'medium'} lineHeight={'1rem'}>
lesson-1_sourse-code.zip <br />
<Text as='small'>190kB</Text>
</Text>
</Flex>
))}
</Stack>
{lesson.materials.length !== 0 ? (
<Stack>
{lesson.materials.map(material => (
<Flex
key={material.id}
alignItems={'center'}
mt='5'
p='3'
bg={bg}
borderRadius={'lg'}
_hover={{ textDecor: 'underline' }}
>
<Icon as={MdOutlineFilePresent} mr='2' h={4} w={4} />
<Text
onClick={handleDownloadMaterial(material)}
cursor={'pointer'}
overflow={'hidden'}
fontSize={'sm'}
fontWeight={'medium'}
lineHeight={'1rem'}
>
{material.client_name}
<br />
<Text as='small'>{helpres.transformBytes(material.size)}</Text>
</Text>
</Flex>
))}
</Stack>
) : (
<Box textAlign={'center'} mt='3'>
<Text color='gray.500' fontSize={'sm'}>
There are no materials
</Text>
</Box>
)}
</Box>
</Box>
</GridItem>

1
src/pages/profile/components/CourseList/CourseItem.tsx
View File

@ -37,6 +37,7 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course }) => {
</Text>
<Box>
<Tag
size='sm'
color='white'
boxShadow={`inset 0 0 0px 1px ${course.category.color?.hex}`}
bg={course.category.color?.hex}

4
src/pages/profile/components/index.tsx
View File

@ -60,7 +60,9 @@ export const ProfileDescription: React.FC<IProfileDescriptionProps> = props => {
{email}
</Text>
</Heading>
<UserBadge mt='2' roles={roles} />
<Box>
<UserBadge mt='2' roles={roles} />
</Box>
</Box>
</Flex>
</Box>

11
src/services/LessonService.ts
View File

@ -20,6 +20,17 @@ class LessonService {
return result.data;
}
/**
* Download material file by file name
*
* @param fileName File name
* @returns Blob
*/
public async fetchMaterial(fileName: string): Promise<Blob> {
const result = await this.api.get(`/v1/lessons/materials/${fileName}`, { responseType: 'blob' });
return result.data;
}
/**
* Delete lesson by id
*