From 42d065558d5f1ca3052d3991efa71cc57a4d96cb Mon Sep 17 00:00:00 2001
From: Chintan Mehta <mchintan24@gmail.com>
Date: Tue, 14 Nov 2023 15:45:50 +0000
Subject: [PATCH] dynamic route fallback

---
 .../src/pages/DiseasePage/DiseasePage.jsx     | 49 +++++++---------
 apps/platform/src/pages/DrugPage/DrugPage.jsx | 41 ++++++--------
 .../src/pages/TargetPage/TargetPage.jsx       | 56 ++++++++-----------
 3 files changed, 62 insertions(+), 84 deletions(-)

diff --git a/apps/platform/src/pages/DiseasePage/DiseasePage.jsx b/apps/platform/src/pages/DiseasePage/DiseasePage.jsx
index 01fa58b40..508ec8fbb 100644
--- a/apps/platform/src/pages/DiseasePage/DiseasePage.jsx
+++ b/apps/platform/src/pages/DiseasePage/DiseasePage.jsx
@@ -1,17 +1,17 @@
-import { Suspense, lazy } from 'react';
-import { useQuery } from '@apollo/client';
-import { Box, Tab, Tabs } from '@mui/material';
-import { Link, Route, Switch, useLocation, useParams } from 'react-router-dom';
-import { LoadingBackdrop, BasePage, NewChip, ScrollToTop } from 'ui';
+import { Suspense, lazy } from "react";
+import { useQuery } from "@apollo/client";
+import { Box, Tab, Tabs } from "@mui/material";
+import { Link, Redirect, Route, Switch, useLocation, useParams } from "react-router-dom";
+import { LoadingBackdrop, BasePage, NewChip, ScrollToTop } from "ui";
 
-import Header from './Header';
-import NotFoundPage from '../NotFoundPage';
+import Header from "./Header";
+import NotFoundPage from "../NotFoundPage";
 
-import DISEASE_PAGE_QUERY from './DiseasePage.gql';
+import DISEASE_PAGE_QUERY from "./DiseasePage.gql";
 
