Router refactoring

nothing9537 · Oct 23, 2023 · b79a1f0 · b79a1f0
1 parent 86dd421
commit b79a1f0
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 46 deletions.
diff --git a/src/app/providers/RouterProvider/config/routeConfig.tsx b/src/app/providers/RouterProvider/config/routeConfig.tsx
@@ -10,55 +10,65 @@ import { AdminPanelPage } from '@/pages/AdminPanelPage';
 import { ForbiddenPage } from '@/pages/ForbiddenPage';
 import { UserRole } from '@/entities/User';
 import { AppRouteProps } from '@/shared/types/router';
-import { RoutePath } from '@/shared/consts/router';
+import {
+  getRouteMain,
+  getRouteAbout,
+  getRouteProfile,
+  getRouteArticles,
+  getRouteArticleEdit,
+  getRouteArticleCreate,
+  getRouteAdminPanel,
+  getRouteArticleDetails,
+  getRouteForbidden,
+} from '@/shared/consts/router';
 
 export const routeConfig: AppRouteProps[] = [
   {
-    path: RoutePath.main,
+    path: getRouteMain(),
     element: <MainPage />,
   },
   {
-    path: RoutePath.about,
+    path: getRouteAbout(),
     element: <AboutPage />,
   },
   {
-    path: `${RoutePath.profile}:id`,
+    path: getRouteProfile(':id'),
     element: <ProfilePage />,
     authOnly: true,
   },
   {
-    path: RoutePath.articles,
+    path: getRouteArticles(),
     element: <ArticlesPage />,
     authOnly: true,
   },
   {
-    path: RoutePath.article_edit,
+    path: getRouteArticleEdit(':id'),
     element: <ArticleEditPage />,
     authOnly: true,
   },
   {
-    path: RoutePath.article_create,
+    path: getRouteArticleCreate(),
     element: <ArticleCreatePage />,
     authOnly: true,
   },
   {
-    path: RoutePath.admin_panel,
+    path: getRouteAdminPanel(),
     element: <AdminPanelPage />,
     authOnly: true,
     roles: [UserRole.ADMIN, UserRole.MANAGER],
   },
   {
-    path: RoutePath.forbidden,
+    path: getRouteForbidden(),
     element: <ForbiddenPage />,
     authOnly: true,
   },
   {
-    path: `${RoutePath.article_details}:id`,
+    path: getRouteArticleDetails(':id'),
     element: <ArticleDetailsPage />,
     authOnly: true,
   },
   {
-    path: RoutePath.not_found,
+    path: '*',
     element: <NotFoundPage />,
   },
 ];
diff --git a/src/app/providers/RouterProvider/ui/RequireAuth.tsx b/src/app/providers/RouterProvider/ui/RequireAuth.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User } from '@/entities/User';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteMain } from '@/shared/consts/router';
 
 interface RequireAuthProps {
   children: ReactNode;
@@ -13,7 +13,7 @@ export const RequireAuth = ({ children, authData }: RequireAuthProps) => {
 
   useEffect(() => {
     if (!authData) {
-      navigate(RoutePath.main);
+      navigate(getRouteMain());
     }
   }, [authData, navigate]);
 

diff --git a/src/app/providers/RouterProvider/ui/RequireRole.tsx b/src/app/providers/RouterProvider/ui/RequireRole.tsx
@@ -2,7 +2,7 @@
 import { ReactNode, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { User, UserRole } from '@/entities/User';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteForbidden } from '@/shared/consts/router';
 
 interface RequireRoleProps {
   roles: UserRole[];
@@ -23,7 +23,7 @@ export const RequireRole = ({ roles, authData, children }: RequireRoleProps) =>
     });
 
     if (!canVisit) {
-      navigate(RoutePath.forbidden);
+      navigate(getRouteForbidden());
     }
   }, [authData, navigate, roles]);
 

diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -1,5 +1,5 @@
 import { FC, memo } from 'react';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteProfile } from '@/shared/consts/router';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { AppLink } from '@/shared/ui/AppLink';
 import { Avatar, AvatarSize } from '@/shared/ui/Avatar';
