diff --git a/src/App.tsx b/src/App.tsx index 9ded0b1..3f411c0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,18 +4,18 @@ import { BrowserRouter as Router, Switch } from 'react-router-dom'; /** * Components */ -import PrivateRoute from './components/PrivateRoute/PrivateRoute'; -import PublicRoute from './components/PublicRoute/PublicRoute'; +import PrivateRoute from 'components/PrivateRoute/PrivateRoute'; +import PublicRoute from 'components/PublicRoute/PublicRoute'; /** * Pages */ -import MainPage from './pages/main'; -import CoursesPage from './pages/courses'; -import MessagesPage from './pages/messages'; -import ProfilePage from './pages/profile'; -import AuthPage from './pages/auth'; -import NotFoundPage from './pages/404'; +import MainPage from 'pages/main'; +import CoursesPage from 'pages/courses'; +import MessagesPage from 'pages/messages'; +import ProfilePage from 'pages/profile'; +import AuthPage from 'pages/auth'; +import NotFoundPage from 'pages/404'; const App = () => { return ( diff --git a/src/components/Auth/AuthForm.tsx b/src/components/Auth/AuthForm.tsx index b110abb..e1fa620 100644 --- a/src/components/Auth/AuthForm.tsx +++ b/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'; diff --git a/src/components/Header/AppName.tsx b/src/components/Header/AppName.tsx index b4bf84e..3dbd51f 100644 --- a/src/components/Header/AppName.tsx +++ b/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 ( diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index da9fbfe..b7b8267 100644 --- a/src/components/Header/Header.tsx +++ b/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 = () => { diff --git a/src/components/Header/User/UserBadge.tsx b/src/components/Header/User/UserBadge.tsx index 7f1a340..5848790 100644 --- a/src/components/Header/User/UserBadge.tsx +++ b/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 { IUserRole } from '../../../interfaces'; +import { UserRoleEnum } from 'enums'; +import { IUserRole } from 'interfaces'; /** * Returns the badge for user based on roles diff --git a/src/components/Header/User/UserInfo.tsx b/src/components/Header/User/UserInfo.tsx index 0f598df..d76adff 100644 --- a/src/components/Header/User/UserInfo.tsx +++ b/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 ; + return ; } return ( diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index b82619e..01f8e1b 100644 --- a/src/components/Layout/Layout.tsx +++ b/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 NavDesktop from '../Nav/Desktop/Nav'; +import Header from 'components/Header/Header'; +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 useWindowDimensions from '../../hooks/useWindowDimensions'; +import { ColorModeSwitcher } from 'components/ColorModeSwitcher/ColorModeSwitcher'; /** * @@ -14,22 +13,17 @@ import useWindowDimensions from '../../hooks/useWindowDimensions'; * Сomponent for rendering the current page. */ const Layout: React.FC = ({ children }) => { - const { isDesktop } = useWindowDimensions(); - const { authStore, userStore } = useRootStore(); + const { userStore } = useRootStore(); const handleError = useErrorHandler(); React.useEffect(() => { - if (authStore.isLoggedIn) { - userStore.loadCurrentUserData().catch(error => { - handleError(error); - }); - } - }); + userStore.loadCurrentUserData().catch(error => handleError(error)); + }, [handleError, userStore]); return ( <>
- {isDesktop && } + { - return ( - - - - {config.links.map((link, i) => ( - - ))} - + const { isDesktop } = useWindowDimensions(); + + if (isDesktop) { + return ( + + + + {config.links.map((link, i) => ( + + ))} + + - - ); + ); + } + return null; }; export default Nav; diff --git a/src/components/Nav/Desktop/NavLink.tsx b/src/components/Nav/Desktop/NavLink.tsx index 7af7ddb..cab5ceb 100644 --- a/src/components/Nav/Desktop/NavLink.tsx +++ b/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 = { diff --git a/src/components/Nav/Mobile/Nav.tsx b/src/components/Nav/Mobile/Nav.tsx index 3f45bc8..46b1ecb 100644 --- a/src/components/Nav/Mobile/Nav.tsx +++ b/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(); diff --git a/src/components/PrivateRoute/PrivateRoute.tsx b/src/components/PrivateRoute/PrivateRoute.tsx index f719d8b..b7ed0a1 100644 --- a/src/components/PrivateRoute/PrivateRoute.tsx +++ b/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 { useRootStore } from '../../hooks/useRootStore'; +import { IPrivateRouteProps } from 'interfaces'; +import { useRootStore } from 'hooks/useRootStore'; import { observer } from 'mobx-react'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from '../ErrorFallback'; diff --git a/src/components/PublicRoute/PublicRoute.tsx b/src/components/PublicRoute/PublicRoute.tsx index 1459a7d..38c1815 100644 --- a/src/components/PublicRoute/PublicRoute.tsx +++ b/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'; /** diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts index e52e813..f20b16b 100644 --- a/src/hooks/useWindowDimensions.ts +++ b/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, diff --git a/src/pages/auth.tsx b/src/pages/auth.tsx index 648aa1e..cb96b88 100644 --- a/src/pages/auth.tsx +++ b/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 { useRootStore } from '../hooks/useRootStore'; +import AuthForm from 'components/Auth/AuthForm'; +import { useRootStore } from 'hooks/useRootStore'; import { Redirect } from 'react-router-dom'; /** diff --git a/src/pages/courses.tsx b/src/pages/courses.tsx index faa4663..0b669d2 100644 --- a/src/pages/courses.tsx +++ b/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 { useRootStore } from '../hooks/useRootStore'; +import { IPageProps } from 'interfaces'; +import { useRootStore } from 'hooks/useRootStore'; import { useHistory } from 'react-router-dom'; /** diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 006fd78..9591d63 100644 --- a/src/pages/main.tsx +++ b/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'; /** diff --git a/src/pages/messages.tsx b/src/pages/messages.tsx index 21b39df..ac14eef 100644 --- a/src/pages/messages.tsx +++ b/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 { useRootStore } from '../hooks/useRootStore'; +import { IPageProps } from 'interfaces'; +import { useRootStore } from 'hooks/useRootStore'; import { useHistory } from 'react-router-dom'; /** diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 30a6cb3..66426eb 100644 --- a/src/pages/profile.tsx +++ b/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 { useRootStore } from '../hooks/useRootStore'; +import { IPageProps } from 'interfaces'; +import { useRootStore } from 'hooks/useRootStore'; import { useHistory } from 'react-router-dom'; /** diff --git a/src/providers/index.tsx b/src/providers/index.tsx index 5adb72a..40d47bd 100644 --- a/src/providers/index.tsx +++ b/src/providers/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react'; -import { StoreContext } from '../contexts'; -import RootStore from '../stores/RootStore'; +import { StoreContext } from 'contexts'; +import RootStore from 'stores/RootStore'; /** * Root store provider diff --git a/src/services/ApiService.ts b/src/services/ApiService.ts index f170d1e..aa16b1b 100644 --- a/src/services/ApiService.ts +++ b/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; diff --git a/src/services/AuthService.ts b/src/services/AuthService.ts index 270f0f6..66e0793 100644 --- a/src/services/AuthService.ts +++ b/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 { diff --git a/src/services/UserService.ts b/src/services/UserService.ts index c86eb3e..04d3f87 100644 --- a/src/services/UserService.ts +++ b/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; diff --git a/src/stores/AuthStore.ts b/src/stores/AuthStore.ts index ec5c071..b356b5d 100644 --- a/src/stores/AuthStore.ts +++ b/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; diff --git a/src/stores/RootStore.ts b/src/stores/RootStore.ts index 26c9433..f04d74d 100644 --- a/src/stores/RootStore.ts +++ b/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; diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts index ab9eadf..a33e511 100644 --- a/src/stores/UserStore.ts +++ b/src/stores/UserStore.ts @@ -1,7 +1,8 @@ import { AxiosInstance } from 'axios'; import { makeAutoObservable, runInAction } from 'mobx'; -import { IUserResult, IUserRole } from '../interfaces'; -import UserService from '../services/UserService'; +import { IUserResult, IUserRole } from 'interfaces'; + +import UserService from 'services/UserService'; import RootStore from './RootStore'; export interface IUser { diff --git a/tsconfig.json b/tsconfig.json index 7b1d3c6..126ba43 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,8 @@ { "compilerOptions": { + "baseUrl": "src", "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +17,5 @@ "noEmit": true, "jsx": "react" }, - "include": [ - "src" - ] + "include": ["src"] }