refactor: providers

.husky/pre-commit

@@ -3,4 +3,4 @@
 
 export FORCE_COLOR=1
 
-yarn concurrently "yarn eslint" "yarn tslint" "lint-staged" --raw
+yarn concurrently "yarn eslint --fix" "yarn tslint" "lint-staged" --raw

src/app/App.tsx

@@ -9,7 +9,7 @@ import ru from 'date-fns/locale/ru';
 import { useIsMobile } from '~/shared/hooks';
 
 import { ApiProvider } from './providers/api';
-import { Routing } from './providers/router';
+import { RouterProvider } from './providers/router';
 import { desktopTheme, mobileTheme } from './providers/theme';
 
 const queryClient = new QueryClient();
@@ -31,7 +31,7 @@ function App() {
     >
       <ApiProvider>
         <QueryClientProvider client={queryClient}>
-          <Routing />
+          <RouterProvider />
           <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </ApiProvider>

src/app/providers/api/ApiProvider.tsx

@@ -1,4 +1,5 @@
-import { ApiContext, api } from '~/shared/contexts';
+import { api } from '~/shared/api';
+import { ApiContext } from '~/shared/contexts';
 
 export function ApiProvider({ children }: { children: React.ReactNode }) {
   return <ApiContext.Provider value={api}>{children}</ApiContext.Provider>;

src/app/providers/auth/index.ts

@@ -0,0 +1 @@
+export * from './AuthProvider';

src/app/providers/layout/Layout.tsx → src/app/providers/router/Layout.tsx

@@ -1,15 +1,33 @@
 import { Box, Container, Flex, Stack } from '@chakra-ui/react';
 import { useEffect, useRef } from 'react';
-import { ScrollRestoration, useLocation } from 'react-router-dom';
+import {
+  ScrollRestoration,
+  useLocation,
+  Routes as ReactRoutes,
+  Route,
+} from 'react-router-dom';
 
 import { MenuBase, MenuDesktop } from '~/widgets/menu';
 
 import { LayoutContext } from '~/shared/contexts';
 import { useIsMobile, useWindowSizes } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
-import { AuthProvider } from './AuthProvider';
-import { Routes } from './Routes';
+import { AuthProvider } from '../auth';
+
+import { OnboardingMiddleware } from './middlewares/onboarding';
+import { routerPaths } from './router.paths';
+
+const routes = (
+  <ReactRoutes>
+    {routerPaths.map(({ Component, path }) =>
+      OnboardingMiddleware(
+        path,
+        <Route key={path} path={path} element={<Component />} />,
+      ),
+    )}
+  </ReactRoutes>
+);
 
 export const Layout = () => {
   const isMobile = useIsMobile();
@@ -34,9 +52,7 @@ export const Layout = () => {
         <AuthProvider>
           {isMobile ? (
             <Stack gap={0} minH="full">
-              <Flex flex="1">
-                <Routes />
-              </Flex>
+              <Flex flex="1">{routes}</Flex>
               <Box position="sticky" bottom="0" bg="bg">
                 <Box ref={footerRef}></Box>
                 {!isDialogPage && !isOnboardingPage && <MenuBase />}
@@ -55,7 +71,7 @@ export const Layout = () => {
                 display="flex"
                 flexDirection="column"
               >
-                <Routes />
+                {routes}
               </Container>
             </Flex>
           )}

src/app/providers/router/Router.tsx

@@ -0,0 +1,39 @@
+import {
+  RouterProvider as ReactRouterProvider,
+  createBrowserRouter,
+} from 'react-router-dom';
+
+import { BlankPage } from '~/pages/blank';
+
+import { api } from '~/shared/api';
+
+import { Layout } from './Layout';
+
+const closedRouter = createBrowserRouter([
+  {
+    path: '*',
+    element: <BlankPage />,
+  },
+]);
+
+const normalRouter = createBrowserRouter([
+  {
+    path: '*',
+    element: <Layout />,
+    loader: async () => {
+      try {
+        return api.userApi.isAuth();
+      } catch (e) {
+        return null;
+      }
+    },
+  },
+]);
+
+export const RouterProvider = () => {
+  return (
+    <ReactRouterProvider
+      router={import.meta.env.VITE_CLOSED ? closedRouter : normalRouter}
+    />
+  );
+};

src/app/providers/router/index.ts

@@ -1 +1 @@
-export { Routing } from './router';
+export * from './Router';

src/app/providers/router/config.tsx → src/app/providers/router/router.paths.ts

@@ -24,7 +24,7 @@ import {
 
 import { PATHS } from '~/shared/lib/router';
 
-export const normalRoutes = [
+export const routerPaths = [
   {
     path: '*',
     Component: Navigate.bind(null, {

src/app/providers/router/router.tsx

@@ -1,10 +1,13 @@
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import {
+  RouterProvider as ReactRouterProvider,
+  createBrowserRouter,
+} from 'react-router-dom';
 
 import { BlankPage } from '~/pages/blank';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
-import { Layout } from '../layout/Layout';
+import { Layout } from './Layout';
 
 const closedRouter = createBrowserRouter([
   {
@@ -27,10 +30,10 @@ const normalRouter = createBrowserRouter([
   },
 ]);
 
-const Routing = () => {
+export const RouterProvider = () => {
   return (
-    <RouterProvider router={import.meta.env.VITE_CLOSED ? closedRouter : normalRouter} />
+    <ReactRouterProvider
+      router={import.meta.env.VITE_CLOSED ? closedRouter : normalRouter}
+    />
   );
 };
-
-export { Routing };

src/entities/notification/api/useGetNotification.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetNotification = (notificationId: string) =>
   useQuery({

src/entities/project/api/useGetAllProjects.tsx

@@ -1,6 +1,6 @@
 import { QueryFunctionContext, QueryKey, useInfiniteQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetAllProjects = (userId: string) =>
   useInfiniteQuery({

src/entities/project/api/useGetParticipants.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { GetAllParticipantsRequest } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useGetParticipants = (data: GetAllParticipantsRequest) =>
   useQuery({

src/entities/project/api/useGetPositions.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetPositions = (projectId: string) =>
   useQuery({

src/entities/project/api/useGetPositionsSkills.tsx

@@ -1,7 +1,7 @@
 import { useQueries } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { GetProjectPositionsDataResponse } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useGetPositionsSkills = (
   projectId: string,

src/entities/project/api/useGetProject.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetProject = (projectId: string) =>
   useQuery({

src/entities/project/api/useGetProjectAvatar.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetProjectAvatar = (projectId: string) =>
   useQuery({

src/entities/project/api/useGetUser.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetUser = (userID: string) =>
   useQuery({

src/entities/storage/api/useGetAllSkills.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetAllSkills = () =>
   useQuery({

src/entities/storage/api/useGetSkills.tsx

@@ -1,6 +1,6 @@
 import { useQueries } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetSkills = (projectPositions?: string[][]) =>
   useQueries({

src/entities/storage/api/useGetSkillsbyIds.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetSkillsByIds = (skills?: string[]) =>
   useQuery({

src/entities/storage/api/useGetSpecs.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetSpecs = () =>
   useQuery({

src/entities/user/api/useGetAvatar.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetAvatar = (id: string) =>
   useQuery({

src/entities/user/api/useGetProfile.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetProfile = (id: string) =>
   useQuery({

src/entities/user/api/useGetSkills.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useUserSkills = (id: string) =>
   useQuery({

src/entities/user/api/useGetStatistic.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useUserStatistic = (id: string) =>
   useQuery({

src/entities/user/api/useIsAvatarExist.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useIsAvatarExist = (id: string) =>
   useQuery({

src/features/notifications/api/useReadNotification.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useReadNotification = (notificationId: string) => {
   const queryClient = useQueryClient();

src/features/notifications/api/useUnreadNotifications.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { api } from '~/shared/contexts';
+import { api } from '~/shared/api';
 
 export const useGetUnreadNotification = (isAuth: boolean) =>
   useQuery({

src/features/project/add/api/useAddAvatar.tsx

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { UpdateProjectAvatarRequest } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useAddAvatar = () =>
   useMutation({

src/features/project/add/api/useAddPosition.tsx

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { CreatePositionRequest } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useAddPosition = () =>
   useMutation({

src/features/project/add/api/useAddProject.tsx

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { NewProjectRequest } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useAddProject = () =>
   useMutation({

src/features/project/add/api/useAddSkills.tsx

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { AddSkillsRequest, UpdateSkillsParams } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useAddSkills = () =>
   useMutation({

src/features/project/add/api/useCreateParticipant.tsx

@@ -1,7 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { api } from '~/shared/api';
 import { CreateParticipantRequest } from '~/shared/api/model';
-import { api } from '~/shared/contexts';
 
 export const useCreateParticipant = () =>
   useMutation({