@@ -38,7 +38,7 @@ export const CommentCard: FC<CommentCardProps> = memo(({ className, comment, isL
   return (
     <section className={classNames(cls.CommentCard, {}, [className])}>
       <div className={cls['with-timestamp']}>
-        <AppLink to={`${RoutePath.profile}${user.id}`}>
+        <AppLink to={getRouteProfile(user.id)}>
           <div className={cls['user-header']}>
             {user?.avatar
               ? <Avatar src={user?.avatar} alt="User Avatar" size={AvatarSize.NANO} borderRadius="50%" />

diff --git a/src/features/ArticlesList/ui/ArticlesListItem/ArticlesListItem.tsx b/src/features/ArticlesList/ui/ArticlesListItem/ArticlesListItem.tsx
@@ -1,7 +1,7 @@
 import { FC, HTMLAttributeAnchorTarget, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ViewsIcon } from '@/shared/assets/icons';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteArticleDetails, getRouteProfile } from '@/shared/consts/router';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { AppLink } from '@/shared/ui/AppLink';
 import { Avatar, AvatarSize } from '@/shared/ui/Avatar';
@@ -50,7 +50,7 @@ export const ArticlesListItem: FC<ArticlesListItemProps> = memo(({ className, ar
       <div className={classNames(cls.ArticlesListItem, {}, [className, cls[view]])}>
         <Card>
           <div className={cls.header}>
-            <AppLink to={`${RoutePath.profile}${article.user.id}`}>
+            <AppLink to={getRouteProfile(article.user.id)}>
               <div className={cls.avatar}>
                 <Avatar size={AvatarSize.NANO} alt="User Avatar" src={article.user.avatar} />
                 <Text text={article.user.username} />
@@ -66,7 +66,7 @@ export const ArticlesListItem: FC<ArticlesListItemProps> = memo(({ className, ar
           )}
           <div className={cls.footer}>
             <AppLink
-              to={`${RoutePath.articles}/${article.id}`}
+              to={getRouteArticleDetails(article.id)}
               target={target}
             >
               <Button onClick={onReadMoreClick}>
@@ -82,7 +82,7 @@ export const ArticlesListItem: FC<ArticlesListItemProps> = memo(({ className, ar
 
   return (
     <AppLink
-      to={`${RoutePath.articles}/${article.id}`}
+      to={getRouteArticleDetails(article.id)}
       target={target}
       className={classNames(cls.ArticlesListItem, {}, [className, cls[view]])}
     >

diff --git a/src/features/AvatarDropdown/ui/AvatarDropdown.tsx b/src/features/AvatarDropdown/ui/AvatarDropdown.tsx
@@ -1,6 +1,6 @@
 import { FC, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteAdminPanel, getRouteArticleCreate } from '@/shared/consts/router';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch';
 import { useAppSelector } from '@/shared/lib/hooks/useAppSelector';
 import { TranslationNamespacesKeys } from '@/shared/types';
@@ -42,10 +42,10 @@ export const AvatarDropdown: FC<AvatarDropdownProps> = memo(({ className, transl
       items={[
         ...(isAdminPanelAvailable ? [{
           label: t('admin-panel'),
-          href: RoutePath.admin_panel,
+          href: getRouteAdminPanel(),
         }] : []),
         { label: t('logout'), action: onLogoutHandler },
-        { label: t('create-article'), href: RoutePath.article_create },
+        { label: t('create-article'), href: getRouteArticleCreate() },
       ]}
     />
   );

diff --git a/src/pages/ArticleDetailsPage/ui/ArticleDetailsPageHeader/ArticleDetailsPageHeader.tsx b/src/pages/ArticleDetailsPage/ui/ArticleDetailsPageHeader/ArticleDetailsPageHeader.tsx
@@ -2,7 +2,7 @@ import { FC, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { getCanEditArticle } from '@/entities/Article';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteArticleEdit } from '@/shared/consts/router';
 import { useAppSelector } from '@/shared/lib/hooks/useAppSelector';
 import { AppLink } from '@/shared/ui/AppLink';
 import { Button } from '@/shared/ui/Button';
@@ -28,7 +28,7 @@ export const ArticleDetailsPageHeader: FC<ArticleDetailsPageHeaderProps> = memo(
         {t('return-back')}
       </Button>
       {canEdit && (
-        <AppLink to={`${RoutePath.articles}/${id}/edit`}>
+        <AppLink to={getRouteArticleEdit(id!)}>
           <Button>
             {t('can-edit')}
           </Button>

diff --git a/src/pages/ForbiddenPage/ui/ForbiddenPage/ForbiddenPage.tsx b/src/pages/ForbiddenPage/ui/ForbiddenPage/ForbiddenPage.tsx
@@ -5,7 +5,7 @@ import { VStack } from '@/shared/ui/Stack';
 import { Text, TextSize, TextTheme } from '@/shared/ui/Text';
 import { Button } from '@/shared/ui/Button';
 import { AppLink } from '@/shared/ui/AppLink';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteMain } from '@/shared/consts/router';
 
 interface ForbiddenPageProps {
   className?: string;
@@ -22,7 +22,7 @@ const ForbiddenPage: FC<ForbiddenPageProps> = () => {
           theme={TextTheme.ERROR}
           size={TextSize.L}
         />
-        <AppLink to={RoutePath.main}>
+        <AppLink to={getRouteMain()}>
           <Button>
             {t('return-to-main')}
           </Button>

diff --git a/src/shared/consts/router.ts b/src/shared/consts/router.ts
@@ -12,16 +12,12 @@ export enum AppRoutes {
   NOT_FOUND = 'not_found',
 }
 
-export const RoutePath: Record<AppRoutes, string> = {
-  [AppRoutes.MAIN]: '/',
-  [AppRoutes.ABOUT]: '/about',
-  [AppRoutes.PROFILE]: '/profile/', //! :id
-  [AppRoutes.ARTICLES]: '/articles',
-  [AppRoutes.ARTICLE_DETAILS]: '/articles/', //! :id
-  [AppRoutes.ARTICLE_CREATE]: '/articles/create',
-  [AppRoutes.ARTICLE_EDIT]: '/articles/:id/edit',
-  [AppRoutes.ADMIN_PANEL]: '/admin-panel',
-  [AppRoutes.FORBIDDEN_PAGE]: '/forbidden',
-  // * Not found page
-  [AppRoutes.NOT_FOUND]: '*',
-};
+export const getRouteMain = () => '/';
+export const getRouteAbout = () => '/about';
+export const getRouteProfile = (id: string) => `/profile/${id}`;
+export const getRouteArticles = () => '/articles';
+export const getRouteArticleDetails = (id: string) => `/articles/${id}`;
+export const getRouteArticleCreate = () => '/articles/create';
+export const getRouteArticleEdit = (id: string) => `/articles/${id}/edit`;
+export const getRouteAdminPanel = () => '/admin-panel';
+export const getRouteForbidden = () => '/forbidden';
diff --git a/src/widgets/Aside/model/selectors/getAsideItems/getAsideItems.ts b/src/widgets/Aside/model/selectors/getAsideItems/getAsideItems.ts
@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getUserAuthData } from '@/entities/User';
-import { RoutePath } from '@/shared/consts/router';
+import { getRouteAbout, getRouteArticles, getRouteMain, getRouteProfile } from '@/shared/consts/router';
 import { MainPageIcon, AboutPageIcon, ProfilePageIcon, ArticlesPageIcon } from '@/shared/assets/icons';
 import { AsideItemType } from '../../types/asideItems';
 
@@ -9,12 +9,12 @@ export const getAsideItems = createSelector(
   (userData) => {
     const asideItemsList: AsideItemType[] = [
       {
-        path: RoutePath.main,
+        path: getRouteMain(),
         Icon: MainPageIcon,
         text: 'main-link',
       },
       {
-        path: RoutePath.about,
+        path: getRouteAbout(),
         Icon: AboutPageIcon,
         text: 'about-link',
       },
@@ -23,13 +23,13 @@ export const getAsideItems = createSelector(
     if (userData) {
       asideItemsList.push(
         {
-          path: `${RoutePath.profile}${userData?.id}`,
+          path: getRouteProfile(userData.id),
           Icon: ProfilePageIcon,
           text: 'profile-link',
           authOnly: true,
         },
         {
-          path: RoutePath.articles,
+          path: getRouteArticles(),
           Icon: ArticlesPageIcon,
           text: 'articles-link',
           authOnly: true,