Merge pull request #2 from nemac/develop

Develop
nemac · Dec 3, 2024 · e8cce93 · e8cce93
2 parents 7e48928 + 50f5358
commit e8cce93
Show file tree

Hide file tree

Showing 15 changed files with 1,312 additions and 722 deletions.
diff --git a/src/assets/climate_prac.png b/src/assets/climate_prac.png
diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
@@ -1,34 +1,56 @@
+import { useContext } from 'react';
+import { Box, Typography } from '@mui/material';
+import { RowHoverContext, SetHoverRowContext } from './RowHoverContext';
+import PractMatchSymbol from './svg/PractMatchSymbol';
+import theme from '../theme';
 
-import { useContext } from "react";
-import { Box, Typography } from "@mui/material";
-
-import { RowHoverContext, SetHoverRowContext } from "./RowHoverContext";
-
-import PractMatchSymbol from "./svg/PractMatchSymbol"
-
-import theme from "../theme";
-
-export default function Cell ({ label, type, key }) {
+export default function Cell({ label, type, key, isSelectable, onRemove }) {
   const hoverRow = useContext(RowHoverContext);
   const setHoverRow = useContext(SetHoverRowContext);
 
   let content;
   if (type === 'community') {
-    content = <Typography variant="body1" sx={{ textAlign: 'left' }}>
-      { label }
-    </Typography>
+    content = (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: '100%',
+        }}
+      >
+        <Typography
+          variant="body1"
+          sx={{ textAlign: 'left' }}
+        >
+          {label}
+        </Typography>
+        {isSelectable && (
+          <button
+            onClick={() => onRemove(label)}
+            style={{
+              color: theme.palette.primary.main,
+              border: 'none',
+              background: 'none',
+              fontSize: '18px',
+              cursor: 'pointer',
+              padding: '0 4px',
+            }}
+          >
+            ×
+          </button>
+        )}
+      </Box>
+    );
   } else {
-    content = PractMatchSymbol({ label })
+    content = PractMatchSymbol({ label });
   }
+
   return (
     <Box
-      onMouseEnter={ e => {
-        setHoverRow(key);
-      }}
-      onMouseLeave={ e => {
-        setHoverRow(null);
-      }}
-      key={ key }
+      onMouseEnter={(e) => setHoverRow(key)}
+      onMouseLeave={(e) => setHoverRow(null)}
+      key={key}
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -42,8 +64,7 @@ export default function Cell ({ label, type, key }) {
         justifyContent: 'center',
       }}
     >
-    { content }
-  </Box>
-  )
+      {content}
+    </Box>
+  );
 }
-
diff --git a/src/components/CommunityPane.jsx b/src/components/CommunityPane.jsx
@@ -1,47 +1,54 @@
-
-import { Typography } from "@mui/material";
-
-import HeaderBox from "./HeaderBox";
+import PropTypes from 'prop-types';
+import { Typography, Box, Stack } 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, isSelectable, availableOptions, onSelectionChange) =>
+  [
+    {
+      header: 'State',
+      cards: community.state,
+      availableSelections: isSelectable ? availableOptions?.state || [] : [],
+    },
+    {
+      header: 'Activities',
+      cards: community.activities,
+      availableSelections: isSelectable ? availableOptions?.activities || [] : [],
+    },
+    {
+      header: 'Sectors',
+      cards: community.sectors,
+      availableSelections: isSelectable ? availableOptions?.sectors || [] : [],
+    },
+    {
+      header: 'Hazards',
+      cards: community.hazards,
+      availableSelections: isSelectable ? availableOptions?.hazards || [] : [],
+    },
+    {
+      header: 'Size',
+      cards: community.size,
+      availableSelections: isSelectable ? availableOptions?.size || [] : [],
+    },
+  ].map((section, index) => ({
+    ...section,
+    type: 'community',
+    id: `section${index}`,
+    isSelectable: isSelectable,
+    onSelectionChange: onSelectionChange,
+  }));
 
-const getSectionData = community => [
-  {
-    header: 'State',
-    cards: [ community.state ]
-  },
-  {
-    header: 'Activities',
-    cards: community.activities
-  },
-  {
-    header: 'Sectors',
-    cards: community.sectors
-  },
-  {
-    header: 'Hazards',
-    cards: community.hazards
-  },
-  {
-    header: 'Size',
-    cards: [ community.size ]
-  }
-]
-.map((section, index) => {
-  section.type = 'community'
-  section.key=`section${index}`
-  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={{
@@ -51,11 +58,10 @@ export default function CommunityPane({ community }) {
         pr: 1,
         pl: 1,
         pt: 0,
-        pb: 1, 
+        pb: 1,
       }}
     >
-      <Stack
-        sx={{ width: '100%' }}>
+      <Stack sx={{ width: '100%' }}>
         <HeaderBox>
           <Typography
             color="primary.main"
@@ -64,35 +70,37 @@ export default function CommunityPane({ community }) {
             variant="h5"
             sx={{
               fontSize: {
-                'xs': '1rem',
-                'lg': '1.5rem',
-              }
+                xs: '1rem',
+                lg: '1.5rem',
+              },
             }}
-          >{ community.name }</Typography>
+          >
+            {community.name}
+          </Typography>
         </HeaderBox>
-        { /* filler box to match height of "Matched Practitioners" heading */ }
-        <Box sx={{ height: '40px', width: '100%', }}></Box>
+        <Box sx={{ height: '40px', width: '100%' }}></Box>
       </Stack>
       <Pane
         boxShadow={2}
-        sx={{ pl: 1 }}>
-        {
-          sectionData.map((section, index) => {
-            return Section(section)
-          })
-        }
+        sx={{ pl: 1 }}
+      >
+        {sectionData.map((section) => (
+          <Section
+            key={section.id}
+            {...section}
+          />
+        ))}
         <ScoreSection
           sx={{
             pr: 2,
             pl: 1,
             justifyContent: 'space-between',
-          }} 
+          }}
         >
           <div>Total</div>
-          <div>{ community.totalCategories }</div>
+          <div>{community.totalCategories}</div>
         </ScoreSection>
       </Pane>
     </Box>
-  )
+  );
 }
-