From 7dea1fc7f09ad882f9119cc16fc811cdd074e506 Mon Sep 17 00:00:00 2001 From: Zoe <19900057+vpsx@users.noreply.github.com> Date: Wed, 6 Dec 2023 17:16:22 -0500 Subject: [PATCH 1/6] Give Treatments/Services tabs their own routes * as opposed to hashes --- packages/client/src/main.jsx | 17 ++- .../client/src/pages/TreatmentsServices.jsx | 128 ++++++++++-------- 2 files changed, 84 insertions(+), 61 deletions(-) diff --git a/packages/client/src/main.jsx b/packages/client/src/main.jsx index aa7190b..3a34c94 100644 --- a/packages/client/src/main.jsx +++ b/packages/client/src/main.jsx @@ -14,6 +14,7 @@ import Home from './pages/Home.jsx'; import Layout from './pages/Layout.jsx'; import AboutMission from './pages/AboutMission.jsx'; import TreatmentsServices from './pages/TreatmentsServices.jsx'; +import { ServicesToTheHealthSystem, ServicesToOurPatients } from './pages/TreatmentsServices.jsx'; import TeamMemberGrid from './pages/Team.jsx'; import Testimonials from './pages/Testimonials.jsx'; import ResearchAndEvals from './pages/Research.jsx'; @@ -57,7 +58,21 @@ const router = createBrowserRouter([ }, { path: 'treatments-and-services', - element: + element: , + children: [ + { + index: true, + element: + }, + { + path: 'services-to-the-health-system', + element: + }, + { + path: 'services-to-our-patients', + element: + } + ] }, { path: 'our-team', diff --git a/packages/client/src/pages/TreatmentsServices.jsx b/packages/client/src/pages/TreatmentsServices.jsx index d1bf73f..3b1750a 100644 --- a/packages/client/src/pages/TreatmentsServices.jsx +++ b/packages/client/src/pages/TreatmentsServices.jsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { Box, Button, Paper, Popper, Typography } from '@mui/material'; -import { NavLink, useLocation } from 'react-router-dom'; +import { NavLink, Outlet, useLocation } from 'react-router-dom'; import determinantsVennImg from '../assets/treatments_and_services/determinants_diagram.jpg'; import ptsdCurveImg from '../assets/treatments_and_services/ptsd-curve.svg'; @@ -575,9 +575,61 @@ function HowToBecomeARestorePatient() { ); } -export default function Services() { - const { hash } = useLocation(); - const [tabValue, setTabValue] = useState(hash || '#Services-to-the-health-system'); +export function ServicesToTheHealthSystem() { + return ( + <> + + + +

RESTORE is overseen by advisory boards that help us center the community in our health equity mission.

+

+ Our boards include: Community Members; Patients; Clinical and Hospital Leadership; Internal Experts; + External Experts. +

+ + + + + + + + + + + + + ); +} + +export function ServicesToOurPatients() { + return ( + <> + + + Many people who experience trauma events go on to have natural recovery. Those whose recovery gets interrupted + go on to develop PTSD. + + + + + + +
+ +
+ + + ); +} + +export default function TreatmentsServices() { + // The first button/navlink's element (services to system) is also the index element. + // When the user is on the root route, they will see the index element, and should ideally + // see the first button styled as though it were active; but the relevant NavLink will not + // in fact be active. + // Therefore, stuck using pathname... + const { pathname } = useLocation(); + const onIndexRoute = pathname === '/treatments-and-services'; return ( <> @@ -590,80 +642,36 @@ export default function Services() { - {tabValue == '#Services-to-the-health-system' && ( - <> - - - -

- RESTORE is overseen by advisory boards that help us center the community in our health equity mission. -

-

- Our boards include: Community Members; Patients; Clinical and Hospital Leadership; Internal Experts; - External Experts. -

- - - - - - - - - - - - - )} - - {tabValue == '#Services-to-our-patients' && ( - <> - - - Many people who experience trauma events go on to have natural recovery. Those whose recovery gets - interrupted go on to develop PTSD. - - - - - - -
- -
- - - )} + ); } From aa2b0907e622093929047317d649ae00664e0043 Mon Sep 17 00:00:00 2001 From: Zoe <19900057+vpsx@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:36:34 -0500 Subject: [PATCH 2/6] Fix relative links to assets. Also prettier --- packages/client/index.html | 20 ++++++++++---------- packages/client/src/components/Footer.jsx | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/client/index.html b/packages/client/index.html index 4ffec1c..11330de 100644 --- a/packages/client/index.html +++ b/packages/client/index.html @@ -1,16 +1,16 @@ - + - - - - - - - - - + + + + + + + + + RESTORE diff --git a/packages/client/src/components/Footer.jsx b/packages/client/src/components/Footer.jsx index eea7890..2a349c1 100644 --- a/packages/client/src/components/Footer.jsx +++ b/packages/client/src/components/Footer.jsx @@ -53,7 +53,7 @@ export const Footer = () => { ))} - + Link 1 From 0145588a35ee175233f4fc16a74cba55a8112d0c Mon Sep 17 00:00:00 2001 From: Zoe <19900057+vpsx@users.noreply.github.com> Date: Thu, 7 Dec 2023 15:54:55 -0500 Subject: [PATCH 3/6] TS tabs buttons - make shadows on hover darker --- packages/client/src/pages/TreatmentsServices.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/client/src/pages/TreatmentsServices.jsx b/packages/client/src/pages/TreatmentsServices.jsx index 3b1750a..d091cf0 100644 --- a/packages/client/src/pages/TreatmentsServices.jsx +++ b/packages/client/src/pages/TreatmentsServices.jsx @@ -15,6 +15,8 @@ import { } from '../gql.jsx'; import ReactMarkdown from 'react-markdown'; import { prependStrapiURL } from '../utils.jsx'; +import { theme } from '../theme.jsx'; +import { alpha } from '@mui/material/styles'; import { DeterminantsColumn, @@ -649,6 +651,7 @@ export default function TreatmentsServices() { borderColor: 'transparent', borderBottom: 'solid', borderRightStyle: 'none', + '&:hover': { backgroundColor: alpha(theme.palette.purple.light, 0.5) }, '&.active': { border: 'solid', borderBottomColor: 'transparent' }, ...(onIndexRoute && { border: 'solid', borderBottomColor: 'transparent' }) }} @@ -664,6 +667,7 @@ export default function TreatmentsServices() { borderColor: 'transparent', borderBottom: 'solid', borderRightStyle: 'none', + '&:hover': { backgroundColor: alpha(theme.palette.purple.light, 0.5) }, '&.active': { border: 'solid', borderBottomColor: 'transparent' } }} > From f1d2109d860d799832b0c7e27e9bc440ba9b8878 Mon Sep 17 00:00:00 2001 From: Zoe <19900057+vpsx@users.noreply.github.com> Date: Mon, 11 Dec 2023 17:28:32 -0500 Subject: [PATCH 4/6] Add id to upcoming trainings/consultations header --- packages/client/src/pages/TreatmentsServices.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/TreatmentsServices.jsx b/packages/client/src/pages/TreatmentsServices.jsx index d091cf0..f80be5e 100644 --- a/packages/client/src/pages/TreatmentsServices.jsx +++ b/packages/client/src/pages/TreatmentsServices.jsx @@ -475,7 +475,9 @@ function UpcomingOngoing() { return ( <> - Discover our comprehensive range of psychiatric services at our hospital + + Interested in Joining Trainings and Consultations? Find Upcoming Opportunities Below. + {data.aboutUpcomingOngoing.data.attributes.Body} From be4d7c444fd986be0da59425e71f6ba63fa27363 Mon Sep 17 00:00:00 2001 From: Zoe <19900057+vpsx@users.noreply.github.com> Date: Mon, 11 Dec 2023 17:41:03 -0500 Subject: [PATCH 5/6] Install and use React Hash Link --- packages/client/package-lock.json | 23 +++++++++++++++++++++++ packages/client/package.json | 1 + packages/client/src/pages/Layout.jsx | 8 ++++++++ 3 files changed, 32 insertions(+) diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json index 3b58a0a..e86f8d0 100644 --- a/packages/client/package-lock.json +++ b/packages/client/package-lock.json @@ -18,6 +18,7 @@ "graphql": "^16.7.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-hash-link": "^1.0.2", "react-markdown": "^8.0.7", "react-router-dom": "^6.15.0" }, @@ -4241,11 +4242,33 @@ "react": "^18.2.0" } }, + "node_modules/react-hash-link": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-hash-link/-/react-hash-link-1.0.2.tgz", + "integrity": "sha512-fiTlptVRwfWfw17+imVm50S5wlptCfUnm6oIl8GXn5I1bS+wZ4Ejqp/Bx8hhJPK59uNeoce4sJty5pIVaAUAcw==", + "dependencies": { + "react-loadable": "^5.5.0" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/react-loadable": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz", + "integrity": "sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==", + "dependencies": { + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-markdown": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz", diff --git a/packages/client/package.json b/packages/client/package.json index 280c0f1..95da619 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -20,6 +20,7 @@ "graphql": "^16.7.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-hash-link": "^1.0.2", "react-markdown": "^8.0.7", "react-router-dom": "^6.15.0" }, diff --git a/packages/client/src/pages/Layout.jsx b/packages/client/src/pages/Layout.jsx index cce14d6..8f09282 100644 --- a/packages/client/src/pages/Layout.jsx +++ b/packages/client/src/pages/Layout.jsx @@ -5,9 +5,17 @@ import { UniversalHeader } from '../components/Header.jsx'; import { Footer } from '../components/Footer.jsx'; import { NavBar } from '../components/NavBar.jsx'; +// Hash links do not work well with React bc elements are often not yet +// available in DOM on load. Slightly better in Firefox than in Chrome, +// but still suboptimal. Historically people used rafgraph/react-router-hash-link +// but this is incompatible with React Router v6. React Router considers this +// issue outside its scope. So: +import HashLinkObserver from 'react-hash-link'; + function Layout() { return ( <> + From 27fb5fc767e8631996a58d88bb341ded7a20589f Mon Sep 17 00:00:00 2001 From: Zoe <19900057+vpsx@users.noreply.github.com> Date: Tue, 12 Dec 2023 11:05:25 -0500 Subject: [PATCH 6/6] ID as many elements as sensible --- packages/client/src/components/InfoPanelA.jsx | 3 +- .../client/src/components/SectionedHeader.jsx | 4 +-- .../client/src/components/TeamCategory.jsx | 3 +- packages/client/src/pages/AboutMission.jsx | 6 +++- .../client/src/pages/TreatmentsServices.jsx | 31 +++++++++++++------ packages/client/src/utils.jsx | 5 +++ 6 files changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/InfoPanelA.jsx b/packages/client/src/components/InfoPanelA.jsx index baf7914..b3329dd 100644 --- a/packages/client/src/components/InfoPanelA.jsx +++ b/packages/client/src/components/InfoPanelA.jsx @@ -2,9 +2,10 @@ import { NavLink } from 'react-router-dom'; import { Box, Button, Typography } from '@mui/material'; // No idea what to name this. Layout 24 on wireframe. -export function InfoPanelA({ title, subtitle, imageUrl, imageAlt, iconUrl, iconAlt, buttonText, buttonLink }) { +export function InfoPanelA({ id, title, subtitle, imageUrl, imageAlt, iconUrl, iconAlt, buttonText, buttonLink }) { return ( + {suptitle && ( diff --git a/packages/client/src/components/TeamCategory.jsx b/packages/client/src/components/TeamCategory.jsx index 19b55a4..0744db0 100644 --- a/packages/client/src/components/TeamCategory.jsx +++ b/packages/client/src/components/TeamCategory.jsx @@ -1,10 +1,11 @@ import { Box, Grid, Typography } from '@mui/material'; import { TeamMember } from './TeamMember.jsx'; +import { spacesToDashes } from '../utils.jsx'; export const TeamCategory = ({ TeamCategoryName, Description, team_members }) => { return ( - + {TeamCategoryName} {Description && ( diff --git a/packages/client/src/pages/AboutMission.jsx b/packages/client/src/pages/AboutMission.jsx index cd8778b..6f9aa22 100644 --- a/packages/client/src/pages/AboutMission.jsx +++ b/packages/client/src/pages/AboutMission.jsx @@ -4,7 +4,10 @@ import { prependStrapiURL } from '../utils.jsx'; function Strategies() { return ( - + Our Strategies @@ -38,6 +41,7 @@ export default function AboutMission() { return ( <> diff --git a/packages/client/src/pages/TreatmentsServices.jsx b/packages/client/src/pages/TreatmentsServices.jsx index f80be5e..cd14c9d 100644 --- a/packages/client/src/pages/TreatmentsServices.jsx +++ b/packages/client/src/pages/TreatmentsServices.jsx @@ -73,7 +73,13 @@ function ImplementationFrameworkInteractive() { return ( <> - + @@ -386,7 +392,7 @@ function OurImplementationModel() { ); } return ( - + Our Implementation Model @@ -409,7 +415,7 @@ function OurImplementationModel() { function ImplementationFrameworks() { return ( - + @@ -435,7 +441,10 @@ function ImplementationFrameworks() { function ScopeOfServicesToSystem() { return ( - + Scope of Services to the System @@ -493,6 +502,7 @@ function TreatmentsCardGrid() { return ( <> + Measurement-based care @@ -541,7 +551,7 @@ function TreatmentsAndServices() { if (error) return

