refactor: imports

src/App.tsx

@@ -4,18 +4,18 @@ import { BrowserRouter as Router, Switch } from 'react-router-dom';
 /**
  * Components
  */
-import PrivateRoute from './components/PrivateRoute/PrivateRoute';
+import PrivateRoute from 'components/PrivateRoute/PrivateRoute';
-import PublicRoute from './components/PublicRoute/PublicRoute';
+import PublicRoute from 'components/PublicRoute/PublicRoute';
 
 /**
  * Pages
  */
-import MainPage from './pages/main';
+import MainPage from 'pages/main';
-import CoursesPage from './pages/courses';
+import CoursesPage from 'pages/courses';
-import MessagesPage from './pages/messages';
+import MessagesPage from 'pages/messages';
-import ProfilePage from './pages/profile';
+import ProfilePage from 'pages/profile';
-import AuthPage from './pages/auth';
+import AuthPage from 'pages/auth';
-import NotFoundPage from './pages/404';
+import NotFoundPage from 'pages/404';
 
 const App = () => {
   return (

src/components/Auth/AuthForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MdAccountCircle, MdVpnKey } from 'react-icons/md';
 import { FormControl, FormLabel, InputGroup, Input, InputLeftElement, Button, Icon, useToast } from '@chakra-ui/react';
-import { useRootStore } from '../../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import { SubmitHandler, useForm } from 'react-hook-form';

src/components/Header/AppName.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Flex, Box, Text, Heading } from '@chakra-ui/react';
 import { MdSchool } from 'react-icons/md';
