fix: some fixed

2026-10-11 10:19:22 +03:00 · 2022-01-31 20:11:11 +03:00 · 2022-01-31 20:11:11 +03:00 · 8fb9a2f787
commit 8fb9a2f787
parent 47e16e06de
10 changed files with 51 additions and 35 deletions
--- 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;
    }
  });
--- a/src/components/FileSelect/FileSelect.tsx
+++ b/src/components/FileSelect/FileSelect.tsx
@ -60,8 +60,8 @@ const FileSelect: React.FC<FileSelectPropsType> = ({ onChange, file, supportedFo
              </Text>
            </Text>
          ) : (
-            <Text fontWeight='normal' color='gray'>
-              Choose a file...
+            <Text fontWeight='normal' color='gray.500'>
+              Select new file
            </Text>
          )}
          {supportedFormats && (
--- 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 }) => (
-  <Flex alignItems={'center'} justifyContent={'space-between'} p='3' bg={'gray.50'} borderRadius={'lg'}>
+  <Flex
+    alignItems={'center'}
+    justifyContent={'space-between'}
+    p='3'
+    bg={useColorModeValue('gray.50', 'gray.700')}
+    borderRadius={'lg'}
+  >
    {children}
  </Flex>
 );
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@ -60,6 +60,13 @@ const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
    }
  }, [socket]);

+  /**
+   * Emit online status of user
+   */
+  useEffect(() => {
+    socket?.emit('user:status');
+  }, []);
+
  return (
    <>
      <Header />
--- 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<string, never>;

 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;
--- 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<IPageProps> = () => {
  const {
@ -46,6 +47,8 @@ const CoursePage: React.FC<IPageProps> = () => {

  const handleWatchCourse = () => history.push(`/lesson/${course.lessons[0].id}`);

+  const handleEditCourse = () => history.push(`/courses/edit/${course.id}`);
+
  return (
    <PageWrapper maxW='1200px'>
      <Helmet>
@ -67,15 +70,18 @@ const CoursePage: React.FC<IPageProps> = () => {
            <Box>
              <Flex justifyContent={'space-between'} alignItems={'center'} mb='2'>
                <Text fontSize={'sm'}>Last update: {new Date(course.updated_at).toLocaleDateString()}</Text>
-                <Button
-                  isDisabled={!isCourseAvailable}
-                  onClick={handleWatchCourse}
-                  leftIcon={<MdPlayCircleOutline />}
-                  size='sm'
-                  variant={'outline'}
-                >
-                  Watch
-                </Button>
+                <Box>
+                  {(me.isAdmin || me.isTeacher) && <EditButton onClick={handleEditCourse} mr='2' />}
+                  <Button
+                    isDisabled={!isCourseAvailable}
+                    onClick={handleWatchCourse}
+                    leftIcon={<MdPlayCircleOutline />}
+                    size='sm'
+                    variant={'outline'}
+                  >
+                    Watch
+                  </Button>
+                </Box>
              </Flex>
              <CourseBackgroundImage bg={course.color?.hex} src={course.image?.url} />
            </Box>
--- 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<FlexProps> = props => (
  <Flex justifyContent='space-between' flexDir={{ base: 'column', xl: 'row' }} {...props}>
@ -62,7 +63,10 @@ export const CourseHeading: React.FC<ICourseHeadingProps> = props => {
        {title}
      </Heading>
      <Flex mt='3' alignItems={'center'}>
-        <Text fontSize='sm'>{teacher.fullname}</Text>&nbsp;&bull;&nbsp;
+        <Text fontSize='sm'>
+          {teacher.fullname}
+          &nbsp;&bull;&nbsp;
+        </Text>
        <Tag size='sm' variant='solid' bg={category.color?.hex}>
          {category.title}
        </Tag>
--- a/src/pages/courses/components/CourseList/CourseItem.tsx
+++ b/src/pages/courses/components/CourseList/CourseItem.tsx
@ -40,6 +40,8 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ 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<CourseItemPropsType> = ({ course, onDelete, onSetStat
                _active={{ backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.200' }}
              />
              <MenuList>
-                <MenuItem onClick={() => history.push(`/courses/edit/${course.id}`)} icon={<EditIcon />}>
+                <MenuItem onClick={handleEditCourse} icon={<EditIcon />}>
                  Edit
                </MenuItem>
                {(() => {
--- 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<IPageProps> = () => {
      <PageHeading heading={lesson.title}>
        <Flex mt='3' alignItems={'center'} justifyContent={'space-between'}>
          <Text fontSize={'sm'}>~{moment.duration(lesson.duration, 'minutes').humanize()}</Text>
-          {(me.isAdmin || me.isTeacher) && (
-            <Button onClick={handleEditLesson} leftIcon={<EditIcon />} variant={'outline'} size='sm'>
-              Edit
-            </Button>
-          )}
+          {(me.isAdmin || me.isTeacher) && <EditButton onClick={handleEditLesson} />}
        </Flex>
      </PageHeading>
      <PageContent>
--- a/src/pages/main/main.tsx
+++ b/src/pages/main/main.tsx
@ -41,7 +41,7 @@ const MainPage: React.FC<IPageProps> = () => {
   */
  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<IPageProps> = () => {
            <StatContent>
              <StatNumber>
                <Link as={ReactRouterLink} to='/messages'>
-                  1
+                  0
                </Link>
              </StatNumber>
              <StatIcon icon={MdOutlineMessage} />