Error : {error.message}

; return ( - + Treatments and Services {data.treatmentsAndServices.data.attributes.Body} @@ -554,6 +564,7 @@ function ScopeOfClinicalFocusPanel() { return ( <> @@ -571,7 +582,9 @@ function HowToBecomeARestorePatient() { return ( <> - How to Become a RESTORE Patient + + How to Become a RESTORE Patient + {data.howToBecomeARestorePatient.data.attributes.Body} @@ -583,7 +596,7 @@ export function ServicesToTheHealthSystem() { return ( <> - +

RESTORE is overseen by advisory boards that help us center the community in our health equity mission.

@@ -608,7 +621,7 @@ export function ServicesToTheHealthSystem() { export function ServicesToOurPatients() { return ( <> - + Many people who experience trauma events go on to have natural recovery. Those whose recovery gets interrupted go on to develop PTSD. diff --git a/packages/client/src/utils.jsx b/packages/client/src/utils.jsx index 669358e..47e7113 100644 --- a/packages/client/src/utils.jsx +++ b/packages/client/src/utils.jsx @@ -20,3 +20,8 @@ export function processMarkdownImageUri(url) { export function generateBlogPostPath(id, title) { return `/blog/${id}/${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`; } + +// This function replaces spaces with dashes. +export function spacesToDashes(text) { + return text.replace(/ /g, '-'); +}