From b79a1f039e82c429b6ecaaa1a105831c070bb595 Mon Sep 17 00:00:00 2001 From: Nothingg Date: Mon, 23 Oct 2023 14:34:22 -0500 Subject: [PATCH] Router refactoring --- .../RouterProvider/config/routeConfig.tsx | 32 ++++++++++++------- .../RouterProvider/ui/RequireAuth.tsx | 4 +-- .../RouterProvider/ui/RequireRole.tsx | 4 +-- .../Comment/ui/CommentCard/CommentCard.tsx | 4 +-- .../ui/ArticlesListItem/ArticlesListItem.tsx | 8 ++--- .../AvatarDropdown/ui/AvatarDropdown.tsx | 6 ++-- .../ArticleDetailsPageHeader.tsx | 4 +-- .../ui/ForbiddenPage/ForbiddenPage.tsx | 4 +-- src/shared/consts/router.ts | 22 ++++++------- .../selectors/getAsideItems/getAsideItems.ts | 10 +++--- 10 files changed, 52 insertions(+), 46 deletions(-) diff --git a/src/app/providers/RouterProvider/config/routeConfig.tsx b/src/app/providers/RouterProvider/config/routeConfig.tsx index 9b6b1ce..e45a985 100644 --- 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: , }, { - path: RoutePath.about, + path: getRouteAbout(), element: , }, { - path: `${RoutePath.profile}:id`, + path: getRouteProfile(':id'), element: , authOnly: true, }, { - path: RoutePath.articles, + path: getRouteArticles(), element: , authOnly: true, }, { - path: RoutePath.article_edit, + path: getRouteArticleEdit(':id'), element: , authOnly: true, }, { - path: RoutePath.article_create, + path: getRouteArticleCreate(), element: , authOnly: true, }, { - path: RoutePath.admin_panel, + path: getRouteAdminPanel(), element: , authOnly: true, roles: [UserRole.ADMIN, UserRole.MANAGER], }, { - path: RoutePath.forbidden, + path: getRouteForbidden(), element: , authOnly: true, }, { - path: `${RoutePath.article_details}:id`, + path: getRouteArticleDetails(':id'), element: , authOnly: true, }, { - path: RoutePath.not_found, + path: '*', element: , }, ]; diff --git a/src/app/providers/RouterProvider/ui/RequireAuth.tsx b/src/app/providers/RouterProvider/ui/RequireAuth.tsx index dc5aa41..54113ec 100644 --- 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 index de8d2ce..bbee44e 100644 --- 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 index 2a1934a..ad0146f 100644 --- 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 = memo(({ className, comment, isL return (
- +
{user?.avatar ? diff --git a/src/features/ArticlesList/ui/ArticlesListItem/ArticlesListItem.tsx b/src/features/ArticlesList/ui/ArticlesListItem/ArticlesListItem.tsx index aee06c1..3a4586a 100644 --- 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 = memo(({ className, ar
- +
@@ -66,7 +66,7 @@ export const ArticlesListItem: FC = memo(({ className, ar )}
{canEdit && ( - + diff --git a/src/pages/ForbiddenPage/ui/ForbiddenPage/ForbiddenPage.tsx b/src/pages/ForbiddenPage/ui/ForbiddenPage/ForbiddenPage.tsx index bb247d4..274b0c7 100644 --- 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 = () => { theme={TextTheme.ERROR} size={TextSize.L} /> - + diff --git a/src/shared/consts/router.ts b/src/shared/consts/router.ts index 131db59..7ddf105 100644 --- 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.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 index 9185ba6..bd262fa 100644 --- 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,