feat: setup create course page

src/App.tsx

@@ -22,6 +22,7 @@ import PublicRoute from '@educt/components/PublicRoute';
  */
 import AuthPage from '@educt/pages/auth/auth';
 import NotFoundPage from '@educt/pages/404/404';
+import CreateCoursePage from '@educt/pages/courses/create/create';
 const CoursesPage = React.lazy(() => import('@educt/pages/courses/courses'));
 const MainPage = React.lazy(() => import('@educt/pages/main/main'));
 const MessagesPage = React.lazy(() => import('@educt/pages/messages/messages'));
@@ -37,6 +38,12 @@ const App = () => {
     <Router history={history}>
       <Switch>
         <PrivateRoute exact path='/' component={MainPage} title='Home' />
+        <PrivateRoute
+          path='/courses/create'
+          component={CreateCoursePage}
+          title='Create new course'
+          roles={[UserRoleEnum.ADMIN, UserRoleEnum.TEACHER]}
+        />
         <PrivateRoute path='/courses' component={CoursesPage} title='Courses' />
         <PrivateRoute path='/messages' component={MessagesPage} title='Messages' />
         <PrivateRoute path='/profile' component={ProfilePage} title='Profile' />

src/config.ts

@@ -3,10 +3,16 @@ import { MdAccountCircle, MdCollectionsBookmark, MdGroup, MdHome, MdMessage } fr
 import { IAppConfig } from './interfaces';
 
 const config: IAppConfig = {
+  /**
+   * Some info about application
+   */
   metaData: {
     appName: 'Educt',
     appDescription: 'Learn management system',
   },
+  /**
+   * Links that are rendered in the navigation
+   */
   links: [
     { location: '/', title: 'Main', public: true, icon: MdHome },
     { location: '/courses', title: 'Courses', public: true, icon: MdCollectionsBookmark },

src/pages/courses/courses.tsx

@@ -21,6 +21,7 @@ import LoadingPage from '@educt/components/LoadingPage';
  */
 import { useRootStore } from '@educt/hooks/useRootStore';
 import { CoursesPageContextProvider } from '@educt/providers';
+import { useHistory, useLocation } from 'react-router';
 
 /**
  * Courses page
@@ -31,6 +32,7 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
     categoryStore,
     courseStore,
   } = useRootStore();
+  const history = useHistory();
 
   if (me === null) return <LoadingPage />;
 
@@ -43,7 +45,12 @@ const CoursesPage: React.FC<IPageProps> = ({ title }) => {
             <Text mt='2'>List of all available courses.</Text>
           </Box>
           {(me.isAdmin || me.isTeacher) && (
-            <Button variant='outline' colorScheme='blue' leftIcon={<AddIcon />}>
+            <Button
+              onClick={() => history.push('/courses/create')}
+              variant='outline'
+              colorScheme='blue'
+              leftIcon={<AddIcon />}
+            >
               Create new
             </Button>
           )}

src/pages/courses/create/create.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Heading, Text } from '@chakra-ui/react';
+
+/**
+ * Types
+ */
+import { IPageProps } from '@educt/interfaces';
+import { observer } from 'mobx-react-lite';
+
+/**
+ * Create course page
+ */
+const CreateCoursePage: React.FC<IPageProps> = ({ title }) => {
+  return (
+    <>
+      <Box>
+        <Box>
+          <Heading as='h1'>Create</Heading>
+          <Text mt='2'>Create new course in the system.</Text>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default CreateCoursePage;

src/pages/profile/profile.tsx

@@ -14,6 +14,7 @@ import LoadingPage from './components/LoadingPage';
 /**
  *  Containers
  */
+import MainContainer from './containers/MainContainer';
 import UpdatePasswordContainer from './containers/UpdatePasswordContainer';
 import UpdateEmailContainer from './containers/UpdateEmailContainer';
 import ConfirmEmailContainer from './containers/ConfirmEmailContainer';
@@ -33,7 +34,6 @@ import { ProfilePageContext } from '@educt/contexts';
  * Providers
  */
 import { ProfilePageContextProvider } from '@educt/providers';
-import MainContainer from './containers/MainContainer';
 
 /**
  * Profile page

src/stores/UIStore.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable, observable } from 'mobx';
+import { makeAutoObservable, observable, runInAction } from 'mobx';
 import { createBrowserHistory } from 'history';
 
 /**
@@ -39,8 +39,7 @@ export default class UIStore {
      * Pathname changed
      */
     this.history.listen(({ pathname }) => {
-      console.log(`[history]: pathname changed to "${pathname}"`);
-      this.location = pathname;
+      this.setLocation(pathname);
     });
 
     /**
@@ -50,6 +49,7 @@ export default class UIStore {
   }
 
   public setLocation(location: string): void {
+    console.log(`[history]: location changed to "${location}"`);
     this.location = location;
   }