Merge pull request #44 from hicsail/ts-routing

Treatments and Services routing (see PR on github for more notes)
hicsail · Dec 15, 2023 · 8f44fec · 8f44fec
2 parents 425d333 + 27fb5fc
commit 8f44fec
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 85 deletions.
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -1,16 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="src/assets/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="src/assets/favicon-16x16.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="src/assets/apple-touch-icon.png">
-    <link rel="manifest" href="src/assets/site.webmanifest">
-    <link rel="mask-icon" href="src/assets/safari-pinned-tab.svg" color="#a888c7">
-    <link rel="shortcut icon" href="src/assets/favicon.ico">
-    <meta name="msapplication-TileColor" content="#00aba9">
-    <meta name="msapplication-config" content="src/assets/browserconfig.xml">
-    <meta name="theme-color" content="#a888c7">
+    <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/src/assets/apple-touch-icon.png" />
+    <link rel="manifest" href="/src/assets/site.webmanifest" />
+    <link rel="mask-icon" href="/src/assets/safari-pinned-tab.svg" color="#a888c7" />
+    <link rel="shortcut icon" href="/src/assets/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#00aba9" />
+    <meta name="msapplication-config" content="/src/assets/browserconfig.xml" />
+    <meta name="theme-color" content="#a888c7" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RESTORE</title>
   </head>

diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json
diff --git 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/components/Footer.jsx b/packages/client/src/components/Footer.jsx
@@ -53,7 +53,7 @@ export const Footer = () => {
             ))}
           </Grid>
         </Box>
-        <Box component="img" src="src/assets/bu_logo.webp" height={80} marginLeft={5} marginTop="auto" />
+        <Box component="img" src="/src/assets/bu_logo.webp" height={80} marginLeft={5} marginTop="auto" />
         <Box display="flex" marginLeft="auto" gap={20}>
           <Typography variant="body2" display="flex" flexDirection="column" gap={1}>
             <Link>Link 1</Link>

diff --git 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 (
     <Box
+      id={id}
       sx={{
         display: 'flex',
         flexDirection: { xs: 'column-reverse', md: 'row' },

diff --git a/packages/client/src/components/SectionedHeader.jsx b/packages/client/src/components/SectionedHeader.jsx
@@ -1,8 +1,8 @@
 import { Box, Typography } from '@mui/material';
 
-export function SectionedHeader({ title, suptitle, text }) {
+export function SectionedHeader({ id, title, suptitle, text }) {
   return (
-    <Box sx={{ display: 'flex', justifyContent: 'space-between', margin: '0 0 1em 0' }}>
+    <Box id={id} sx={{ display: 'flex', justifyContent: 'space-between', margin: '0 0 1em 0' }}>
       <Box width="50%" sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
         {suptitle && (
           <Typography variant="sectionedHeaderSuptitle" gutterBottom>

diff --git 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 (
     <Box>
-      <Typography variant="h4" component="h2" gutterBottom>
+      <Typography id={spacesToDashes(TeamCategoryName)} variant="h4" component="h2" gutterBottom>
         {TeamCategoryName}
       </Typography>
       {Description && (

diff --git 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: <TreatmentsServices />
+        element: <TreatmentsServices />,
+        children: [
+          {
+            index: true,
+            element: <ServicesToTheHealthSystem />
+          },
+          {
+            path: 'services-to-the-health-system',
+            element: <ServicesToTheHealthSystem />
+          },
+          {
+            path: 'services-to-our-patients',
+            element: <ServicesToOurPatients />
+          }
+        ]
       },
       {
         path: 'our-team',

diff --git 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 (
-    <Box sx={{ display: 'flex', flexDirection: { xs: 'column-reverse', md: 'row' }, alignItems: 'center', gap: 2 }}>
+    <Box
+      id="our-strategies"
+      sx={{ display: 'flex', flexDirection: { xs: 'column-reverse', md: 'row' }, alignItems: 'center', gap: 2 }}
+    >
       <Box sx={{ width: { xs: '100%', md: '60%' }, display: 'flex', flexDirection: 'column' }}>
         <Typography variant="infoPanelBTitle" sx={{ textAlign: 'center' }}>
           Our Strategies
@@ -38,6 +41,7 @@ export default function AboutMission() {
   return (
     <>
       <InfoPanelA
+        id="our-mission"
         title="Our Mission"
         subtitle={
           <p>

diff --git 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 (
     <>
+      <HashLinkObserver />
       <NavBar />
       <UniversalHeader />
       <Container sx={{ margin: '1rem auto' }}>