refactor: folder structure

src/App.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Router, Switch } from 'react-router-dom';
+import { UserRoleEnum } from 'enums';
+import { useRootStore } from 'hooks/useRootStore';
 
 /**
  * Components
  */
-import PrivateRoute from 'components/PrivateRoute/PrivateRoute';
+import PrivateRoute from 'components/PrivateRoute';
-import PublicRoute from 'components/PublicRoute/PublicRoute';
+import PublicRoute from 'components/PublicRoute';
 
 /**
  * Pages
@@ -17,13 +19,12 @@ import ProfilePage from 'pages/profile';
 import ControlPage from 'pages/control';
 import AuthPage from 'pages/auth';
 import NotFoundPage from 'pages/404';
-import { UserRoleEnum } from 'enums';
-import { useRootStore } from 'hooks/useRootStore';
 
 const App = () => {
   const {
     uiStore: { history },
   } = useRootStore();
+
   return (
     <Router history={history}>
       <Switch>

src/api.config.ts

@@ -0,0 +1,10 @@
+import { AxiosRequestConfig } from 'axios';
+import { API_BASE_URL } from './constants';
+
+const apiConfig: AxiosRequestConfig = {
+  baseURL: API_BASE_URL,
+  responseType: 'json',
+  withCredentials: true,
+};
+
+export default apiConfig;

src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -4,7 +4,7 @@ import { FaMoon, FaSun } from 'react-icons/fa';
 
 type ColorModeSwitcherProps = Omit<IconButtonProps, 'aria-label'>;
 
-export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = props => {
+const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = props => {
   const { toggleColorMode } = useColorMode();
   const text = useColorModeValue('dark', 'light');
   const SwitchIcon = useColorModeValue(FaMoon, FaSun);
@@ -23,3 +23,5 @@ export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = props => {
     />
   );
 };
+
+export default ColorModeSwitcher;

src/components/ColorModeSwitcher/index.ts

@@ -0,0 +1,3 @@
+import ColorModeSwitcher from './ColorModeSwitcher';
+
+export default ColorModeSwitcher;

src/components/Header/Header.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Flex, Box, useColorMode } from '@chakra-ui/react';
-import AppName from './AppName';
-import UserInfo from './User/UserInfo';
-import UserNotifications from './User/UserNotifications';
-import NavMobile from '../Nav/Mobile/Nav';
 import { observer } from 'mobx-react';
 import { useRootStore } from 'hooks/useRootStore';
+import { Flex, Box, useColorMode } from '@chakra-ui/react';
+import AppName from './AppName';
+import UserInfo from './UserInfo';
+import UserNotifications from './UserNotifications';
+import NavMobile from 'components/Nav/Mobile';
 
 const Header: React.FC = () => {
   const {

src/components/Header/UserInfo.tsx

@@ -17,7 +17,7 @@ import { MdSettings, MdExitToApp } from 'react-icons/md';
 import { observer } from 'mobx-react';
 import { useRootStore } from 'hooks/useRootStore';
 import { Link } from 'react-router-dom';
-import UserBadge from 'components/User/UserBadge';
+import UserBadge from 'components/UserBadge';
 import useLogoutQuery from 'hooks/useLogoutQuery';
 
 const UserInfo: React.FC = () => {

src/components/Header/index.ts

@@ -0,0 +1,3 @@
+import Header from './Header';
+
+export default Header;

src/components/Layout/Layout.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Flex, Box } from '@chakra-ui/react';
-import Header from 'components/Header/Header';
-import NavDesktop from 'components/Nav/Desktop/Nav';
 import { observer } from 'mobx-react';
-import { useRootStore } from 'hooks/useRootStore';
 import { useErrorHandler } from 'react-error-boundary';
-import { ColorModeSwitcher } from 'components/ColorModeSwitcher/ColorModeSwitcher';
+import { Flex, Box } from '@chakra-ui/react';
+import { useRootStore } from 'hooks/useRootStore';
+import Header from 'components/Header';
+import NavDesktop from 'components/Nav/Desktop';
+import ColorModeSwitcher from 'components/ColorModeSwitcher';
 
 /**
  *

src/components/Layout/index.ts

@@ -0,0 +1,3 @@
+import Layout from './Layout';
+
+export default Layout;

src/components/Loading/LoadingPage.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Skeleton } from '@chakra-ui/skeleton';
-import { Box } from '@chakra-ui/layout';
-
-const LoadingPage: React.FC = () => {
-  return (
-    <Box>
-      <Skeleton height='20px' width='200px' mb='10' borderRadius='md' />
-      <Skeleton height='43px' width='400px' borderRadius='md' />
-    </Box>
-  );
-};
-
-export default LoadingPage;

src/components/Nav/Desktop/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Flex, Box, useColorMode } from '@chakra-ui/react';
-import NavList from '../NavList';
-import { useRootStore } from 'hooks/useRootStore';
-import { observer } from 'mobx-react';
 import config from 'config';
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Flex, Box, useColorMode } from '@chakra-ui/react';
+import { useRootStore } from 'hooks/useRootStore';
+import NavList from '../NavList';
 
 /**
  *

src/components/Nav/NavLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 import { Box, useColorMode } from '@chakra-ui/react';
 import type { LinkType } from 'interfaces';
-import { observer } from 'mobx-react';
 import { useRootStore } from 'hooks/useRootStore';
 
 type NavLinkPropsType = {

src/components/Nav/NavList.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import { observer } from 'mobx-react';
-import NavLink from './NavLink';
+import { useHistory } from 'react-router-dom';
 import { useRootStore } from 'hooks/useRootStore';
 import { userHasRoles } from 'helpers';
 import { UserRoleEnum } from 'enums';
-import { useHistory } from 'react-router-dom';
 import { LinkType } from 'interfaces';
+import NavLink from './NavLink';
 
 type NavListPropsType = {
   links: LinkType[];

src/components/PrivateRoute/PrivateRoute.tsx

@@ -1,12 +1,12 @@
+import config from 'config';
 import React from 'react';
 import Helmet from 'react-helmet';
-import Layout from '../Layout/Layout';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Route, Redirect } from 'react-router-dom';
 import { IPrivateRouteProps } from 'interfaces';
 import { useRootStore } from 'hooks/useRootStore';
-import { ErrorBoundary } from 'react-error-boundary';
+import Layout from 'components/Layout';
-import ErrorFallback from '../ErrorFallback';
+import ErrorFallback from 'components/ErrorFallback';
-import config from 'config';
 
 /**
  * Checks if the user is loggedIn by reactive variable and if not,

src/components/PrivateRoute/index.ts

@@ -0,0 +1,3 @@
+import PrivateRoute from './PrivateRoute';
+
+export default PrivateRoute;

src/components/PublicRoute/PublicRoute.tsx

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

src/components/PublicRoute/index.ts

@@ -0,0 +1,3 @@
+import PublicRoute from './PublicRoute';
+
+export default PublicRoute;

src/components/UserBadge/index.ts

@@ -0,0 +1,3 @@
+import UserBadge from './UserBadge';
+
+export default UserBadge;

src/pages/auth/components/AuthForm/index.ts

@@ -0,0 +1,3 @@
+import AuthForm from './AuthForm';
+
+export default AuthForm;

src/pages/auth/index.tsx

@@ -6,7 +6,7 @@ import { IPageProps } from 'interfaces';
 import { Flex } from '@chakra-ui/react';
 import { useRootStore } from 'hooks/useRootStore';
 
-import AuthForm from 'components/Forms/Auth/AuthForm';
+import AuthForm from './components/AuthForm';
 
 /**
  * Auth page

src/pages/profile/components/LoadingPage/LoadingPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Skeleton, SkeletonCircle, Flex, Spinner } from '@chakra-ui/react';
 
-const LoadingProfilePage = () => {
+const LoadingPage = () => {
   return (
     <Box maxW='900px'>
       <Skeleton height='35px' width='250px' borderRadius='md' />
@@ -21,4 +21,4 @@ const LoadingProfilePage = () => {
   );
 };
 
-export default LoadingProfilePage;
+export default LoadingPage;

src/pages/profile/components/LoadingPage/index.ts

@@ -0,0 +1,3 @@
+import LoadingPage from './LoadingPage';
+
+export default LoadingPage;

src/pages/profile/components/UpdateUserContactsForm/index.ts

@@ -0,0 +1,3 @@
+import UpdateUserContactsForm from './UpdateUserContactsForm';
+
+export default UpdateUserContactsForm;

src/pages/profile/components/UserAccountInfo/index.ts

@@ -0,0 +1,3 @@
+import UserAccountInfo from './UserAccountInfo';
+
+export default UserAccountInfo;

src/pages/profile/index.tsx

@@ -17,10 +17,11 @@ import { IPageProps } from 'interfaces';
 import { useRootStore } from 'hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import UserBadge from 'components/User/UserBadge';
+import UserBadge from 'components/UserBadge';
-import LoadingProfilePage from 'components/Loading/LoadingProfilePage';
+
-import UserAccountInfo from 'components/User/UserAccountInfo';
+import LoadingPage from './components/LoadingPage';
-import UpdateUserContactsForm from 'components/Forms/User/UpdateUserContactsForm';
+import UserAccountInfo from './components/UserAccountInfo';
+import UpdateUserContactsForm from './components/UpdateUserContactsForm';
 
 /**
  * Profile page
@@ -37,7 +38,7 @@ const ProfilePage: React.FC<IPageProps> = ({ title }) => {
   });
 
   if (userStore.me === null) {
-    return <LoadingProfilePage />;
+    return <LoadingPage />;
   }
 
   return (

src/stores/RootStore.ts

@@ -1,5 +1,5 @@
+import apiConfig from 'api.config';
 import { makeAutoObservable } from 'mobx';
-import { API_BASE_URL } from '../constants';
 
 /**
  * Services
@@ -26,11 +26,7 @@ export default class RootStore {
     /**
      * Api service
      */
-    this.apiService = new ApiService(this, {
+    this.apiService = new ApiService(this, apiConfig);
-      baseURL: API_BASE_URL,
-      responseType: 'json',
-      withCredentials: true,
-    });
 
     /**
      * Stores