From 8fb9a2f78781f032e900dd55ffe9b416b6318f76 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Mon, 31 Jan 2022 20:11:11 +0300 Subject: [PATCH] fix: some fixed --- src/App.tsx | 2 +- src/components/FileSelect/FileSelect.tsx | 4 ++-- .../FilesUploader/FilesUploader.tsx | 10 ++++++-- src/components/Layout/Layout.tsx | 7 ++++++ src/hooks/queries/auth/useLogout.ts | 17 +++++-------- src/pages/course/course.tsx | 24 ++++++++++++------- src/pages/course/index.tsx | 6 ++++- .../components/CourseList/CourseItem.tsx | 4 +++- src/pages/lesson/lesson.tsx | 8 ++----- src/pages/main/main.tsx | 4 ++-- 10 files changed, 51 insertions(+), 35 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ca529cf..443851c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,11 +25,11 @@ const App = () => { useSocketEvent('disconnect', () => console.info('[WebSocket]: Disconnected.')); useSocketEvent('connect_error', err => console.error(err)); useSocketEvent('user:session', data => { - console.log(data); if (socket) { const { sessionId, userId } = data; socket.auth = { sessionId }; window.localStorage.setItem('sessionId', sessionId); + // TODO fix types socket.userId = userId; } }); diff --git a/src/components/FileSelect/FileSelect.tsx b/src/components/FileSelect/FileSelect.tsx index 8e8eb88..21f69c2 100644 --- a/src/components/FileSelect/FileSelect.tsx +++ b/src/components/FileSelect/FileSelect.tsx @@ -60,8 +60,8 @@ const FileSelect: React.FC = ({ onChange, file, supportedFo ) : ( - - Choose a file... + + Select new file )} {supportedFormats && ( diff --git a/src/components/FilesUploader/FilesUploader.tsx b/src/components/FilesUploader/FilesUploader.tsx index 6999b23..54967aa 100644 --- a/src/components/FilesUploader/FilesUploader.tsx +++ b/src/components/FilesUploader/FilesUploader.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import * as helpers from '@educt/helpers'; -import { Stack, Flex, Box, Icon, Text, Input, IconButton, Button } from '@chakra-ui/react'; +import { Stack, Flex, Box, Icon, Text, Input, IconButton, Button, useColorModeValue } from '@chakra-ui/react'; import { MdAttachFile, MdOutlineFilePresent } from 'react-icons/md'; import { CloseIcon } from '@chakra-ui/icons'; @@ -31,7 +31,13 @@ const FileContent: React.FC<{ name: string; size: number }> = ({ name, size }) = ); const FileWrapper: React.FC = ({ children }) => ( - + {children} ); diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 355dcad..4c8172d 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -60,6 +60,13 @@ const Layout: React.FC = ({ children, roles }) => { } }, [socket]); + /** + * Emit online status of user + */ + useEffect(() => { + socket?.emit('user:status'); + }, []); + return ( <>
diff --git a/src/hooks/queries/auth/useLogout.ts b/src/hooks/queries/auth/useLogout.ts index 3d763d4..3d1008b 100644 --- a/src/hooks/queries/auth/useLogout.ts +++ b/src/hooks/queries/auth/useLogout.ts @@ -13,10 +13,7 @@ import { SocketContext } from '@educt/contexts'; type LogoutResultDataType = Record; const useLogout = () => { - const { - authStore, - userStore: { me }, - } = useRootStore(); + const { authStore } = useRootStore(); const { socket } = useContext(SocketContext); const history = useHistory(); const toast = useToast(); @@ -24,7 +21,6 @@ const useLogout = () => { const logout = async () => { try { - const sessionId = window.localStorage.getItem('sessionId'); const result = await authStore.logout(); history.push('/auth'); @@ -33,13 +29,12 @@ const useLogout = () => { /** * Destroy session */ - if (sessionId) { - if (socket) { - socket.auth = { sessionId: undefined }; - // socket.emit('user:logout', { sessionId }); - socket.disconnect(); - } + if (socket) { window.localStorage.removeItem('sessionId'); + + socket.auth = { sessionId: undefined }; + socket.emit('user:logout'); + socket.disconnect(); } return result.data; diff --git a/src/pages/course/course.tsx b/src/pages/course/course.tsx index 2bab4df..3888fb2 100644 --- a/src/pages/course/course.tsx +++ b/src/pages/course/course.tsx @@ -25,6 +25,7 @@ import { useHistory, useParams } from 'react-router-dom'; import { useFetchCourse } from '@educt/hooks/queries'; import { useRootStore } from '@educt/hooks/useRootStore'; import { Helmet } from 'react-helmet'; +import { EditButton } from '@educt/components/Buttons'; const CoursePage: React.FC = () => { const { @@ -46,6 +47,8 @@ const CoursePage: React.FC = () => { const handleWatchCourse = () => history.push(`/lesson/${course.lessons[0].id}`); + const handleEditCourse = () => history.push(`/courses/edit/${course.id}`); + return ( @@ -67,15 +70,18 @@ const CoursePage: React.FC = () => { Last update: {new Date(course.updated_at).toLocaleDateString()} - + + {(me.isAdmin || me.isTeacher) && } + + diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index 8f9b3f0..b43ce25 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -41,6 +41,7 @@ import { useState } from 'react'; import { useColorModeValue } from '@chakra-ui/react'; import { useRootStore } from '@educt/hooks/useRootStore'; import { CourseServiceInstance } from '@educt/services'; +import { EditButton } from '@educt/components/Buttons'; export const CourseHeader: React.FC = props => ( @@ -62,7 +63,10 @@ export const CourseHeading: React.FC = props => { {title} - {teacher.fullname} •  + + {teacher.fullname} +  •  + {category.title} diff --git a/src/pages/courses/components/CourseList/CourseItem.tsx b/src/pages/courses/components/CourseList/CourseItem.tsx index ec7cddd..a422e7f 100644 --- a/src/pages/courses/components/CourseList/CourseItem.tsx +++ b/src/pages/courses/components/CourseList/CourseItem.tsx @@ -40,6 +40,8 @@ const CourseItem: React.FC = ({ course, onDelete, onSetStat const { colorMode } = useColorMode(); const history = useHistory(); + const handleEditCourse = () => history.push(`/courses/edit/${course.id}`); + if (me === null) return null; return ( @@ -58,7 +60,7 @@ const CourseItem: React.FC = ({ course, onDelete, onSetStat _active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }} /> - history.push(`/courses/edit/${course.id}`)} icon={}> + }> Edit {(() => { diff --git a/src/pages/lesson/lesson.tsx b/src/pages/lesson/lesson.tsx index adec301..3eb9ee9 100644 --- a/src/pages/lesson/lesson.tsx +++ b/src/pages/lesson/lesson.tsx @@ -23,7 +23,6 @@ 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 @@ -45,6 +44,7 @@ import { useFetchLessonProgress } from '@educt/hooks/queries/lesson/useFetchLess * Services */ import { LessonServiceInstance } from '@educt/services'; +import { EditButton } from '@educt/components/Buttons'; /** * Lesson Page @@ -145,11 +145,7 @@ const LessonPage: React.FC = () => { ~{moment.duration(lesson.duration, 'minutes').humanize()} - {(me.isAdmin || me.isTeacher) && ( - - )} + {(me.isAdmin || me.isTeacher) && } diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index bedec1c..70700e8 100644 --- a/src/pages/main/main.tsx +++ b/src/pages/main/main.tsx @@ -41,7 +41,7 @@ const MainPage: React.FC = () => { */ useSocketEvent('user:online', online => setOnline(online)); - useSocketEvent('user:connected', user => console.table(user)); + // useSocketEvent('user:connected', user => console.table(user)); useEffect(() => { if (stat) { @@ -69,7 +69,7 @@ const MainPage: React.FC = () => { - 1 + 0