From 8d463fba10fc4919f55537760574a6ac6a0fc8a7 Mon Sep 17 00:00:00 2001
From: Jeff Bliss <jeff.a.bliss@gmail.com>
Date: Wed, 13 Nov 2024 14:22:29 -0500
Subject: [PATCH] more updates for selfservice

---
 src/components/CommunityPane.jsx    | 131 +++++++++++----------
 src/components/DropDownSelector.jsx |  79 ++++++++++---
 src/components/Section.jsx          |  43 +++++--
 src/pages/SelfServicePage.jsx       | 175 +++++++++++-----------------
 src/util/api.js                     |  10 +-
 5 files changed, 236 insertions(+), 202 deletions(-)

diff --git a/src/components/CommunityPane.jsx b/src/components/CommunityPane.jsx
index 9a12901..9751dad 100644
--- a/src/components/CommunityPane.jsx
+++ b/src/components/CommunityPane.jsx
@@ -1,98 +1,101 @@
-
 import { Typography } from "@mui/material";
-
 import HeaderBox from "./HeaderBox";
 import ScoreSection from './ScoreSection';
 import Pane from './Pane';
 import Section from './Section';
-
 import { Box, Stack } from '@mui/material';
-
 import theme from '../theme';
 
-
-const getSectionData = community => [
+const getSectionData = (community, isSelectable, availableOptions, onSelectionChange) => [
   {
     header: 'State',
-    cards: [ community.state ]
+    cards: community.state,
+    availableSelections: isSelectable ? availableOptions?.state || [] : [],
   },
   {
     header: 'Activities',
-    cards: community.activities
+    cards: community.activities,
+    availableSelections: isSelectable ? availableOptions?.activities || [] : [],
   },
   {
     header: 'Sectors',
-    cards: community.sectors
+    cards: community.sectors,
+    availableSelections: isSelectable ? availableOptions?.sectors || [] : [],
   },
   {
     header: 'Hazards',
-    cards: community.hazards
+    cards: community.hazards,
+    availableSelections: isSelectable ? availableOptions?.hazards || [] : [],
   },
   {
     header: 'Size',
-    cards: [ community.size ]
+    cards: community.size,
+    availableSelections: isSelectable ? availableOptions?.size || [] : [],
   }
-]
-.map((section, index) => {
+].map((section, index) => {
   section.type = 'community'
-  section.key=`section${index}`
+  section.key = `section${index}`
+  section.isSelectable = isSelectable
+  section.onSelectionChange = onSelectionChange
   return section
 });
 
+export default function CommunityPane({
+                                        community,
+                                        isSelectable = false,
+                                        availableOptions = {},
+                                        onSelectionChange = () => {}
+                                      }) {
+  const sectionData = getSectionData(community, isSelectable, availableOptions, onSelectionChange);
 
-export default function CommunityPane({ community }) {
-  const sectionData = getSectionData(community);
   return (
-    <Box
-      sx={{
-        bgcolor: 'primary.white',
-        borderRadius: 4,
-        border: `0px solid ${theme.palette.primary.white}`,
-        pr: 1,
-        pl: 1,
-        pt: 0,
-        pb: 1, 
-      }}
-    >
-      <Stack
-        sx={{ width: '100%' }}>
-        <HeaderBox>
-          <Typography
-            color="primary.main"
-            fontWeight="700"
-            align="center"
-            variant="h5"
-            sx={{
-              fontSize: {
-                'xs': '1rem',
-                'lg': '1.5rem',
-              }
-            }}
-          >{ community.name }</Typography>
-        </HeaderBox>
-        { /* filler box to match height of "Matched Practitioners" heading */ }
-        <Box sx={{ height: '40px', width: '100%', }}></Box>
-      </Stack>
-      <Pane
-        boxShadow={2}
-        sx={{ pl: 1 }}>
-        {
-          sectionData.map((section, index) => {
-            return Section(section)
-          })
-        }
-        <ScoreSection
+      <Box
           sx={{
-            pr: 2,
+            bgcolor: 'primary.white',
+            borderRadius: 4,
+            border: `0px solid ${theme.palette.primary.white}`,
+            pr: 1,
             pl: 1,
-            justifyContent: 'space-between',
-          }} 
+            pt: 0,
+            pb: 1,
+          }}
+      >
+        <Stack sx={{ width: '100%' }}>
+          <HeaderBox>
+            <Typography
+                color="primary.main"
+                fontWeight="700"
+                align="center"
+                variant="h5"
+                sx={{
+                  fontSize: {
+                    'xs': '1rem',
+                    'lg': '1.5rem',
+                  }
+                }}
+            >{community.name}</Typography>
+          </HeaderBox>
+          {/* filler box to match height of "Matched Practitioners" heading */}
+          <Box sx={{ height: '40px', width: '100%', }}></Box>
+        </Stack>
+        <Pane
+            boxShadow={2}
+            sx={{ pl: 1 }}
         >
-          <div>Total</div>
-          <div>{ community.totalCategories }</div>
-        </ScoreSection>
-      </Pane>
-    </Box>
+          {sectionData.map((section, index) => {
+            return Section(section)
+          })}
+          <ScoreSection
+              sx={{
+                pr: 2,
+                pl: 1,
+                justifyContent: 'space-between',
+              }}
+          >
+            <div>Total</div>
+            <div>{community.totalCategories}</div>
+          </ScoreSection>
+        </Pane>
+      </Box>
   )
 }
-
diff --git a/src/components/DropDownSelector.jsx b/src/components/DropDownSelector.jsx
index fc6c3f2..22fa504 100644
--- a/src/components/DropDownSelector.jsx
+++ b/src/components/DropDownSelector.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
+import theme from '../theme';
 
-const DropDownSelector = (props) => {
-  const { availableSelections, selections, setSelections, option } = props;
+const DropDownSelector = ({ availableSelections, selections, setSelections, option }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const handleAdd = (itemToAdd) => {
@@ -17,19 +17,31 @@ const DropDownSelector = (props) => {
 
   return (
       <div className="flex flex-col gap-2">
-        <div className="font-medium text-gray-700">{option}</div>
-
-        {/* Selected States */}
+        {/* Selected Items */}
         <div className="flex flex-col gap-2">
           {selections.map((item) => (
               <div
                   key={item}
-                  className="flex items-center justify-between px-3 py-2 bg-amber-50 rounded"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '8px 12px',
+                    backgroundColor: theme.palette.primary.tan,
+                    borderRadius: '4px',
+                  }}
               >
-                <span>{item}</span>
+                <span style={{ color: theme.palette.primary.main }}>{item}</span>
                 <button
-                    onClick={() => handleRemove(state)}
-                    className="text-gray-500 hover:text-gray-700"
+                    onClick={() => handleRemove(item)}
+                    style={{
+                      color: theme.palette.primary.main,
+                      border: 'none',
+                      background: 'none',
+                      fontSize: '18px',
+                      cursor: 'pointer',
+                      padding: '0 4px'
+                    }}
                 >
                   ×
                 </button>
@@ -37,25 +49,60 @@ const DropDownSelector = (props) => {
           ))}
         </div>
 
-        {/* Add State Button & Dropdown */}
+        {/* Add Button & Dropdown */}
         <div className="relative">
           <button
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-              className="flex items-center gap-2 px-3 py-2 text-blue-600 bg-blue-100 rounded hover:bg-blue-200"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '8px 12px',
+                color: theme.palette.primary.midBlue,
+                backgroundColor: theme.palette.primary.lightBlue,
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                width: '100%'
+              }}
           >
-            <span className="text-lg">+</span>
-            Add another {option}
+            <span style={{ fontSize: '20px' }}>+</span>
+            {selections.length === 0 ? `Add ${option}` : `Add another ${option}`}
           </button>
 
           {isDropdownOpen && (
-              <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-auto">
+              <div
+                  style={{
+                    position: 'absolute',
+                    zIndex: 10,
+                    width: '100%',
+                    marginTop: '4px',
+                    backgroundColor: theme.palette.primary.white,
+                    border: `1px solid ${theme.palette.primary.borderGray}`,
+                    borderRadius: '4px',
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                    maxHeight: '240px',
+                    overflowY: 'auto'
+                  }}
+              >
                 {availableSelections
                     .filter(item => !selections.includes(item))
                     .map((item) => (
                         <button
                             key={item}
                             onClick={() => handleAdd(item)}
-                            className="w-full px-4 py-2 text-left hover:bg-gray-100"
+                            style={{
+                              width: '100%',
+                              padding: '8px 16px',
+                              textAlign: 'left',
+                              border: 'none',
+                              background: 'none',
+                              cursor: 'pointer',
+                              color: theme.palette.primary.main,
+                              ':hover': {
+                                backgroundColor: theme.palette.primary.lightGray
+                              }
+                            }}
                         >
                           {item}
                         </button>
@@ -67,4 +114,4 @@ const DropDownSelector = (props) => {
   );
 };
 
-export default DropDownSelector;
\ No newline at end of file
+export default DropDownSelector;
diff --git a/src/components/Section.jsx b/src/components/Section.jsx
index a3b43b1..0b27455 100644
--- a/src/components/Section.jsx
+++ b/src/components/Section.jsx
@@ -1,18 +1,39 @@
-
 import { Typography, Box, Stack } from "@mui/material"
-
 import Cell from "./Cell"
+import DropDownSelector from "./DropDownSelector"
+import theme from '../theme'
 
-export default function Section ({ header='', type, cards, key }) {
+export default function Section({ header='', type, cards, key, isSelectable, onSelectionChange, availableSelections = [] }) {
   const cells = cards.map((label, index) => Cell({ label, type, key: `${key}_row${index}` }))
+
   return (
-    <Box key={ key } sx={{ mb: 2 }}>
-      <Box sx={{ minHeight: '40px', mt: '5px', mb: '5px' }}>
-        <Typography variant="body1" >{ header }</Typography>
+      <Box key={key} sx={{ mb: 2 }}>
+        {/* Section Header */}
+        <Box sx={{ minHeight: '40px', mt: '5px', mb: '5px' }}>
+          <Typography variant="body1">{header}</Typography>
+        </Box>
+
+        {/* Selector if isSelectable */}
+        {isSelectable && (
+            <Box sx={{
+              mb: 2,
+              backgroundColor: theme.palette.primary.white,
+              borderRadius: 2,
+              p: 2
+            }}>
+              <DropDownSelector
+                  availableSelections={availableSelections}
+                  selections={cards}
+                  setSelections={(newSelections) => onSelectionChange(header.toLowerCase(), newSelections)}
+                  option={header}
+              />
+            </Box>
+        )}
+
+        {/* Content */}
+        <Stack gap={2} useFlexGap={true}>
+          {cells}
+        </Stack>
       </Box>
-      <Stack gap={2} useFlexGap={true}>
-        { cells }
-      </Stack>
-    </Box>
   )
-}
+}
\ No newline at end of file
diff --git a/src/pages/SelfServicePage.jsx b/src/pages/SelfServicePage.jsx
index 87f3b3b..660a688 100644
--- a/src/pages/SelfServicePage.jsx
+++ b/src/pages/SelfServicePage.jsx
@@ -1,11 +1,8 @@
 // React
-import { useState, useEffect, useContext } from 'react';
-
-// router
-import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 
 // API
-import { fetchCommunity, fetchPractitionersForCommunity, fetchOptionsFromAirtable } from '../util/api';
+import { fetchOptionsFromAirtable } from '../util/api';
 
 // components
 import { CssBaseline, Stack, Container, Typography, Box } from '@mui/material';
@@ -24,7 +21,6 @@ import DropDownSelector from "../components/DropDownSelector.jsx";
 
 
 export default function SelfServicePage() {
-
   const [selectedOptions, setSelectedOptions] = useState({
     state: [],
     activities: [],
@@ -41,9 +37,9 @@ export default function SelfServicePage() {
     size: [],
   });
 
-  const [ practitioners, setPractitioners ] = useState([]);
-  const [ poppedPractitioner, setPoppedPractitioner ] = useState(null);
-  const [ hoverRow, setHoverRow ] = useState(null);
+  const [practitioners, setPractitioners] = useState([]);
+  const [poppedPractitioner, setPoppedPractitioner] = useState(null);
+  const [hoverRow, setHoverRow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
@@ -54,6 +50,7 @@ export default function SelfServicePage() {
     sectors: selectedOptions.sectors,
     hazards: selectedOptions.hazards,
     size: selectedOptions.size,
+    totalCategories: Object.values(selectedOptions).reduce((sum, arr) => sum + arr.length, 0)
   }
 
   useEffect(() => {
@@ -69,6 +66,13 @@ export default function SelfServicePage() {
     });
   }, []);
 
+  const handleSelectionChange = (category, newSelections) => {
+    setSelectedOptions(prev => ({
+      ...prev,
+      [category]: newSelections
+    }));
+  };
+
   if (error) {
     return <div className="text-red-600 p-4">{error}</div>;
   }
@@ -77,109 +81,60 @@ export default function SelfServicePage() {
     return <div className="p-4">Loading options...</div>;
   }
 
-  if (availableOptions) {
-
-    const practitionerPanes = practitioners.map((pract, index) => {
-      return <PractitionerPane
-          community={ community }
-          practitioner={ pract }
-          poppedPractitioner={ poppedPractitioner }
-          setPoppedPractitioner={ setPoppedPractitioner }
-          key={ index }
-          style={{
-            flex: 1
-          }}
-      ></PractitionerPane>
-    })
-
-    return (
-        <ThemeProvider theme={theme}>
-          <RowHoverContext.Provider value={hoverRow}>
-            <SetHoverRowContext.Provider value={setHoverRow}>
-              <CssBaseline />
-              <Container maxWidth="xl" sx={{ p: 2 }} >
-                <Stack
-                    direction='row'
-                    gap={1}
-                    ml={1}
-                    sx={{
-                      bgcolor: theme.palette.primary.lightGray,
-                    }}
-                >
-                  <CommunityPane
-                      community={ community }
-                  />
-                  <DropDownSelector
-                      availableSelections = { availableOptions.state }
-                      selections = { selectedOptions.state }
-                      setSelections = { (selections) => setSelectedOptions({ ...selectedOptions, state: selections }) }
-                      option = "State"
-                  />
-                  <DropDownSelector
-                      availableSelections = { availableOptions.activities }
-                      selections = { selectedOptions.activities }
-                      setSelections = { (selections) => setSelectedOptions({ ...selectedOptions, activities: selections }) }
-                      option = "Activity"
-                  />
-                  <DropDownSelector
-                      availableSelections = { availableOptions.sectors }
-                      selections = { selectedOptions.sectors }
-                      setSelections = { (selections) => setSelectedOptions({ ...selectedOptions, sectors: selections }) }
-                      option = "Sector"
-                  />
-                  <DropDownSelector
-                      availableSelections = { availableOptions.hazards }
-                      selections = { selectedOptions.hazards }
-                      setSelections = { (selections) => setSelectedOptions({ ...selectedOptions, hazards: selections }) }
-                      option = "Hazard"
-                  />
-                  <DropDownSelector
-                      availableSelections = { availableOptions.size }
-                      selections = { selectedOptions.size }
-                      setSelections = { (selections) => setSelectedOptions({ ...selectedOptions, size: selections }) }
-                      option = "Size"
-                  />
-
-                  { /* Practitioners */ }
-
-                  <Stack sx={{ width: '60%' }}>
-                    <Typography
-                        color="primary.main"
+  return (
+      <ThemeProvider theme={theme}>
+        <RowHoverContext.Provider value={hoverRow}>
+          <SetHoverRowContext.Provider value={setHoverRow}>
+            <CssBaseline />
+            <Container maxWidth="xl" sx={{ p: 2 }} >
+              <Stack
+                  direction='row'
+                  gap={1}
+                  ml={1}
+                  sx={{
+                    bgcolor: theme.palette.primary.lightGray,
+                  }}
+              >
+                <CommunityPane
+                    community={community}
+                    isSelectable={true}
+                    availableOptions={availableOptions}
+                    onSelectionChange={handleSelectionChange}
+                />
+
+                {/* Practitioners */}
+                <Stack sx={{ width: '60%' }}>
+                  <Typography
+                      color="primary.main"
+                      sx={{
+                        pt: 1,
+                        height: '40px',
+                        textAlign: 'center',
+                        fontWeight: 700,
+                      }}
+                      variant="h5"
+                  >
+                    <Box
                         sx={{
-                          pt: 1,
-                          height: '40px',
-                          textAlign: 'center',
-                          fontWeight: 700,
+                          display: {
+                            xs: 'none',
+                            md: 'inline-block',
+                          },
                         }}
-                        variant="h5"
-                    >
-                      <Box
-                          sx={{
-                            display: {
-                              xs: 'none',
-                              md: 'inline-block',
-                            },
-                          }}
-                      >Matched</Box> Practitioners
-                    </Typography>
-                    <Stack
-                        direction='row'
-                        gap={1}
-                        mr={1}
-                    >
-                      { practitionerPanes }
-                    </Stack>
+                    >Matched</Box> Practitioners
+                  </Typography>
+                  <Stack
+                      direction='row'
+                      gap={1}
+                      mr={1}
+                  >
+                    {PractitionerPane}
                   </Stack>
                 </Stack>
-              </Container>
-            </SetHoverRowContext.Provider>
-          </RowHoverContext.Provider>
-        </ThemeProvider>
-    )
-  } else {
-    return (
-        <FullPageSpinner></FullPageSpinner>
-    )
-  }
-
+              </Stack>
+            </Container>
+          </SetHoverRowContext.Provider>
+        </RowHoverContext.Provider>
+      </ThemeProvider>
+  );
 }
diff --git a/src/util/api.js b/src/util/api.js
index 1eebdce..28996a9 100644
--- a/src/util/api.js
+++ b/src/util/api.js
@@ -14,7 +14,15 @@ const base = Airtable.base(__AIRTABLE_BASE__)
 const normalizeRec = (rec, fieldMap) => {
   const result = {}
   for (const [normKey, airKey] of Object.entries(fieldMap)) {
-    result[normKey] = rec[airKey] || ''
+    // For communities, ensure every field is an array
+    if (fieldMap === communityFieldMap) {
+      // If the field exists but isn't an array, wrap it
+      result[normKey] = rec[airKey] ?
+          (Array.isArray(rec[airKey]) ? rec[airKey] : [rec[airKey]]) :
+          [] // If field doesn't exist, return empty array
+    } else {
+      result[normKey] = rec[airKey] || ''
+    }
   }
   return result
 }