meal image upload working. had to force update for whatever reason

.idea/jsLibraryMappings.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <includedPredefinedLibrary name="Node.js Core" />
+  </component>
+</project>

client/src/components/Meals/EditMeal.jsx

@@ -0,0 +1,219 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, TextField, IconButton, Snackbar } from '@material-ui/core';
+// import MuiAlert from '@material-ui/lab/Alert';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { makeStyles } from '@material-ui/styles';
+import axios from 'axios';
+import { func, bool, string } from "prop-types";
+import dateformat from 'dateformat';
+
+const useStyles = makeStyles((theme) => ({
+  dateSelectionWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  dateLabel: {
+    marginTop: 'calc(10px + 1em)',
+    marginBottom: 'calc(10px + 1em)',
+  },
+  dateSelection: {
+    marginTop: '1em',
+    marginBottom: '1em',
+    marginLeft: 'auto',
+  },
+  form: {
+    padding: '0.5em',
+  },
+  textField: {
+    width: '100%',
+    marginTop: '1em',
+    marginBottom: '1em',
+  },
+  submitButton: {
+    margin: '1.5em 0 0',
+  },
+  actionButtonWrapper: {
+    justifyContent: "space-around",
+  },
+  actionButtons: {
+    marginLeft: 0,
+  },
+  actionButtonDelete: {
+    marginLeft: 0,
+    color: theme.palette.error.main,
+  },
+  snackbarOffset: {
+    bottom: '58px', // todo make adapt to bottomNavHeight
+  },
+  deleteSnackbar: {
+    backgroundColor: theme.palette.error.light,
+  },
+  readdSnackbar: {
+    backgroundColor: theme.palette.primary.light,
+  },
+}));
+
+const EditPlanItem = (props) => {
+  const classes = useStyles();
+
+  const { closeDialog, onDoneEditing, planItem, open } = props;
+
+  const [title, setTitle] = useState('');
+  const [date, setDate] = useState(new Date());
+  const [useDate, setUseDate] = useState(false);
+  const [gotEverything, setGotEverything] = useState(true);
+
+  const [deleteMessageVisible, setDeleteMessageVisible] = useState(false);
+  const [readdedMessageVisible, setReaddedMessageVisible] = useState(false);
+  const [deletedItem, setDeletedItem] = useState(null);
+
+  useEffect(() => {
+    console.log('in edit', planItem);
+    if (planItem) {
+      setTitle(planItem.title);
+      setUseDate(planItem.hasDate);
+      setDate(planItem.date ? new Date(planItem.date) : new Date());
+      setGotEverything(planItem.gotEverything);
+    }
+  }, [planItem])
+
+  const resetInputs = () => {
+    setTitle('');
+    setDate(null);
+    setUseDate(false);
+    setGotEverything(true);
+  }
+
+  const editPlan = () => {
+    console.log('trying to edit', title);
+    if (title) {
+      const newPlan = {
+        title,
+        date: useDate ? new Date(date) : null,
+        gotEverything,
+        tags: [],
+        hasDate: useDate,
+      }
+      console.log(newPlan);
+
+      axios.post('http://localhost:5000/plans/edit/' + planItem._id, newPlan).then((result) => {
+        console.log('edit request sent', result.data);
+        onDoneEditing();
+      });
+
+      resetInputs();
+    }
+  }
+
+  const deletePlan = () => {
+
+    axios.post('http://localhost:5000/plans/delete/' + planItem._id).then((result) => {
+      setDeletedItem(planItem);
+      setDeleteMessageVisible(true);
+      console.log('delete request sent', result.data);
+      resetInputs();
+      onDoneEditing();
+      closeDialog();
+    });
+  }
+
+  const undoDeletion = () => {
+    axios.post('http://localhost:5000/plans/add', deletedItem).then((result) => {
+      console.log('re-add request sent', result.data);
+      setDeleteMessageVisible(false);
+      setReaddedMessageVisible(true);
+      onDoneEditing();
+    });
+  }
+
+  return (
+    <>
+      <Dialog open={open && planItem} onClose={closeDialog} aria-labelledby="form-dialog-title" onKeyDown={e => {
+        if (e.keyCode === 13) {
+          // validateForm();
+          closeDialog();
+        }
+      }}>
+        <DialogTitle id="form-dialog-title">Edit Plan</DialogTitle>
+        <DialogContent>
+          <form noValidate className={classes.form}>
+            <TextField className={classes.textField} value={title} onChange={e => setTitle(e.target.value)} label="Title" variant="outlined" autoFocus />
+            <br />
+            <div className={classes.dateSelectionWrapper}>
+              <FormControlLabel className={classes.dateLabel} label="Date" control={
+                <Checkbox checked={useDate} onChange={e => setUseDate(e.target.checked)} color="primary" />
+              } />
+              {useDate ?
+                <TextField className={classes.dateSelection}
+                           value={dateformat(date, 'yyyy-mm-dd')}
+                           onChange={e => setDate(e.target.value)}
+                           label="Due Date"
+                           type="date"
+                           variant="outlined"
+                           InputLabelProps={{ shrink: true, }} />
+                : ''}
+            </div>
+            <FormControlLabel label="Got everything?" control={
+              <Checkbox checked={gotEverything} onChange={e => setGotEverything(e.target.checked)} color="primary" />
+            } />
+          </form>
+          <DialogActions className={classes.actionButtonWrapper}>
+            <Button className={classes.actionButtons} color="primary" onClick={closeDialog}>Cancel</Button>
+            {/*<Button color="secondary" onClick={() => {}} variant="outlined">Delete</Button>*/}
+            <IconButton className={classes.actionButtonDelete} onClick={deletePlan} aria-label="delete">
+              <DeleteIcon />
+            </IconButton>
+            <Button className={classes.actionButtons} color="primary" variant="contained" onClick={() => {
+              editPlan();
+              closeDialog();
+            }}>Save</Button>
+          </DialogActions>
+        </DialogContent>
+      </Dialog>
+
+
+      <Snackbar open={deleteMessageVisible}
+                autoHideDuration={3000}
+                onClose={() => {setDeleteMessageVisible(false); }}
+                message={`Plan ${deletedItem ? deletedItem.title + ' ' : ''}deleted!`}
+                action={
+                  <Button color="inherit" size="small" onClick={undoDeletion}>
+                    Undo
+                  </Button>
+                }
+                className={classes.snackbarOffset}
+                ContentProps={{ className: classes.deleteSnackbar }} />
+
+      <Snackbar open={readdedMessageVisible}
+                autoHideDuration={1000}
+                onClose={() => {setReaddedMessageVisible(false); }}
+                message={`Plan ${deletedItem ? '"' + deletedItem.title + '" ' : ''}re-added!`}
+                className={classes.snackbarOffset}
+                ContentProps={{ className: classes.readdSnackbar }} />
+    </>
+  );
+}
+
+EditPlanItem.propTypes = {
+  planItem: {
+    title: string,
+    gotEverything: bool,
+    hasDate: bool,
+    date: string,
+  },
+  open: bool.isRequired,
+  onDoneEditing: func.isRequired,
+  closeDialog: func.isRequired,
+}
+
+EditPlanItem.defaultProps = {
+  planItem: {
+    title: '',
+    gotEverything: false,
+    hasDate: false,
+    date: null,
+  },
+}
+
+export default EditPlanItem;
+