fix: some fixed

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;
     }
   });

src/components/FileSelect/FileSelect.tsx

@@ -60,8 +60,8 @@ const FileSelect: React.FC<FileSelectPropsType> = ({ onChange, file, supportedFo
               </Text>
             </Text>
           ) : (
-            <Text fontWeight='normal' color='gray'>
+            <Text fontWeight='normal' color='gray.500'>
-              Choose a file...
+              Select new file
             </Text>
           )}
           {supportedFormats && (

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>
 );

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 />

src/hooks/queries/auth/useLogout.ts

@@ -13,10 +13,7 @@ import { SocketContext } from '@educt/contexts';
 type LogoutResultDataType = Record<string, never>;
 
 const useLogout = () => {
-  const {
+  const { authStore } = useRootStore();
-    authStore,
-    userStore: { me },
-  } = 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();
-        }
         window.localStorage.removeItem('sessionId');
+
+        socket.auth = { sessionId: undefined };
+        socket.emit('user:logout');
+        socket.disconnect();
       }
 
       return result.data;

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,6 +70,8 @@ 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>
+                <Box>
+                  {(me.isAdmin || me.isTeacher) && <EditButton onClick={handleEditCourse} mr='2' />}
                   <Button
                     isDisabled={!isCourseAvailable}
                     onClick={handleWatchCourse}
@@ -76,6 +81,7 @@ const CoursePage: React.FC<IPageProps> = () => {
                   >
                     Watch
                   </Button>
+                </Box>
               </Flex>
               <CourseBackgroundImage bg={course.color?.hex} src={course.image?.url} />
             </Box>

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>

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>
                 {(() => {

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) && (
+          {(me.isAdmin || me.isTeacher) && <EditButton onClick={handleEditLesson} />}
-            <Button onClick={handleEditLesson} leftIcon={<EditIcon />} variant={'outline'} size='sm'>
-              Edit
-            </Button>
-          )}
         </Flex>
       </PageHeading>
       <PageContent>

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} />