added new dropdown component and used it in location information for two of the fields (underage and manufactoring)

packages/bcer-data-portal/app/src/components/generic/StyledEditableDropdown.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect, useRef } from 'react';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/system';
+import useLocation from '@/hooks/useLocation';
+import useNetworkErrorMessage from '@/hooks/useNetworkErrorMessage';
+
+const StyledSelect = styled(Select)({
+  '& .MuiInputBase-input': {
+    color: 'black',
+    fontSize: '14px',
+    fontWeight: 600,
+    WebkitTextFillColor: 'black',
+  },
+  '& .MuiInput-underline:before': {
+    borderBottomStyle: 'none',
+  },
+  '& .MuiSelect-select:focus': {
+    backgroundColor: 'transparent',
+  },
+  '& .Mui-selected': {
+    backgroundColor: 'transparent !important',
+  },
+});
+
+interface StyledEditableDropdownProps {
+  id: string;
+  value: any;
+  type: string;
+  options: Array<{ label: string; value: any }>;
+  onSuccessfulUpdate?: (data: string) => void;
+}
+
+function StyledEditableDropdown({ id, value, type, options, onSuccessfulUpdate }: StyledEditableDropdownProps) {
+  const [content, setContent] = useState(value);
+  const { updateLocationInfo, patchLocationError } = useLocation(id);
+  const [noteMessage, updateNoteMessage] = useState('');
+  const { showNetworkErrorMessage } = useNetworkErrorMessage();
+  const notInitialRender = useRef(false);
+
+  useEffect(() => {
+    if (notInitialRender.current) {
+      const sendToDB = async () => {
+        await updateLocationInfo(type, content);
+
+        if (patchLocationError) {
+          showNetworkErrorMessage(patchLocationError);
+        } else {
+          onSuccessfulUpdate(noteMessage + ' to ' + content);
+        }
+      };
+
+      sendToDB();
+    } else {
+      notInitialRender.current = true;
+    }
+  }, [content]);
+
+  const handleChange = (event:any) => {
+    updateNoteMessage(type + ' changed from ' + content);
+    setContent(event.target.value);
+  };
+
+  const isLegacyValue = !options.some(option => option.value === content);
+
+  return (
+    <>
+      <StyledSelect
+        name={type}
+        value={content}
+        onChange={handleChange}
+        variant="standard"
+      >
+        {isLegacyValue && (
+          <MenuItem value={content} disabled>
+            {content}
+          </MenuItem>
+        )}
+        {options.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </StyledSelect>
+    </>
+  );
+}
+
+export default StyledEditableDropdown;

packages/bcer-data-portal/app/src/components/generic/StyledEditableTextField.tsx

@@ -7,6 +7,7 @@ import { styled } from '@mui/system';
 import useLocation from '@/hooks/useLocation';
 import useNetworkErrorMessage from '@/hooks/useNetworkErrorMessage';
 import StyledEditDialog from './StyledEditDialog';
+import StyledEditableDropdown from './StyledEditableDropdown';
 
 const StyledTextField = styled(TextField)({
   '& .MuiInputBase-input.Mui-disabled': {
@@ -41,7 +42,7 @@ function StyledEditableTextField({ id, value, type, onSuccessfulUpdate }: Styled
   const [latitude, setLatitude] = useState(null);
   const [geo_confidence, setGeo_confidence] = useState('');
   const [mouseOver, setMouseOver] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false); // State to manage dialog open state
+  const [dialogOpen, setDialogOpen] = useState(false);
   const { updateLocationInfo, patchLocationError } = useLocation(id);
   const [noteMessage, updateNoteMessage] = useState('');
   const { showNetworkErrorMessage } = useNetworkErrorMessage();
@@ -106,25 +107,42 @@ function StyledEditableTextField({ id, value, type, onSuccessfulUpdate }: Styled
     setDialogOpen(false);
   };
 
+  const dropdownOptions = [
+    { label: 'Yes', value: "Yes" },
+    { label: 'No', value: "No" },
+  ];
+
+  const dropdownTypes = ['underage', 'manufacturing'];
+
   return (
     <>
-      <StyledTextField
-        name={type}
-        disabled={true}
-        value={content}
-        onMouseEnter={handleMouseOver}
-        onMouseLeave={handleMouseOut}
-        InputProps={{
-          endAdornment: mouseOver ? (
-            <InputAdornment position="end">
-              <IconButton style={{ color: '#0053A5' }} onClick={handleDialogOpen}>
-                <EditIcon />
-              </IconButton>
-            </InputAdornment>
-          ) : null,
-        }}
-        variant="standard"
-      />
+      { dropdownTypes.includes(type) ? (
+        <StyledEditableDropdown
+          id={id}
+          value={content}
+          type={type}
+          options={dropdownOptions}
+          onSuccessfulUpdate={onSuccessfulUpdate}
+        />
+      ) : (
+        <StyledTextField
+          name={type}
+          disabled={true}
+          value={content}
+          onMouseEnter={handleMouseOver}
+          onMouseLeave={handleMouseOut}
+          InputProps={{
+            endAdornment: mouseOver ? (
+              <InputAdornment position="end">
+                <IconButton style={{ color: '#0053A5' }} onClick={handleDialogOpen}>
+                  <EditIcon />
+                </IconButton>
+              </InputAdornment>
+            ) : null,
+          }}
+          variant="standard"
+        />
+      )}
       <StyledEditDialog
         type={type}
         saveChange={updateContent}