refactor: update version and homepage work

opentargets · Nov 30, 2024 · 0818fe8 · 0818fe8
1 parent c37bf2a
commit 0818fe8
Show file tree

Hide file tree

Showing 21 changed files with 126 additions and 157 deletions.
diff --git a/apps/platform/.env b/apps/platform/.env
@@ -1,3 +1,3 @@
-VITE_API_URL=https://api.partner-platform.dev.opentargets.xyz/api/v4/graphql
+VITE_API_URL=https://api.platform.dev.opentargets.xyz/api/v4/graphql
 VITE_AI_API_URL=https://dev-ai-api-w37vlfsidq-ew.a.run.app
 VITE_PROFILE=default
diff --git a/apps/platform/package.json b/apps/platform/package.json
@@ -34,7 +34,7 @@
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.0.0",
-    "react-router-dom": "5.1.2",
+    "react-router-dom": "6.28.0",
     "react-tsparticles": "^2.0.6",
     "sections": "*",
     "smiles-drawer": "^1.1.22",

diff --git a/apps/platform/src/App.tsx b/apps/platform/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { ApolloProvider } from "@apollo/client";
 import { ThemeProvider, SearchProvider, PrivateRoute, ConfigurationProvider } from "ui";
 
@@ -33,49 +33,28 @@ function App(): ReactElement {
             searchPlaceholder="Search for a target, drug, disease, or phenotype..."
           >
             <Router>
-              <Switch>
-                <Route exact path="/">
-                  <HomePage suggestions={suggestions} />
-                </Route>
-                <Route path="/search">
-                  <SearchPage />
-                </Route>
-                <Route path="/downloads">
-                  <DownloadsPage />
-                </Route>
-                <Route path="/disease/:efoId">
-                  <DiseasePage />
-                </Route>
-                <Route path="/target/:ensgId">
-                  <TargetPage />
-                </Route>
-                <Route path="/drug/:chemblId">
-                  <DrugPage />
-                </Route>
-                <Route path="/evidence/:ensgId/:efoId">
-                  <EvidencePage />
-                </Route>
-                <Route path="/variant/:varId">
-                  <VariantPage />
-                </Route>
-                <Route path="/study/:studyId">
-                  <StudyPage />
-                </Route>
-                <Route path="/credible-set/:studyLocusId">
-                  <CredibleSetPage />
-                </Route>
-                <Route path="/api">
-                  <APIPage />
-                </Route>
-                <Route path="/projects">
-                  <PrivateRoute>
-                    <ProjectsPage />
-                  </PrivateRoute>
-                </Route>
-                <Route>
-                  <NotFoundPage />
-                </Route>
-              </Switch>
+              <Routes>
+                <Route path="/" element={<HomePage suggestions={suggestions} />} />
+                <Route path="/search" element={<SearchPage />} />
+                <Route path="/downloads" element={<DownloadsPage />} />
+                <Route path="/disease/:efoId" element={<DiseasePage />} />
+                <Route path="/target/:ensgId" element={<TargetPage />} />
+                <Route path="/drug/:chemblId" element={<DrugPage />} />
+                <Route path="/evidence/:ensgId/:efoId" element={<EvidencePage />} />
+                <Route path="/variant/:varId" element={<VariantPage />} />
+                <Route path="/study/:studyId" element={<StudyPage />} />
+                <Route path="/credible-set/:studyLocusId" element={<CredibleSetPage />} />
+                <Route path="/api" element={<APIPage />} />
+                <Route
+                  path="/projects"
+                  element={
+                    <PrivateRoute>
+                      <ProjectsPage />
+                    </PrivateRoute>
+                  }
+                />
+                {/* <Route path="*" element={<NotFoundPage />} /> */}
+              </Routes>
             </Router>
           </SearchProvider>
         </ThemeProvider>

diff --git a/apps/platform/src/components/AssociationsToolkit/components/Table/CellName.jsx b/apps/platform/src/components/AssociationsToolkit/components/Table/CellName.jsx
@@ -21,7 +21,7 @@ import {
   faBezierCurve,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import useAotfContext from "../../hooks/useAotfContext";
 import { ENTITIES, isPartnerPreview, TABLE_PREFIX } from "../../utils";
 import { grey } from "@mui/material/colors";
@@ -85,7 +85,7 @@ const ContextMenuContainer = styled("div", {
 }));
 
 function CellName({ cell, colorScale }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const contextMenuRef = useRef();
   const { entityToGet, pinnedEntries, setPinnedEntries, id: currentEntityId } = useAotfContext();
   const { loading, prefix } = cell.table.getState();
@@ -180,15 +180,15 @@ function CellName({ cell, colorScale }) {
   };
 
   const handleNavigateToProfile = () => {
-    history.push(profileURL);
+    navigate(profileURL);
   };
 
   const handleNavigateToAssociations = () => {
-    history.push(associationsURL);
+    navigate(associationsURL);
   };
 
   const handleNavigateToEvidence = () => {
-    history.push(evidenceURL);
+    navigate(evidenceURL);
   };
 
   const loadingWidth = entityToGet === ENTITIES.TARGET ? 50 : 150;

diff --git a/apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx b/apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { useLocation, useParams, Switch, Route, useRouteMatch, Link } from "react-router-dom";
+import { useLocation, useParams, Routes, Route, useMatch, Link } from "react-router-dom";
 import { Box, Tabs, Tab } from "@mui/material";
 import { BasePage, ScrollToTop } from "ui";
 import Header from "./Header";
@@ -10,7 +10,7 @@ import Profile from "./Profile";
 function CredibleSetPage() {
   const location = useLocation();
   const { studyLocusId } = useParams() as { studyLocusId: string };
-  const { path } = useRouteMatch();
+  const { path } = useMatch();
 
   const { loading, data } = useQuery(CREDIBLE_SET_PAGE_QUERY, {
     variables: { studyLocusId: studyLocusId },
@@ -62,7 +62,7 @@ function CredibleSetPage() {
         )}
       />
 
-      <Switch>
+      <Routes>
         <Route exact path={path}>
           <Profile
             studyLocusId={studyLocusId}
@@ -72,7 +72,7 @@ function CredibleSetPage() {
             studyType={studyType}
           />
         </Route>
-      </Switch>
+      </Routes>
     </BasePage>
   );
 }

diff --git a/apps/platform/src/pages/DiseasePage/DiseasePage.tsx b/apps/platform/src/pages/DiseasePage/DiseasePage.tsx
@@ -1,7 +1,7 @@
 import { ReactElement } 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 { Link, Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
 import { BasePage, ScrollToTop } from "ui";
 
 import Header from "./Header";
@@ -44,7 +44,7 @@ function DiseasePage(): ReactElement {
     >
       <Header loading={loading} efoId={efoId} name={name} dbXRefs={dbXRefs} />
       <ScrollToTop />
-      <Route
+      {/* <Route
         path="/"
         render={history => (
           <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
@@ -64,18 +64,14 @@ function DiseasePage(): ReactElement {
             </Tabs>
           </Box>
         )}
-      />
-      <Switch>
-        <Route exact path="/disease/:efoId">
-          <Profile efoId={efoId} name={name} />
-        </Route>
-        <Route path="/disease/:efoId/associations">
-          <Associations efoId={efoId} />
-        </Route>
-        <Route path="*">
-          <Redirect to={`/disease/${efoId}`} />
-        </Route>
-      </Switch>
+      /> */}
+      <Routes>
+        <Route path="/disease/:efoId" element={<Profile efoId={efoId} name={name} />} />
+        <Route path="/disease/:efoId/associations" element={<Associations efoId={efoId} />} />
+        {/* <Route path="*">
+          <Navigate to={`/disease/${efoId}`} />
+        </Route> */}
+      </Routes>
     </BasePage>
   );
 }

diff --git a/apps/platform/src/pages/DrugPage/DrugPage.jsx b/apps/platform/src/pages/DrugPage/DrugPage.jsx
@@ -1,15 +1,7 @@
 import { useQuery } from "@apollo/client";
 import { BasePage, ScrollToTop } from "ui";
 import { Box, Tabs, Tab } from "@mui/material";
-import {
-  useLocation,
-  useParams,
-  Switch,
-  Route,
-  useRouteMatch,
-  Link,
-  Redirect,
-} from "react-router-dom";
+import { useLocation, useParams, Routes, Route, useMatch, Link, Navigate } from "react-router-dom";
 
 import Header from "./Header";
 import NotFoundPage from "../NotFoundPage";
@@ -20,7 +12,7 @@ import Profile from "./Profile";
 function DrugPage() {
   const location = useLocation();
   const { chemblId } = useParams();
-  const { path } = useRouteMatch();
+  const { path } = useMatch();
 
   const { loading, data } = useQuery(DRUG_PAGE_QUERY, {
     variables: { chemblId },
@@ -56,14 +48,14 @@ function DrugPage() {
           </Box>
         )}
       />
-      <Switch>
+      <Routes>
         <Route exact path={path}>
           <Profile chemblId={chemblId} name={name} />
         </Route>
         <Route path="*">
-          <Redirect to={`/drug/${chemblId}`} />
+          <Navigate to={`/drug/${chemblId}`} />
         </Route>
-      </Switch>
+      </Routes>
     </BasePage>
   );
 }

diff --git a/apps/platform/src/pages/SearchPage/SearchPage.jsx b/apps/platform/src/pages/SearchPage/SearchPage.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, lazy, Suspense } from "react";
 import queryString from "query-string";
 import { Typography } from "@mui/material";
-import { useLocation, useHistory } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { LoadingBackdrop, EmptyPage, BasePage } from "ui";
 
 import client from "../../client";
@@ -28,7 +28,7 @@ const parseQueryString = qs => {
 
 function SearchPage() {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { q, page, entities } = parseQueryString(location.search);
   const [data, setData] = useState(null);
 
@@ -57,7 +57,7 @@ function SearchPage() {
   const handleChangePage = (event, pageChanged) => {
     const params = { q, page: pageChanged + 1, entities };
     const qs = queryString.stringify(params, QS_OPTIONS);
-    history.push(`/search?${qs}`);
+    navigate(`/search?${qs}`);
   };
 
   const handleSetEntity = entity => (event, checked) => {
@@ -67,7 +67,7 @@ function SearchPage() {
       entities: checked ? [...entities, entity] : entities.filter(e => e !== entity),
     };
     const qs = queryString.stringify(params, QS_OPTIONS);
-    history.push(`/search?${qs}`);
+    navigate(`/search?${qs}`);
   };
 
   let SEARCH_CONTAINER = null;

diff --git a/apps/platform/src/pages/StudyPage/StudyPage.tsx b/apps/platform/src/pages/StudyPage/StudyPage.tsx
@@ -1,15 +1,7 @@
 import { useQuery } from "@apollo/client";
 import { BasePage, ScrollToTop } from "ui";
 import { Box, Tabs, Tab } from "@mui/material";
-import {
-  useLocation,
-  useParams,
-  Switch,
-  Route,
-  useRouteMatch,
-  Link,
-  Redirect,
-} from "react-router-dom";
+import { useLocation, useParams, Routes, Route, useMatch, Link, Navigate } from "react-router-dom";
 import Header from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import STUDY_PAGE_QUERY from "./StudyPage.gql";
@@ -18,7 +10,7 @@ import Profile from "./Profile";
 function StudyPage() {
   const location = useLocation();
   const { studyId } = useParams() as { studyId: string };
-  const { path } = useRouteMatch();
+  const { path } = useMatch();
 
   const { loading, data } = useQuery(STUDY_PAGE_QUERY, {
     variables: { studyId },
@@ -63,7 +55,7 @@ function StudyPage() {
         )}
       />
 
-      <Switch>
+      <Routes>
         <Route exact path={path}>
           <Profile
             studyId={studyId}
@@ -73,9 +65,9 @@ function StudyPage() {
           />
         </Route>
         <Route path="*">
-          <Redirect to={`/study/${study?.id}`} />
+          <Navigate to={`/study/${study?.id}`} />
         </Route>
-      </Switch>
+      </Routes>
     </BasePage>
   );
 }

diff --git a/apps/platform/src/pages/TargetPage/TargetPage.tsx b/apps/platform/src/pages/TargetPage/TargetPage.tsx
@@ -1,15 +1,7 @@
 import { ReactElement } from "react";
 import { useQuery } from "@apollo/client";
 import { Box, Tab, Tabs } from "@mui/material";
-import {
-  Link,
-  Route,
-  Switch,
-  useLocation,
-  useRouteMatch,
-  useParams,
-  Redirect,
-} from "react-router-dom";
+import { Link, Route, Routes, useLocation, useMatch, useParams, Navigate } from "react-router-dom";
 import { BasePage, ScrollToTop } from "ui";
 
 import Header from "./Header";
@@ -27,7 +19,7 @@ type TargetURLParams = {
 function TargetPage(): ReactElement {
   const location = useLocation();
   const { ensgId } = useParams<TargetURLParams>();
-  const { path } = useRouteMatch();
+  const { path } = useMatch();
 
   const { loading, data } = useQuery(TARGET_PAGE_QUERY, {
     variables: { ensgId },
@@ -90,17 +82,17 @@ function TargetPage(): ReactElement {
           </Box>
         )}
       />
-      <Switch>
+      <Routes>
         <Route exact path={path}>
           <Profile ensgId={ensgId} symbol={symbol} />
         </Route>
         <Route path={`${path}/associations`}>
           <Associations ensgId={ensgId} />
         </Route>
         <Route path="*">
-          <Redirect to={`/target/${ensgId}`} />
+          <Navigate to={`/target/${ensgId}`} />
         </Route>
-      </Switch>
+      </Routes>
     </BasePage>
   );
 }