Skip to content

Commit

Permalink
[Platform]: Dynamic route fallback (#289)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinmehta
chinmehta authored Nov 16, 2023
1 parent 56669f7 commit 25cacc1
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 84 deletions.
49 changes: 21 additions & 28 deletions apps/platform/src/pages/DiseasePage/DiseasePage.jsx
View file
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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}`
}
Expand All @@ -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 />
Expand All @@ -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}`}
Expand All @@ -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>
Expand Down
41 changes: 17 additions & 24 deletions apps/platform/src/pages/DrugPage/DrugPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
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,
Switch,
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();
Expand All @@ -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}`}
Expand All @@ -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>
Expand Down
56 changes: 24 additions & 32 deletions apps/platform/src/pages/TargetPage/TargetPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
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,
Switch,
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();
Expand All @@ -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}`
}
Expand All @@ -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 />
Expand All @@ -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}`}
Expand All @@ -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>
Expand Down

0 comments on commit 25cacc1

Please sign in to comment.