diff --git a/src/Components/DataPoints/PlainTable.tsx b/src/Components/DataPoints/PlainTable.tsx index 76b6988..6e0b309 100644 --- a/src/Components/DataPoints/PlainTable.tsx +++ b/src/Components/DataPoints/PlainTable.tsx @@ -1,5 +1,5 @@ import React, { useState, FC, CSSProperties, ReactNode } from "react"; -import { NavigateFunction, useNavigate } from "react-router-dom"; +import {useLocation, NavigateFunction, useNavigate, Location } from "react-router-dom"; import { Button, Tooltip, Typography, TypographyProps } from "@mui/material"; import { styled } from "@mui/material/styles"; import ControlPointIcon from "@mui/icons-material/ControlPoint"; @@ -36,26 +36,24 @@ export const TopStickyRow: FC<{ minWidth: string; text: string; }> = ({ minWidth, text }) => ( - + > + + {text} + ); return ( @@ -208,10 +206,11 @@ const NoMarginCell: FC<{ /** One row in the table, rendering all the fields of a single RecordData. */ const Row: FC<{ record: RecordData, hideProgramColumn: boolean }> = ({ record, hideProgramColumn }) => { const navigate = useNavigate(); + const location = useLocation(); return (
- + {hideProgramColumn || } @@ -302,28 +301,37 @@ const timelineBodyTemplate = (rowData: RecordData, timelineKey: string) => (
); -const applicantBodyTemplate = (rowData: RecordData, navigate: NavigateFunction) => ( -
navigate(`/datapoints/applicant/${rowData.ApplicantID}`)} - > - {rowData.ApplicantID} -
-); +const applicantBodyTemplate = (rowData: RecordData, navigate: NavigateFunction, location: Location) => { + const handleClick = () => { + if (location.pathname.startsWith("/datapoints")) { + navigate(`/datapoints/applicant/${rowData.ApplicantID}`); + } else if (location.pathname.startsWith("/programs")) { + navigate(`/programs/${encodeURIComponent(rowData.ProgramID)}/applicant/${rowData.ApplicantID}`); + } + }; + return ( +
+ {rowData.ApplicantID} +
+ ) +}; const programBodyTemplate = (rowData: RecordData, navigate: NavigateFunction) => (
); } @@ -398,6 +407,7 @@ export const PlainTable: FC<{ // key={r.RecordID+Date.now()} record={r} hideProgramColumn={insideProgramPage} + key={r.RecordID} />); }); diff --git a/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx b/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx index b29a149..a1cd2e8 100644 --- a/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx +++ b/src/Components/ProgramPage/ProgramContent/ProgramContent.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactMarkdown from 'react-markdown'; import './ProgramContent.css' -import {Form, Link, useLoaderData, useNavigate, redirect} from "react-router-dom"; +import {Form, Link, useLoaderData, useNavigate, redirect, Outlet} from "react-router-dom"; import {getProgramContent, getProgramDesc} from "../../../Data/ProgramData"; import {getMetaData, collectProgram, uncollectProgram} from '../../../Data/UserData'; import {Box, IconButton, Paper, Tooltip, Typography} from "@mui/material"; @@ -133,6 +133,8 @@ function ProgramContent({editable = true, inDialog=false}) { } + + ); } diff --git a/src/Components/router.jsx b/src/Components/router.jsx index b2182ef..456c3cb 100644 --- a/src/Components/router.jsx +++ b/src/Components/router.jsx @@ -38,7 +38,6 @@ import Login, {action as loginAction} from "./Auth/Login/Login"; import RegisterAndReset, {action as registerAndResetAction} from "./Auth/RegisterAndReset/RegisterAndReset"; import Agreement from "./Agreement/Agreement"; import {AboutUs} from "./AboutUs/AboutUs"; -import {HowToUse} from "./HowToUse/HowToUse"; import React from "react"; import FAQMDPath from "../Data/MarkDown/FAQ.md"; import ProgramIndexMDPath from "../Data/MarkDown/ProgramIndex.md" @@ -80,7 +79,15 @@ const router = createBrowserRouter([ path: '/programs/:programId', element: , loader: programContentLoader, - action: programContentAction + action: programContentAction, + children: [ + { + path: '/programs/:programId/applicant/:applicantId', + element: , + loader: ProfileDataPointsLoader, + action: ProfileDataPointsAction, + }, + ] }, { path: '/programs/:programId/edit', element: ,