emilia/client/src/components/Meals/AddMeal.jsx

import React, { useEffect, useState } from 'react';
import { Button } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';
import FontButton from "../Buttons/FontButton";
import Navbar from "../Navbar";
import { useHistory } from "react-router-dom";
import BackButton from "../Buttons/BackButton";
import { useTranslation } from 'react-i18next';
import { deleteAllImagesFromMeal } from "./meals.util";
import EditMealCore from "./EditMealCore";
import { withAuthenticationRequired, useAuth0 } from "@auth0/auth0-react";
import Loading from "../Loading";

const useStyles = makeStyles(theme => ({
  form: {
    padding: '1rem 2.5rem',
    maxHeight: `calc(100% - 2rem - ${process.env.REACT_APP_NAV_TOP_HEIGHT}px)`,
    overflowY: 'auto',
  },
  submitButton: {
    margin: '0.5em 0 0 auto',
    display: 'block',
  }
}));

const serverURL = process.env.REACT_APP_SERVER_URL;

const AddMeal = (props) => {
  const classes = useStyles();
  let history = useHistory();
  const { t } = useTranslation();
  const { user } = useAuth0();

  const { onDoneAdding } = props;

  const emptyMeal = {
    _id: uuidv4(),
    userId: user ? user.sub : '',
    title: '',
    images: [],
    recipeLink: '',
    comment: '',
  };

  useEffect(() => {
    updateMeal('userId', user.sub);
  }, [user]);

  const [meal, setMeal] = useState(emptyMeal);

  const updateMeal = (key, value) => {
    setMeal(prevState => ({
      ...prevState,
      [key]: value,
    }));
  }

  const addNewMeal = (event) => {
    event.preventDefault();
    if (meal.title) {
      axios.post(serverURL + '/meals/add', meal, {})
           .then(res => { // then print response status
             console.log('added meal', res);
             onDoneAdding();
           }).catch(err => {console.log(err)});
    }
  }

  return (
    <>
      <Navbar pageTitle={t('New Meal')} leftSideComponent={<BackButton onClick={() => {
        deleteAllImagesFromMeal(meal._id, () => {updateMeal('images', []);});
        history.goBack();
      }} />} rightSideComponent={meal.title ? <FontButton onClick={addNewMeal} label={t('Done')} /> : ''} />

      <form noValidate onSubmit={addNewMeal} className={classes.form}>
        <EditMealCore updateMeal={updateMeal} meal={meal} />
        <Button type="submit" disabled={!meal.title} className={classes.submitButton} variant='contained' color='primary'>{t('add')}</Button>
      </form>

    </>
  );
}

export default withAuthenticationRequired(AddMeal, {
  onRedirecting: () => <Loading />,
});