Added Dispenser Type and Simplified Info JSX

phlask · Jun 30, 2023 · 0799278 · 0799278
1 parent 6af2cd0
commit 0799278
Showing 1 changed file with 67 additions and 50 deletions.
diff --git a/src/components/AddResourceModal/AddWaterTap.jsx b/src/components/AddResourceModal/AddWaterTap.jsx
@@ -7,7 +7,6 @@ import PlacesAutocomplete, {
 } from 'react-places-autocomplete';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { Modal, Form, Button, Accordion } from 'react-bootstrap';
 import styles from './AddResourceModal.module.scss';
 // eslint-disable-next-line import/no-unresolved
 import SharedFormFields from './SharedFormFields';
@@ -17,6 +16,10 @@ import { deleteApp } from 'firebase/app';
 import { connectToFirebase } from './utils';
 import { useForm } from 'react-hook-form';
 import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
   Box,
   Card,
   CardContent,
@@ -37,13 +40,25 @@ import {
   TextField
 } from '@mui/material';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const ORGANIZATION_TYPE = [
   { accessType: 'Open access', explanation: 'Public site, open to all' },
   { accessType: 'Restricted', explanation: 'May not be open to all' },
   { accessType: 'Unsure', explanation: '' }
 ];
 
+const DISPENSER_TYPE = [
+  'Drinking fountain',
+  'Bottle filler and fountain',
+  'Sink',
+  'Water jug',
+  'Soda machine',
+  'Pitcher',
+  'Water cooler',
+  'Other'
+];
+
 function AddWaterTap({
   prev,
   next,
@@ -323,6 +338,37 @@ function AddWaterTap({
                 );
               })}
             </TextField>
+            <Accordion>
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                aria-controls="panel1a-content"
+                id="panel1a-header"
+              >
+                <Typography>Dispenser Type</Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                {DISPENSER_TYPE.map(type => {
+                  return (
+                    <MenuItem key={type} as="label" htmlFor={type} second>
+                      <Typography style={{ marginLeft: '0rem' }} fontSize={13}>
+                        {type}
+                      </Typography>
+                      <Checkbox
+                        style={{ marginLeft: 'auto', marginRight: '0rem' }}
+                        id={type}
+                        name={type}
+                        value={false} // change info.value
+                        inputRef={{
+                          ...register(type, {
+                            onChange: () => {} // change info.onChange
+                          })
+                        }}
+                      />
+                    </MenuItem>
+                  );
+                })}
+              </AccordionDetails>
+            </Accordion>
             {/* <TextField
               variant="outlined"
               id="dispenserType"
@@ -349,55 +395,26 @@ function AddWaterTap({
 
             <FormGroup>
               <Typography>Helpful info</Typography>
-              <Grid container>
-                {WATER_HELPFUL_INFO.map(info => {
-                  return (
-                    <React.Fragment key={info.label}>
-                      <Grid item as="label" htmlFor={info.label} xs={8}>
-                        <Box
-                          height="100%"
-                          width="100%"
-                          display="flex"
-                          justifyContent="center"
-                          flexDirection="column"
-                        >
-                          <Typography
-                            style={{ paddingLeft: '2.5rem' }}
-                            fontSize={13}
-                          >
-                            {info.label}
-                          </Typography>
-                        </Box>
-                      </Grid>
-                      <Grid
-                        as="label"
-                        htmlFor={info.label}
-                        item
-                        align="center"
-                        xs={4}
-                      >
-                        <Box
-                          display="flex"
-                          justifyContent="center"
-                          flexDirection="column"
-                        >
-                          <Checkbox
-                            style={{ paddingLeft: '1.5rem' }}
-                            id={info.label}
-                            name={info.label}
-                            value={info.value}
-                            inputRef={{
-                              ...register(info.label, {
-                                onChange: info.onChange
-                              })
-                            }}
-                          />
-                        </Box>
-                      </Grid>
-                    </React.Fragment>
-                  );
-                })}
-              </Grid>
+              {WATER_HELPFUL_INFO.map(info => {
+                return (
+                  <MenuItem key={info.label} as="label" htmlFor={info.label}>
+                    <Typography style={{ paddingLeft: '0rem' }} fontSize={13}>
+                      {info.label}
+                    </Typography>
+                    <Checkbox
+                      style={{ marginLeft: 'auto', marginRight: '0rem' }}
+                      id={info.label}
+                      name={info.label}
+                      value={false} // change info.value
+                      inputRef={{
+                        ...register(info.label, {
+                          onChange: () => {} // change info.onChange
+                        })
+                      }}
+                    />
+                  </MenuItem>
+                );
+              })}
             </FormGroup>
             <TextField
               id="guidelines"