diff --git a/src/App/redirects/SubscriptionDetailsRedirect.tsx b/src/App/redirects/SubscriptionDetailsRedirect.tsx new file mode 100644 index 0000000..c804567 --- /dev/null +++ b/src/App/redirects/SubscriptionDetailsRedirect.tsx @@ -0,0 +1,34 @@ +import { + generatePath, + useNavigate, + useParams, +} from 'react-router-dom'; + +import routes from '#routes'; + +interface SubscriptionDetailsParams { + subscriptionId: string | undefined; + [key: string]: string | undefined; +} + +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const { subscriptionId } = useParams(); + const navigate = useNavigate(); + + const subscriptionDetailsLink = (subscriptionId) ? ({ + pathname: (generatePath( + routes.subscriptionDetail.absolutePath, + { subscriptionId }, + )), + }) + : routes.pageNotFound.path; + + if (subscriptionDetailsLink) { + navigate(subscriptionDetailsLink); + } + + return null; +} + +Component.displayName = 'SubscriptionDetailsRedirect'; diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx index 5514fd1..44a5f81 100644 --- a/src/App/routes/index.tsx +++ b/src/App/routes/index.tsx @@ -72,6 +72,20 @@ const subscriptionDetail = customWrapRoute({ }, }); +const subscriptionDetailRedirect = customWrapRoute({ + parent: rootLayout, + path: 'permalink/subscription-detail/:subscriptionId', + component: { + render: () => import('../redirects/SubscriptionDetailsRedirect'), + props: {}, + }, + wrapperComponent: Auth, + context: { + title: 'Subscription Details', + visibility: 'is-authenticated', + }, +}); + const homeIndex = customWrapRoute({ parent: homeLayout, index: true, @@ -192,7 +206,7 @@ const alertDetailRedirect = customWrapRoute({ parent: rootLayout, path: 'permalink/alert-detail/:alertId', component: { - render: () => import('../redirects/AlertDetailsRedirect.tsx'), + render: () => import('../redirects/AlertDetailsRedirect'), props: {}, }, wrapperComponent: Auth, @@ -316,7 +330,7 @@ const resetPasswordRedirect = customWrapRoute({ parent: rootLayout, path: 'permalink/user-password-reset/:userId/:resetToken', component: { - render: () => import('../redirects/RecoverAccountRedirect.tsx'), + render: () => import('../redirects/RecoverAccountRedirect'), props: {}, }, wrapperComponent: Auth, @@ -409,6 +423,7 @@ const wrappedRoutes = { alertDetailRedirect, unsubscribeRedirect, unsubscribe, + subscriptionDetailRedirect, }; export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));