-const Profile = lazy(() => import('./Profile'));
-const Associations = lazy(() => import('./DiseaseAssociations'));
-const ClassicAssociations = lazy(() => import('./ClassicAssociations'));
+const Profile = lazy(() => import("./Profile"));
+const Associations = lazy(() => import("./DiseaseAssociations"));
+const ClassicAssociations = lazy(() => import("./ClassicAssociations"));
 
 function DiseasePage() {
   const location = useLocation();
@@ -29,12 +29,12 @@ function DiseasePage() {
   return (
     <BasePage
       title={
-        location.pathname.includes('associations')
+        location.pathname.includes("associations")
           ? `Targets associated with ${name}`
           : `${name} profile page`
       }
       description={
-        location.pathname.includes('associations')
+        location.pathname.includes("associations")
           ? `Ranked list of targets associated with ${name}`
           : `Annotation information for ${name}`
       }
@@ -45,17 +45,11 @@ function DiseasePage() {
       <Route
         path="/"
         render={history => (
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <Tabs
-              value={
-                history.location.pathname !== '/'
-                  ? history.location.pathname
-                  : false
-              }
-            >
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <Tabs value={history.location.pathname !== "/" ? history.location.pathname : false}>
               <Tab
                 label={
-                  <Box sx={{ textTransform: 'capitalize' }}>
+                  <Box sx={{ textTransform: "capitalize" }}>
                     <div>
                       Associated targets
                       <NewChip />
@@ -67,17 +61,13 @@ function DiseasePage() {
                 to={`/disease/${efoId}/associations`}
               />
               <Tab
-                label={
-                  <Box sx={{ textTransform: 'capitalize' }}>
-                    Associated targets
-                  </Box>
-                }
+                label={<Box sx={{ textTransform: "capitalize" }}>Associated targets</Box>}
                 value={`/disease/${efoId}/classic-associations`}
                 component={Link}
                 to={`/disease/${efoId}/classic-associations`}
               />
               <Tab
-                label={<Box sx={{ textTransform: 'capitalize' }}>Profile</Box>}
+                label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
                 value={`/disease/${efoId}`}
                 component={Link}
                 to={`/disease/${efoId}`}
@@ -97,6 +87,9 @@ function DiseasePage() {
           <Route path="/disease/:efoId/classic-associations">
             <ClassicAssociations efoId={efoId} name={name} />
           </Route>
+          <Route path="*">
+            <Redirect to={`/disease/${efoId}`} />
+          </Route>
         </Switch>
       </Suspense>
     </BasePage>
diff --git a/apps/platform/src/pages/DrugPage/DrugPage.jsx b/apps/platform/src/pages/DrugPage/DrugPage.jsx
index 47f70f182..a46d743a0 100644
--- a/apps/platform/src/pages/DrugPage/DrugPage.jsx
+++ b/apps/platform/src/pages/DrugPage/DrugPage.jsx
@@ -1,7 +1,7 @@
-import { lazy, Suspense } from 'react';
-import { useQuery } from '@apollo/client';
-import { BasePage, ScrollToTop, LoadingBackdrop } from 'ui';
-import { Box, Tabs, Tab } from '@mui/material';
+import { lazy, Suspense } from "react";
+import { useQuery } from "@apollo/client";
+import { BasePage, ScrollToTop, LoadingBackdrop } from "ui";
+import { Box, Tabs, Tab } from "@mui/material";
 import {
   useLocation,
   useParams,
@@ -9,13 +9,14 @@ import {
   Route,
   useRouteMatch,
   Link,
-} from 'react-router-dom';
+  Redirect,
+} from "react-router-dom";
 
-import Header from './Header';
-import NotFoundPage from '../NotFoundPage';
-import DRUG_PAGE_QUERY from './DrugPage.gql';
+import Header from "./Header";
+import NotFoundPage from "../NotFoundPage";
+import DRUG_PAGE_QUERY from "./DrugPage.gql";
 
-const Profile = lazy(() => import('./Profile'));
+const Profile = lazy(() => import("./Profile"));
 
 function DrugPage() {
   const location = useLocation();
@@ -38,27 +39,16 @@ function DrugPage() {
       description={`Annotation information for ${name || chemblId}`}
       location={location}
     >
-      <Header
-        loading={loading}
-        chemblId={chemblId}
-        name={name}
-        crossReferences={crossReferences}
-      />
+      <Header loading={loading} chemblId={chemblId} name={name} crossReferences={crossReferences} />
       <ScrollToTop />
 
       <Route
         path="/"
         render={history => (
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <Tabs
-              value={
-                history.location.pathname !== '/'
-                  ? history.location.pathname
-                  : false
-              }
-            >
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <Tabs value={history.location.pathname !== "/" ? history.location.pathname : false}>
               <Tab
-                label={<Box sx={{ textTransform: 'capitalize' }}>Profile</Box>}
+                label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
                 value={`/drug/${chemblId}`}
                 component={Link}
                 to={`/drug/${chemblId}`}
@@ -72,6 +62,9 @@ function DrugPage() {
           <Route exact path={path}>
             <Profile chemblId={chemblId} name={name} />
           </Route>
+          <Route path="*">
+            <Redirect to={`/drug/${chemblId}`} />
+          </Route>
         </Switch>
       </Suspense>
     </BasePage>
diff --git a/apps/platform/src/pages/TargetPage/TargetPage.jsx b/apps/platform/src/pages/TargetPage/TargetPage.jsx
index 218698912..7a574860d 100644
--- a/apps/platform/src/pages/TargetPage/TargetPage.jsx
+++ b/apps/platform/src/pages/TargetPage/TargetPage.jsx
@@ -1,6 +1,6 @@
-import { Suspense, lazy } from 'react';
-import { useQuery } from '@apollo/client';
-import { Box, Tab, Tabs } from '@mui/material';
+import { Suspense, lazy } from "react";
+import { useQuery } from "@apollo/client";
+import { Box, Tab, Tabs } from "@mui/material";
 import {
   Link,
   Route,
@@ -8,17 +8,18 @@ import {
   useLocation,
   useRouteMatch,
   useParams,
-} from 'react-router-dom';
-import { LoadingBackdrop, BasePage, ScrollToTop, NewChip } from 'ui';
+  Redirect,
+} from "react-router-dom";
+import { LoadingBackdrop, BasePage, ScrollToTop, NewChip } from "ui";
 
-import Header from './Header';
-import NotFoundPage from '../NotFoundPage';
-import { getUniprotIds } from '../../utils/global';
-import TARGET_PAGE_QUERY from './TargetPage.gql';
+import Header from "./Header";
+import NotFoundPage from "../NotFoundPage";
+import { getUniprotIds } from "../../utils/global";
+import TARGET_PAGE_QUERY from "./TargetPage.gql";
 
-const Profile = lazy(() => import('./Profile'));
-const Associations = lazy(() => import('./TargetAssociations'));
-const ClassicAssociations = lazy(() => import('./ClassicAssociations'));
+const Profile = lazy(() => import("./Profile"));
+const Associations = lazy(() => import("./TargetAssociations"));
+const ClassicAssociations = lazy(() => import("./ClassicAssociations"));
 
 function TargetPage() {
   const location = useLocation();
@@ -35,19 +36,17 @@ function TargetPage() {
 
   const { approvedSymbol: symbol, approvedName } = data?.target || {};
   const uniprotIds = loading ? null : getUniprotIds(data.target.proteinIds);
-  const crisprId = data?.target.dbXrefs.find(
-    p => p.source === 'ProjectScore'
-  )?.id;
+  const crisprId = data?.target.dbXrefs.find(p => p.source === "ProjectScore")?.id;
 
   return (
     <BasePage
       title={
-        location.pathname.includes('associations')
+        location.pathname.includes("associations")
           ? `Diseases associated with ${symbol}`
           : `${symbol} profile page`
       }
       description={
-        location.pathname.includes('associations')
+        location.pathname.includes("associations")
           ? `Ranked list of diseases and phenotypes associated with ${symbol}`
           : `Annotation information for ${symbol}`
       }
@@ -66,17 +65,11 @@ function TargetPage() {
       <Route
         path="/"
         render={history => (
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <Tabs
-              value={
-                history.location.pathname !== '/'
-                  ? history.location.pathname
-                  : false
-              }
-            >
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <Tabs value={history.location.pathname !== "/" ? history.location.pathname : false}>
               <Tab
                 label={
-                  <Box sx={{ textTransform: 'capitalize' }}>
+                  <Box sx={{ textTransform: "capitalize" }}>
                     <div>
                       Associated diseases
                       <NewChip />
@@ -88,17 +81,13 @@ function TargetPage() {
                 to={`/target/${ensgId}/associations`}
               />
               <Tab
-                label={
-                  <Box sx={{ textTransform: 'capitalize' }}>
-                    Associated diseases
-                  </Box>
-                }
+                label={<Box sx={{ textTransform: "capitalize" }}>Associated diseases</Box>}
                 value={`/target/${ensgId}/classic-associations`}
                 component={Link}
                 to={`/target/${ensgId}/classic-associations`}
               />
               <Tab
-                label={<Box sx={{ textTransform: 'capitalize' }}>Profile</Box>}
+                label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
                 value={`/target/${ensgId}`}
                 component={Link}
                 to={`/target/${ensgId}`}
@@ -118,6 +107,9 @@ function TargetPage() {
           <Route path={`${path}/classic-associations`}>
             <ClassicAssociations ensgId={ensgId} symbol={symbol} />
           </Route>
+          <Route path="*">
+            <Redirect to={`/target/${ensgId}`} />
+          </Route>
         </Switch>
       </Suspense>
     </BasePage>