-import config from '../../config';
+import config from 'config';
 
 const AppName: React.FC = () => {
   return (

src/components/Header/Header.tsx

@@ -3,7 +3,7 @@ import { Flex, Box } from '@chakra-ui/react';
 import AppName from './AppName';
 import UserInfo from './User/UserInfo';
 import UserNotifications from './User/UserNotifications';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
+import useWindowDimensions from 'hooks/useWindowDimensions';
 import NavMobile from '../Nav/Mobile/Nav';
 
 const Header: React.FC = () => {

src/components/Header/User/UserBadge.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@chakra-ui/react';
 import React from 'react';
-import { UserRoleEnum } from '../../../enums';
+import { UserRoleEnum } from 'enums';
-import { IUserRole } from '../../../interfaces';
+import { IUserRole } from 'interfaces';
 
 /**
  * Returns the badge for user based on roles

src/components/Header/User/UserInfo.tsx

@@ -16,9 +16,9 @@ import {
 } from '@chakra-ui/react';
 import { MdSettings, MdExitToApp } from 'react-icons/md';
 import { observer } from 'mobx-react';
-import { useRootStore } from '../../../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { useHistory, Link } from 'react-router-dom';
-import UserBadge from './UserBadge';
+import UserBadge from 'components/Header/User/UserBadge';
 
 const UserInfo: React.FC = () => {
   const { authStore, userStore } = useRootStore();
@@ -36,7 +36,7 @@ const UserInfo: React.FC = () => {
   };
 
   if (userStore.me === null) {
-    return <Skeleton width='180px' borderRadius='md' />;
+    return <Skeleton width='260px' borderRadius='md' />;
   }
 
   return (

src/components/Layout/Layout.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { Flex, Box } from '@chakra-ui/react';
-import Header from '../Header/Header';
+import Header from 'components/Header/Header';
-import NavDesktop from '../Nav/Desktop/Nav';
+import NavDesktop from 'components/Nav/Desktop/Nav';
 import { observer } from 'mobx-react';
-import { useRootStore } from '../../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
-import { ColorModeSwitcher } from '../ColorModeSwitcher/ColorModeSwitcher';
+import { ColorModeSwitcher } from 'components/ColorModeSwitcher/ColorModeSwitcher';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 /**
  *
@@ -14,22 +13,17 @@ import useWindowDimensions from '../../hooks/useWindowDimensions';
  * Сomponent for rendering the current page.
  */
 const Layout: React.FC = ({ children }) => {
-  const { isDesktop } = useWindowDimensions();
+  const { userStore } = useRootStore();
-  const { authStore, userStore } = useRootStore();
   const handleError = useErrorHandler();
 
   React.useEffect(() => {
-    if (authStore.isLoggedIn) {
+    userStore.loadCurrentUserData().catch(error => handleError(error));
-      userStore.loadCurrentUserData().catch(error => {
+  }, [handleError, userStore]);
-        handleError(error);
-      });
-    }
-  });
 
   return (
     <>
       <Header />
-      {isDesktop && <NavDesktop />}
+      <NavDesktop />
       <Flex minH='100vh' flexDirection='column'>
         <Box
           pl='80'

src/components/Nav/Desktop/Nav.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import NavLink from './NavLink';
-import config from '../../../config';
+import config from 'config';
 import { Flex, Box } from '@chakra-ui/react';
+import useWindowDimensions from 'hooks/useWindowDimensions';
 
 /**
  *
@@ -9,24 +10,29 @@ import { Flex, Box } from '@chakra-ui/react';
  * Component for navigating the application.
  */
 const Nav: React.FC = () => {
-  return (
+  const { isDesktop } = useWindowDimensions();
-    <Box display='block' position='fixed' left={0} right={0} top={0} width='100%' height='100%' maxW='18rem'>
+
-      <Box top='4rem' position='relative' overflowY='auto' borderRightWidth={1}>
+  if (isDesktop) {
-        <Flex
+    return (
-          as='nav'
+      <Box display='block' position='fixed' left={0} right={0} top={0} width='100%' height='100%' maxW='18rem'>
-          flexDirection='column'
+        <Box top='4rem' position='relative' overflowY='auto' borderRightWidth={1}>
-          alignItems='flex-start'
+          <Flex
-          textDecoration='none'
+            as='nav'
-          height='calc(100vh - 4rem)'
+            flexDirection='column'
-          padding='5'
+            alignItems='flex-start'
-        >
+            textDecoration='none'
-          {config.links.map((link, i) => (
+            height='calc(100vh - 4rem)'
-            <NavLink link={link} key={i} />
+            padding='5'
-          ))}
+          >
-        </Flex>
+            {config.links.map((link, i) => (
+              <NavLink link={link} key={i} />
+            ))}
+          </Flex>
+        </Box>
       </Box>
-    </Box>
+    );
-  );
+  }
+  return null;
 };
 
 export default Nav;

src/components/Nav/Desktop/NavLink.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, useColorMode } from '@chakra-ui/react';
-import type { LinkType } from '../../../interfaces';
+import type { LinkType } from 'interfaces';
 import { useHistory } from 'react-router-dom';
 
 type ActiveLinkState = {

src/components/Nav/Mobile/Nav.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+import { observer } from 'mobx-react';
+import config from 'config';
+import { Link } from 'react-router-dom';
+import { useRootStore } from 'hooks/useRootStore';
+
 import { Avatar } from '@chakra-ui/avatar';
 import { Flex, Box, Text } from '@chakra-ui/layout';
 import { Drawer, DrawerOverlay, DrawerContent, DrawerBody } from '@chakra-ui/modal';
 import { HamburgerIcon } from '@chakra-ui/icons';
 import { useDisclosure, IconButton, useColorMode, Skeleton } from '@chakra-ui/react';
-import config from '../../../config';
 import NavLink from '../Desktop/NavLink';
-import { useRootStore } from '../../../hooks/useRootStore';
-import { Link } from 'react-router-dom';
-import { observer } from 'mobx-react';
 
 const NavMobile: React.FC = () => {
   const { userStore } = useRootStore();

src/components/PrivateRoute/PrivateRoute.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import Layout from '../Layout/Layout';
+import Layout from 'components/Layout/Layout';
 import { Route, Redirect } from 'react-router-dom';
-import { IPrivateRouteProps } from '../../interfaces';
+import { IPrivateRouteProps } from 'interfaces';
-import { useRootStore } from '../../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { observer } from 'mobx-react';
 import { ErrorBoundary } from 'react-error-boundary';
 import ErrorFallback from '../ErrorFallback';

src/components/PublicRoute/PublicRoute.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Route } from 'react-router-dom';
-import { IPublicRouteProps } from '../../interfaces';
+import { IPublicRouteProps } from 'interfaces';
 import ErrorFallback from '../ErrorFallback';
 
 /**

src/hooks/useWindowDimensions.ts

@@ -10,12 +10,16 @@ const useWindowDimensions = () => {
     /**
      * Update state on resize
      */
-    const handleResize = () => setWindowDimensions({ width: window.innerWidth, height: window.innerHeight });
+    const handleResize = () => {
+      setWindowDimensions({ width: window.innerWidth, height: window.innerHeight });
+    };
 
     window.addEventListener('resize', handleResize);
 
-    return () => window.removeEventListener('resize', handleResize);
+    return () => {
-  });
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   return {
     windowDimensions,

src/pages/auth.tsx

@@ -3,10 +3,10 @@ import Helmet from 'react-helmet';
 import React from 'react';
 import { Flex, Box } from '@chakra-ui/react';
 import { MdSchool } from 'react-icons/md';
-import { IPageProps } from '../interfaces';
+import { IPageProps } from 'interfaces';
 
-import AuthForm from '../components/Auth/AuthForm';
+import AuthForm from 'components/Auth/AuthForm';
-import { useRootStore } from '../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { Redirect } from 'react-router-dom';
 
 /**

src/pages/courses.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
 
-import { IPageProps } from '../interfaces';
+import { IPageProps } from 'interfaces';
-import { useRootStore } from '../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 
 /**

src/pages/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
 
-import { IPageProps } from '../interfaces';
+import { IPageProps } from 'interfaces';
 import { observer } from 'mobx-react';
 
 /**

src/pages/messages.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
 
-import { IPageProps } from '../interfaces';
+import { IPageProps } from 'interfaces';
-import { useRootStore } from '../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 
 /**

src/pages/profile.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { Box, Heading, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Grid } from '@chakra-ui/react';
 
-import { IPageProps } from '../interfaces';
+import { IPageProps } from 'interfaces';
-import { useRootStore } from '../hooks/useRootStore';
+import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 
 /**

src/providers/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { StoreContext } from '../contexts';
+import { StoreContext } from 'contexts';
-import RootStore from '../stores/RootStore';
+import RootStore from 'stores/RootStore';
 
 /**
  * Root store provider

src/services/ApiService.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
 import Cookies from 'js-cookie';
-import RootStore from '../stores/RootStore';
+import RootStore from 'stores/RootStore';
 
 export default class ApiService {
   public root: RootStore;

src/services/AuthService.ts

@@ -1,4 +1,4 @@
-import { IDataResult, ILoginResult } from '../interfaces';
+import { IDataResult, ILoginResult } from 'interfaces';
 import { AxiosInstance, AxiosResponse } from 'axios';
 
 export default class AuthService {

src/services/UserService.ts

@@ -1,5 +1,5 @@
 import { AxiosInstance } from 'axios';
-import { IUserResult } from '../interfaces';
+import { IUserResult } from 'interfaces';
 
 export default class UserService {
   public api: AxiosInstance;

src/stores/AuthStore.ts

@@ -1,9 +1,9 @@
 import { makeAutoObservable } from 'mobx';
 import Cookies from 'js-cookie';
 import RootStore from './RootStore';
-import AuthService from '../services/AuthService';
+import AuthService from 'services/AuthService';
 import { AxiosInstance } from 'axios';
-import { IDataResult, ILoginResult } from '../interfaces';
+import { IDataResult, ILoginResult } from 'interfaces';
 
 export default class AuthStore {
   public root: RootStore;

src/stores/RootStore.ts

@@ -1,9 +1,16 @@
-import { API_BASE_URL } from '../constants';
-import AuthStore from './AuthStore';
-
-import ApiService from '../services/ApiService';
-import UserStore from './UserStore';
 import { makeAutoObservable } from 'mobx';
+import { API_BASE_URL } from '../constants';
+
+/**
+ * Services
+ */
+import ApiService from 'services/ApiService';
+
+/**
+ * Stores
+ */
+import AuthStore from './AuthStore';
+import UserStore from './UserStore';
 
 export default class RootStore {
   public authStore: AuthStore;

src/stores/UserStore.ts

@@ -1,7 +1,8 @@
 import { AxiosInstance } from 'axios';
 import { makeAutoObservable, runInAction } from 'mobx';
-import { IUserResult, IUserRole } from '../interfaces';
+import { IUserResult, IUserRole } from 'interfaces';
-import UserService from '../services/UserService';
+
+import UserService from 'services/UserService';
 import RootStore from './RootStore';
 
 export interface IUser {

tsconfig.json

@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +17,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
+  "include": ["src"]
-    "src"
-  ]
 }