feat(studies): SJIP-1134 redirect after login on public page

include-dcc · Dec 10, 2024 · 7dcda8f · 7dcda8f
1 parent 7b87b38
commit 7dcda8f
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 14 deletions.
diff --git a/src/components/PublicLayout/Header/index.tsx b/src/components/PublicLayout/Header/index.tsx
@@ -37,7 +37,7 @@ const Header = () => {
   const { keycloak } = useKeycloak();
   const query = useQueryParams();
   const navigate = useNavigate();
-
+  const [redirectUri, setRedirectUri] = useState<string>();
   const [openLoginModal, setOpenLoginModal] = useState(false);
   const closeLoginModal = () => setOpenLoginModal(false);
 
@@ -73,6 +73,7 @@ const Header = () => {
               key="dashboard"
               icon={<HomeOutlined />}
               onClick={() => {
+                setRedirectUri(STATIC_ROUTES.DASHBOARD);
                 trackPublicStudies('Dashboard');
                 setOpenLoginModal(true);
               }}
@@ -88,6 +89,7 @@ const Header = () => {
               key="explore-data"
               icon={<FileSearchOutlined />}
               onClick={() => {
+                setRedirectUri(STATIC_ROUTES.DATA_EXPLORATION);
                 trackPublicStudies('Data Exploration');
                 setOpenLoginModal(true);
               }}
@@ -99,6 +101,7 @@ const Header = () => {
                 key="variant-data"
                 icon={<LineStyleIcon />}
                 onClick={() => {
+                  setRedirectUri(STATIC_ROUTES.VARIANTS);
                   trackPublicStudies('Variants');
                   setOpenLoginModal(true);
                 }}
@@ -110,6 +113,7 @@ const Header = () => {
                 key="analytics-data"
                 icon={<DotChartOutlined />}
                 onClick={() => {
+                  setRedirectUri(STATIC_ROUTES.ANALYTICS);
                   trackPublicStudies('Analysis');
                   setOpenLoginModal(true);
                 }}
@@ -123,6 +127,7 @@ const Header = () => {
             key="community"
             icon={<TeamOutlined />}
             onClick={() => {
+              setRedirectUri(STATIC_ROUTES.COMMUNITY);
               trackPublicStudies('Community');
               setOpenLoginModal(true);
             }}
@@ -228,7 +233,9 @@ const Header = () => {
         ]}
         className={style.mainHeader}
       />
-      {openLoginModal && <LoginModal isOpen={openLoginModal} onClose={closeLoginModal} />}
+      {openLoginModal && (
+        <LoginModal isOpen={openLoginModal} onClose={closeLoginModal} redirectUri={redirectUri} />
+      )}
     </>
   );
 };

diff --git a/src/components/PublicLayout/LoginModal/index.tsx b/src/components/PublicLayout/LoginModal/index.tsx
@@ -16,17 +16,18 @@ const { Title } = Typography;
 type LoginModalProps = {
   isOpen: boolean;
   onClose: () => void;
+  redirectUri?: string;
 };
 
-const LoginModal = ({ isOpen, onClose }: LoginModalProps) => {
+const LoginModal = ({ isOpen, onClose, redirectUri }: LoginModalProps) => {
   const { keycloak } = useKeycloak();
   const query = useQueryParams();
 
   const handleSignin = async (btnName: string) => {
     trackPublicStudies(btnName);
     const url = keycloak.createLoginUrl({
       redirectUri: `${window.location.origin}/${
-        query.get(REDIRECT_URI_KEY) || STATIC_ROUTES.STUDIES
+        redirectUri || query.get(REDIRECT_URI_KEY) || STATIC_ROUTES.STUDIES
       }`,
       locale: intl.getInitOptions().currentLocale,
     });

diff --git a/src/hooks/useQueryParams.tsx b/src/hooks/useQueryParams.tsx
@@ -1,5 +1,3 @@
-const useQueryParams = () => {
-  return new URLSearchParams(window.location.search);
-};
+const useQueryParams = () => new URLSearchParams(window.location.search);
 
-export default useQueryParams;
+export default useQueryParams;
diff --git a/src/views/PublicStudies/components/PageContent/index.tsx b/src/views/PublicStudies/components/PageContent/index.tsx
@@ -17,7 +17,9 @@ const { Title } = Typography;
 const PageContent = () => {
   const [searchValue, setSearchValue] = useState('');
   const [openLoginModal, setOpenLoginModal] = useState(false);
+  const [redirectUri, setRedirectUri] = useState<string>();
   const manageLoginModal = (isOpen: boolean) => setOpenLoginModal(isOpen);
+  const manageRedirectUri = (uri: string) => setRedirectUri(uri);
 
   const { stats, isFetchingStats } = useGlobals();
   const { studiesParticipants = [] } = stats || {};
@@ -43,7 +45,7 @@ const PageContent = () => {
     }
   };
 
-  const defaultColumns = getColumns({ manageLoginModal });
+  const defaultColumns = getColumns({ manageLoginModal, manageRedirectUri });
 
   return (
     <Space direction="vertical" size={16} className={styles.pageContent}>
@@ -83,7 +85,11 @@ const PageContent = () => {
         }
       />
       {openLoginModal && (
-        <LoginModal isOpen={openLoginModal} onClose={() => manageLoginModal(false)} />
+        <LoginModal
+          isOpen={openLoginModal}
+          onClose={() => manageLoginModal(false)}
+          redirectUri={redirectUri}
+        />
       )}
     </Space>
   );

diff --git a/src/views/PublicStudies/utils.tsx b/src/views/PublicStudies/utils.tsx
@@ -10,6 +10,7 @@ import { DataCategory, hasDataCategory } from 'views/Studies';
 
 import { TABLE_EMPTY_PLACE_HOLDER } from 'common/constants';
 import { IStudiesParticipants } from 'services/api/arranger/models';
+import { STATIC_ROUTES } from 'utils/routes';
 
 import style from './index.module.css';
 
@@ -18,9 +19,13 @@ export const TABLE_ID = 'public-studies';
 
 type ColumnsProps = {
   manageLoginModal: (isOpen: boolean) => void;
+  manageRedirectUri: (uri: string) => void;
 };
 
-export const getColumns = ({ manageLoginModal }: ColumnsProps): ProColumnType<any>[] => [
+export const getColumns = ({
+  manageLoginModal,
+  manageRedirectUri,
+}: ColumnsProps): ProColumnType<any>[] => [
   {
     key: 'is_harmonized',
     iconTitle: <AuditOutlined />,
@@ -58,7 +63,16 @@ export const getColumns = ({ manageLoginModal }: ColumnsProps): ProColumnType<an
     key: 'study_code',
     title: intl.get('entities.study.code'),
     dataIndex: 'study_code',
-    render: (study_code: string) => <a onClick={() => manageLoginModal(true)}>{study_code}</a>,
+    render: (study_code: string) => (
+      <a
+        onClick={() => {
+          manageRedirectUri(STATIC_ROUTES.STUDIES);
+          manageLoginModal(true);
+        }}
+      >
+        {study_code}
+      </a>
+    ),
   },
   {
     key: 'study_name',
@@ -147,7 +161,14 @@ export const getColumns = ({ manageLoginModal }: ColumnsProps): ProColumnType<an
       const participantCount = record?.participant_count || 0;
 
       return participantCount ? (
-        <a onClick={() => manageLoginModal(true)}>{numberWithCommas(participantCount)}</a>
+        <a
+          onClick={() => {
+            manageRedirectUri(STATIC_ROUTES.DATA_EXPLORATION_PARTICIPANTS);
+            manageLoginModal(true);
+          }}
+        >
+          {numberWithCommas(participantCount)}
+        </a>
       ) : (
         participantCount || TABLE_EMPTY_PLACE_HOLDER
       );
@@ -160,7 +181,14 @@ export const getColumns = ({ manageLoginModal }: ColumnsProps): ProColumnType<an
       const fileCount = record?.file_count || 0;
 
       return fileCount ? (
-        <a onClick={() => manageLoginModal(true)}>{numberWithCommas(fileCount)}</a>
+        <a
+          onClick={() => {
+            manageRedirectUri(STATIC_ROUTES.DATA_EXPLORATION_DATAFILES);
+            manageLoginModal(true);
+          }}
+        >
+          {numberWithCommas(fileCount)}
+        </a>
       ) : (
         fileCount || TABLE_EMPTY_PLACE_HOLDER
       );