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

fix: fixed scroll & fixed page access

Browse Source
This commit is contained in:
Sergey Yarkov 2021-12-21 01:01:13 +03:00
parent e4eb6e84fb
commit 2f8b7d3f71
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import moment from 'moment';
import { Link as ReactRouterLink, useHistory } from 'react-router-dom';
import {
@ -16,6 +16,7 @@ import {
Icon,
IconButton,
useToast,
useColorModeValue,
} from '@chakra-ui/react';
/**
@ -30,7 +31,7 @@ import { Redirect, useParams } from 'react-router-dom';
import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
import { useFetchLesson } from '@educt/hooks/queries/lesson/useFetchLesson';
import LoadingPage from '@educt/components/LoadingPage';
import { MdCheckCircle, MdOutlineCircle, MdOutlineFilePresent, MdSkipNext, MdSkipPrevious } from 'react-icons/md';
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';
@ -39,28 +40,36 @@ import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCours
* 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 {
userStore: { me },
} = useRootStore();
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
*/
const isHasAccess = me?.courses?.some(course => course.id === lesson?.course_id) ?? true;
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);
/**
* Define next and prev lessons
@ -104,7 +113,7 @@ const LessonPage: React.FC<IPageProps> = () => {
<Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}>
<GridItem>
<Box>
<Box bg={lesson.color?.hex} minH={'500px'} />
<Box bg={lesson.color?.hex} h={{ base: '200px', sm: '350px', lg: '400px', xl: '500' }} />
</Box>
<Flex justifyContent={'flex-end'} mt='3'>
@ -133,19 +142,20 @@ const LessonPage: React.FC<IPageProps> = () => {
<Divider mt='4' />
</Box>
</GridItem>
<GridItem>
<GridItem minWidth={'250px'}>
<Box>
<Stack maxH={'500px'} overflowY={'scroll'} spacing={'0'}>
{lessons.map((lesson, i) => (
<LinkBox
ref={lesson.id === id ? currentLessonRef : undefined}
as='div'
display={'flex'}
key={lesson.id}
bg={lesson.id === id ? 'gray.50' : ''}
bg={lesson.id === id ? bg : ''}
p='4'
alignItems={'center'}
_hover={{
bg: 'gray.50',
bg,
}}
>
<Icon as={MdOutlineCircle} color='gray.500' w={6} h={6} mr='2' />
@ -169,7 +179,7 @@ const LessonPage: React.FC<IPageProps> = () => {
</Text>
<Stack>
{[1, 2, 3].map(n => (
<Flex key={n} alignItems={'center'} mt='5' p='3' bg='gray.50' borderRadius={'lg'}>
<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 />