Merge pull request #17 from nemac/develop

Develop

.github/workflows/main.yml

@@ -1,53 +1,43 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Build and Deploy
 
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ['master']
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: 'pages'
-  cancel-in-progress: true
+    branches:
+      - master
 
 jobs:
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+  build-and-deploy:
     runs-on: ubuntu-latest
+
     steps:
-      - name: Checkout
+      - name: Checkout code
         uses: actions/checkout@v4
-      - name: Set up Node
+
+      - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: '20'
           cache: 'npm'
+
       - name: Install dependencies
         run: npm ci
+
       - name: Build
         run: npm run build
-        env:
-          AIRTABLE_TOKEN: ${{ secrets.AIRTABLE_TOKEN }}
-          AIRTABLE_BASE: ${{ secrets.AIRTABLE_BASE }}
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
         with:
-          # Upload dist folder
-          path: './dist'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1  # Adjust this to your S3 bucket's region
+
+      - name: Upload to S3
+        run: |
+          aws s3 sync dist/ s3://crf-matching
+
+      - name: Invalidate CloudFront
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id E6AN64MGEH6XD \
+            --paths "/*"

README.md

@@ -3,11 +3,13 @@
 ### Local Setup
 
 - Create an [Airtable Personal Access Token](https://support.airtable.com/docs/creating-personal-access-tokens)
+- Create an [ArcGIS Online API Key](https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/tutorials/create-an-api-key/)
 - Create a `.env.` file in base folder that looks like this:
 
 ```
 AIRTABLE_TOKEN=YOUR_TOKEN
 AIRTABLE_BASE=app54Ce7cZjqk6dLw
+AGOL_API_KEY=YOUR_API_KEY
 ```
 
 Run `npm run dev` for local server

src/components/CommunityPane.jsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { Typography, Box, Stack } from '@mui/material';
 import HeaderBox from './HeaderBox';
 import ScoreSection from './ScoreSection';
@@ -29,7 +28,7 @@ const getSectionData = (community, isSelectable, availableOptions, onSelectionCh
       availableSelections: isSelectable ? availableOptions?.hazards || [] : [],
     },
     {
-      header: 'Size',
+      header: 'Community Population',
       cards: community.size,
       availableSelections: isSelectable ? availableOptions?.size || [] : [],
     },

src/components/ComparisonBoard.jsx

@@ -32,7 +32,6 @@ export default function ComparisonBoard({
     <ThemeProvider theme={theme}>
       <RowHoverContext.Provider value={hoverRow}>
         <SetHoverRowContext.Provider value={setHoverRow}>
-          <CssBaseline />
           <Container
             maxWidth="xl"
             sx={{ p: 2 }}
@@ -57,7 +56,8 @@ export default function ComparisonBoard({
 
               {/* Practitioners Panel */}
               <Stack sx={{ width: '60%', pl: 0, flex: '3 2 auto' }}>
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2, mt: 1 }}>
+                {/* Header Area with View More Button */}
+                <Box sx={{ mb: 2, mt: 1, position: 'relative' }}>
                   <Box sx={{ width: '100%', textAlign: 'center' }}>
                     <Typography
                       color="primary.main"
@@ -75,10 +75,9 @@ export default function ComparisonBoard({
                   {hasMorePractitioners && (
                     <Box
                       sx={{
-                        position: 'fixed',
-                        top: '24px',
-                        right: '24px',
-                        zIndex: 1000,
+                        position: 'absolute',
+                        top: '8px',
+                        right: '8px',
                       }}
                     >
                       <Button
@@ -110,10 +109,7 @@ export default function ComparisonBoard({
                   sx={{
                     pb: 2,
                     width: '100%',
-                    gap: {
-                      sm: '4px',
-                      md: '8px',
-                    },
+                    gap: 1,
                     overflowX: 'auto',
                   }}
                 >

src/components/ContactRow.jsx

@@ -81,7 +81,8 @@ export default function ContactRow({ type, practitioner }) {
 
   const linkStyle = {
     textDecoration: 'none',
-    color: theme.palette.primary.main
+    color: theme.palette.primary.main,
+    wordBreak: 'break-word',
   }
   let content
   if (type === 'website') {
@@ -96,6 +97,7 @@ export default function ContactRow({ type, practitioner }) {
         display: 'inline-flex',
         minHeight: 35,
         fontWeight: 700,
+        alignItems: 'center',
       }} 
     >
       <Box sx={{ mr: 2, }}>{ icon }</Box>

src/components/DropDownSelector.jsx

@@ -98,13 +98,9 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         startIcon={<PlusIcon>+</PlusIcon>}
         sx={{ width: '100%' }}
       >
-        <Typography sx={{ display: { xs: 'none', md: 'inherit' }, fontSize: '.875rem' }}>
-          Add another&nbsp;
-        </Typography>
-        <Typography sx={{ display: { xs: 'inherit', md: 'none' }, fontSize: '.875rem' }}>
-          Add&nbsp;
-        </Typography>
-        {trimmedOption.toLowerCase()}
+        <Typography sx={{ display: { xs: 'none', md: 'inherit' }, fontSize: '.875rem' }}>Add another&nbsp;</Typography>
+        <Typography sx={{ display: { xs: 'inherit', md: 'none' }, fontSize: '.875rem' }}>Add&nbsp;</Typography>
+        <Typography sx={{ fontSize: '.875rem' }}>{trimmedOption.toLowerCase()}</Typography>
       </AddButton>
 
       <StyledMenu

src/components/HeaderBox.jsx

@@ -1,12 +1,9 @@
-
-import { Box } from "@mui/material";
-import { styled } from "@mui/material/styles";
-
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const HeaderBox = styled(Box)(({ theme }) => ({
-  height: '200px',
+  height: '275px',
   alignContent: 'center',
 }));
 
 export default HeaderBox;
-

src/components/Logo.jsx

@@ -0,0 +1,25 @@
+
+import Box from '@mui/material/Box';
+import csciLogo from '../assets/CSCI_logo.png';
+
+export default function Logo () {
+  return (
+    <Box
+          sx={{
+            display: 'flex',
+            width: '100%',
+            alignItems: 'center',
+            pb: 2,
+          }}
+        >
+          <img
+            src={csciLogo}
+            alt="CSCI Logo"
+            style={{
+              width: '175px',
+              height: 'auto',
+            }}
+          />
+        </Box>
+  )
+}