Merge branch 'feat/custom-navbar' into staging

hicsail · Apr 18, 2024 · ed26fd7 · ed26fd7
2 parents 591b31b + 87b5486
commit ed26fd7
Show file tree

Hide file tree

Showing 26 changed files with 645 additions and 188 deletions.
diff --git a/packages/client/.eslintrc.cjs b/packages/client/.eslintrc.cjs
@@ -6,15 +6,12 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    'plugin:react-hooks/recommended'
   ],
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }]
+  }
+};
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
@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prettier": "prettier -l .",
+    "prettier:fix": "prettier -lw ."
   },
   "dependencies": {
     "@apollo/client": "^3.7.17",
@@ -17,7 +19,9 @@
     "@fontsource/poppins": "^5.0.8",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.13.7",
+    "apollo3-cache-persist": "^0.14.1",
     "graphql": "^16.7.1",
+    "material-ui-popup-state": "^5.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hash-link": "^1.0.2",

diff --git a/packages/client/src/assets/site.webmanifest b/packages/client/src/assets/site.webmanifest
@@ -1,19 +1,19 @@
 {
-    "name": "RESTORE",
-    "short_name": "RESTORE",
-    "icons": [
-        {
-            "src": "/src/assets/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/src/assets/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#a888c7",
-    "background_color": "#a888c7",
-    "display": "standalone"
+  "name": "RESTORE",
+  "short_name": "RESTORE",
+  "icons": [
+    {
+      "src": "/src/assets/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/src/assets/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#a888c7",
+  "background_color": "#a888c7",
+  "display": "standalone"
 }
diff --git a/packages/client/src/components/DPEDiagram.jsx b/packages/client/src/components/DPEDiagram.jsx
@@ -7,25 +7,37 @@
  * sometimes the individual columns will need to have event listeners attached.
  */
 
-
 export function DPEDiagramSVG() {
-    return (
-        <svg width="900" height="450" viewBox="0 0 900 450" xmlns="http://www.w3.org/2000/svg">
-          <DeterminantsColumn /><ProcessesColumn /><EvaluationColumn />
-        </svg>
-    )
+  return (
+    <svg width="900" height="450" viewBox="0 0 900 450" xmlns="http://www.w3.org/2000/svg">
+      <DeterminantsColumn />
+      <ProcessesColumn />
+      <EvaluationColumn />
+    </svg>
+  );
 }
 export function DeterminantsColumnSVG() {
-    return (<svg width="300" height="450" viewBox="0 0 300 450" xmlns="http://www.w3.org/2000/svg"><DeterminantsColumn /></svg>)
+  return (
+    <svg width="300" height="450" viewBox="0 0 300 450" xmlns="http://www.w3.org/2000/svg">
+      <DeterminantsColumn />
+    </svg>
+  );
 }
 export function ProcessesColumnSVG() {
-    return (<svg width="300" height="450" viewBox="300 0 300 450" xmlns="http://www.w3.org/2000/svg"><ProcessesColumn /></svg>)
+  return (
+    <svg width="300" height="450" viewBox="300 0 300 450" xmlns="http://www.w3.org/2000/svg">
+      <ProcessesColumn />
+    </svg>
+  );
 }
 export function EvaluationColumnSVG() {
-    return (<svg width="300" height="450" viewBox="600 0 300 450" xmlns="http://www.w3.org/2000/svg"><EvaluationColumn /></svg>)
+  return (
+    <svg width="300" height="450" viewBox="600 0 300 450" xmlns="http://www.w3.org/2000/svg">
+      <EvaluationColumn />
+    </svg>
+  );
 }
 
-
 export function DeterminantsColumn() {
   return (
     <g id="DeterminantsColumn">
@@ -37,15 +49,27 @@ export function DeterminantsColumn() {
         <path d="M 1 357 h 258 l 40 32 v 28 l -40 32 h -258 v -8 l 30 -24 v -28 l -30 -24 v -8 z" fill="#A888C7" />
       </g>
       <g textAnchor="start" fontFamily="sans-serif" fontSize="20">
-        <text x="30" y="50" fontSize="26" fontWeight="bold">Determinants</text>
-        <text x="75" y="168">Barriers</text>
-        <text x="75" y="258">Facilitators</text>
-        <text x="55" y="385">Health Equity</text>
-        <text x="55" y="410">Implementation</text>
-        <text x="55" y="435">Framework</text>
+        <text x="30" y="50" fontSize="26" fontWeight="bold">
+          Determinants
+        </text>
+        <text x="75" y="168">
+          Barriers
+        </text>
+        <text x="75" y="258">
+          Facilitators
+        </text>
+        <text x="55" y="385">
+          Health Equity
+        </text>
+        <text x="55" y="410">
+          Implementation
+        </text>
+        <text x="55" y="435">
+          Framework
+        </text>
       </g>
     </g>
-  )
+  );
 }
 export function ProcessesColumn() {
   return (
@@ -58,16 +82,30 @@ export function ProcessesColumn() {
         <path d="M 301 357 h 258 l 40 32 v 28 l -40 32 h -258 v -8 l 30 -24 v -28 l -30 -24 v -8 z" fill="#FFD884" />
       </g>
       <g textAnchor="start" fontFamily="sans-serif" fontSize="20">
-        <text x="330" y="50" fontSize="26" fontWeight="bold">Processes</text>
-        <text x="375" y="160">Ways to enhance</text>
-        <text x="375" y="185">implementation</text>
-        <text x="375" y="250">Ways to enhance</text>
-        <text x="375" y="275">equity</text>
-        <text x="355" y="395">Implementation</text>
-        <text x="355" y="420">Facilitation</text>
+        <text x="330" y="50" fontSize="26" fontWeight="bold">
+          Processes
+        </text>
+        <text x="375" y="160">
+          Ways to enhance
+        </text>
+        <text x="375" y="185">
+          implementation
+        </text>
+        <text x="375" y="250">
+          Ways to enhance
+        </text>
+        <text x="375" y="275">
+          equity
+        </text>
+        <text x="355" y="395">
+          Implementation
+        </text>
+        <text x="355" y="420">
+          Facilitation
+        </text>
       </g>
     </g>
-  )
+  );
 }
 export function EvaluationColumn() {
   return (
@@ -80,16 +118,34 @@ export function EvaluationColumn() {
         <path d="M 601 357 h 258 l 40 32 v 28 l -40 32 h -258 v -8 l 30 -24 v -28 l -30 -24 v -8 z" fill="#78CEE9" />
       </g>
       <g textAnchor="start" fontFamily="sans-serif" fontSize="20">
-        <text x="630" y="50" fontSize="26" fontWeight="bold">Evaluation</text>
-        <text x="675" y="155">Assessment of</text>
-        <text x="675" y="180">implementation</text>
-        <text x="675" y="205">success</text>
-        <text x="675" y="245">Assessment of</text>
-        <text x="675" y="270">health equity (e.g.,</text>
-        <text x="675" y="295">reach, retention)</text>
-        <text x="655" y="395">Proctor's Taxonomy</text>
-        <text x="655" y="420">of Outcomes</text>
+        <text x="630" y="50" fontSize="26" fontWeight="bold">
+          Evaluation
+        </text>
+        <text x="675" y="155">
+          Assessment of
+        </text>
+        <text x="675" y="180">
+          implementation
+        </text>
+        <text x="675" y="205">
+          success
+        </text>
+        <text x="675" y="245">
+          Assessment of
+        </text>
+        <text x="675" y="270">
+          health equity (e.g.,
+        </text>
+        <text x="675" y="295">
+          reach, retention)
+        </text>
+        <text x="655" y="395">
+          Proctor's Taxonomy
+        </text>
+        <text x="655" y="420">
+          of Outcomes
+        </text>
       </g>
     </g>
-  )
+  );
 }
diff --git a/packages/client/src/components/Header.jsx b/packages/client/src/components/Header.jsx
@@ -1,13 +1,14 @@
 import { Box, Typography } from '@mui/material';
 import { theme } from '../theme.jsx';
+import { prependStrapiURL } from '../utils.jsx';
 
 export function Header({ title, subtitle, imageUrl, bgColor }) {
   return (
     <Box
       sx={{
         minHeight: { md: '500px' },
         display: 'flex',
-        backgroundImage: `url(${imageUrl})`,
+        backgroundImage: `url(${prependStrapiURL(imageUrl)})`,
         backgroundSize: 'cover',
         bgcolor: bgColor || theme.palette.purple.dark,
         [theme.breakpoints.down('sm')]: {

diff --git a/packages/client/src/components/Markdown.jsx b/packages/client/src/components/Markdown.jsx
@@ -0,0 +1,5 @@
+import ReactMarkdown from 'react-markdown';
+
+export const Markdown = ({ Body }) => {
+  return <ReactMarkdown>{Body}</ReactMarkdown>;
+};