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 moment from 'moment';
import { Link as ReactRouterLink, useHistory } from 'react-router-dom'; import { Link as ReactRouterLink, useHistory } from 'react-router-dom';
import { import {
@ -16,6 +16,7 @@ import {
Icon, Icon,
IconButton, IconButton,
useToast, useToast,
useColorModeValue,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
/** /**
@ -30,7 +31,7 @@ import { Redirect, useParams } from 'react-router-dom';
import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements'; import { PageContent, PageHeading, PageWrapper } from '@educt/components/PageElements';
import { useFetchLesson } from '@educt/hooks/queries/lesson/useFetchLesson'; import { useFetchLesson } from '@educt/hooks/queries/lesson/useFetchLesson';
import LoadingPage from '@educt/components/LoadingPage'; 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 { useRootStore } from '@educt/hooks/useRootStore';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCourseLessons'; import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCourseLessons';
@ -39,28 +40,36 @@ import { useFetchCourseLessons } from '@educt/hooks/queries/course/useFetchCours
* Lesson Page * Lesson Page
*/ */
const LessonPage: React.FC<IPageProps> = () => { const LessonPage: React.FC<IPageProps> = () => {
const {
userStore: { me },
} = useRootStore();
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const { error, data: lesson, isLoading } = useFetchLesson(id); const { error, data: lesson, isLoading } = useFetchLesson(id);
const { fetchCourseLessons, data: lessons } = useFetchCourseLessons(); const { fetchCourseLessons, data: lessons } = useFetchCourseLessons();
const toast = useToast(); const toast = useToast();
const history = useHistory(); const history = useHistory();
const {
userStore: { me },
} = useRootStore();
const [nextLesson, setNextLesson] = useState<ILesson | null>(null); const [nextLesson, setNextLesson] = useState<ILesson | null>(null);
const [prevLesson, setPrevLesson] = useState<ILesson | null>(null); const [prevLesson, setPrevLesson] = useState<ILesson | null>(null);
const [isPageAvailable, setIsPageAvailable] = useState<boolean>(true); const [isPageAvailable, setIsPageAvailable] = useState<boolean>(true);
const currentLessonRef = useRef<HTMLDivElement | null>(null);
const bg = useColorModeValue('gray.50', 'gray.700');
useEffect(() => { useEffect(() => {
/** /**
* Сheck if the user has access to the lesson * С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) { if (!isHasAccess) {
toast({ title: 'You are not able to view this lesson.', status: 'warning' }); toast({ title: 'You are not able to view this lesson.', status: 'warning' });
setIsPageAvailable(false); setIsPageAvailable(false);
} }
}, []);
useEffect(() => {
currentLessonRef.current?.scrollIntoView({ block: 'center' });
window.scrollTo(0, 0);
/** /**
* Define next and prev lessons * Define next and prev lessons
@ -104,7 +113,7 @@ const LessonPage: React.FC<IPageProps> = () => {
<Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}> <Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}>
<GridItem> <GridItem>
<Box> <Box>
<Box bg={lesson.color?.hex} minH={'500px'} /> <Box bg={lesson.color?.hex} h={{ base: '200px', sm: '350px', lg: '400px', xl: '500' }} />
</Box> </Box>
<Flex justifyContent={'flex-end'} mt='3'> <Flex justifyContent={'flex-end'} mt='3'>
@ -133,19 +142,20 @@ const LessonPage: React.FC<IPageProps> = () => {
<Divider mt='4' /> <Divider mt='4' />
</Box> </Box>
</GridItem> </GridItem>
<GridItem> <GridItem minWidth={'250px'}>
<Box> <Box>
<Stack maxH={'500px'} overflowY={'scroll'} spacing={'0'}> <Stack maxH={'500px'} overflowY={'scroll'} spacing={'0'}>
{lessons.map((lesson, i) => ( {lessons.map((lesson, i) => (
<LinkBox <LinkBox
ref={lesson.id === id ? currentLessonRef : undefined}
as='div' as='div'
display={'flex'} display={'flex'}
key={lesson.id} key={lesson.id}
bg={lesson.id === id ? 'gray.50' : ''} bg={lesson.id === id ? bg : ''}
p='4' p='4'
alignItems={'center'} alignItems={'center'}
_hover={{ _hover={{
bg: 'gray.50', bg,
}} }}
> >
<Icon as={MdOutlineCircle} color='gray.500' w={6} h={6} mr='2' /> <Icon as={MdOutlineCircle} color='gray.500' w={6} h={6} mr='2' />
@ -169,7 +179,7 @@ const LessonPage: React.FC<IPageProps> = () => {
</Text> </Text>
<Stack> <Stack>
{[1, 2, 3].map(n => ( {[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} /> <Icon as={MdOutlineFilePresent} mr='2' h={4} w={4} />
<Text fontSize={'sm'} fontWeight={'medium'} lineHeight={'1rem'}> <Text fontSize={'sm'} fontWeight={'medium'} lineHeight={'1rem'}>
lesson-1_sourse-code.zip <br /> lesson-1_sourse-code.zip <br />