From eb2dc64818e6a8920b441d14e9da2ce34ee6d347 Mon Sep 17 00:00:00 2001
From: Carlos Cruz <me@carcruzcast.com>
Date: Mon, 9 Dec 2024 12:58:17 +0100
Subject: [PATCH] feat: study page

---
 .../src/pages/StudyPage/StudyPage.tsx         | 71 ++++++++-----------
 1 file changed, 30 insertions(+), 41 deletions(-)

diff --git a/apps/platform/src/pages/StudyPage/StudyPage.tsx b/apps/platform/src/pages/StudyPage/StudyPage.tsx
index f75073977..859fb86a1 100644
--- a/apps/platform/src/pages/StudyPage/StudyPage.tsx
+++ b/apps/platform/src/pages/StudyPage/StudyPage.tsx
@@ -1,16 +1,16 @@
+import { ReactElement } from "react";
 import { useQuery } from "@apollo/client";
 import { BasePage, ScrollToTop } from "ui";
 import { Box, Tabs, Tab } from "@mui/material";
-import { useLocation, useParams, Routes, Route, useMatch, Link, Navigate } from "react-router-dom";
+import { useLocation, useParams, Link } from "react-router-dom";
 import Header from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import STUDY_PAGE_QUERY from "./StudyPage.gql";
 import Profile from "./Profile";
 
-function StudyPage() {
+function StudyPage(): ReactElement {
   const location = useLocation();
   const { studyId } = useParams() as { studyId: string };
-  const { path } = useMatch();
 
   const { loading, data } = useQuery(STUDY_PAGE_QUERY, {
     variables: { studyId },
@@ -29,45 +29,34 @@ function StudyPage() {
       description={`Annotation information for ${study?.id}`}
       location={location}
     >
-      <Header
-        loading={loading}
-        studyId={studyId}
-        backgroundTraits={study?.backgroundTraits}
-        targetId={study?.target?.id}
-        diseases={study?.diseases}
-        projectId={projectId}
-      />
-      <ScrollToTop />
+      <>
+        <Header
+          loading={loading}
+          studyId={studyId}
+          backgroundTraits={study?.backgroundTraits}
+          targetId={study?.target?.id}
+          diseases={study?.diseases}
+          projectId={projectId}
+        />
+        <ScrollToTop />
 
-      <Route
-        path="/"
-        render={history => (
-          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            <Tabs value={history.location.pathname !== "/" ? history.location.pathname : false}>
-              <Tab
-                label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
-                value={`/study/${studyId}`}
-                component={Link}
-                to={`/study/${studyId}`}
-              />
-            </Tabs>
-          </Box>
-        )}
-      />
-
-      <Routes>
-        <Route exact path={path}>
-          <Profile
-            studyId={studyId}
-            studyType={studyType}
-            projectId={projectId}
-            diseases={study?.diseases}
-          />
-        </Route>
-        <Route path="*">
-          <Navigate to={`/study/${study?.id}`} />
-        </Route>
-      </Routes>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <Tabs value={location.pathname}>
+            <Tab
+              label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
+              value={`/study/${studyId}`}
+              component={Link}
+              to={`/study/${studyId}`}
+            />
+          </Tabs>
+        </Box>
+        <Profile
+          studyId={studyId}
+          studyType={studyType}
+          projectId={projectId}
+          diseases={study?.diseases}
+        />
+      </>
     </BasePage>
   );
 }