add meal import and remove uploads from versioning

.gitignore

@@ -4,3 +4,4 @@ client/.eslintcache
 server/.env
 server/uploads/mealImages/1616522970276-ACtC-3d5MANMrywGr3uAd1-Z9NgpEVpKsyyQo7-MlgztiXantk3cWjVIrjPWmOLoQxybnyv7WGa0dpWCkda2YgONk2jjIv8APM5k-j39dezcI8X4ANUuHB-KniG4auchmdP-q2jUngfCSkYnPgfvXLNrlYcYEQ=s640-no.jpg
 client/build/
+server/uploads/

client/.env

@@ -1,4 +1,4 @@
-REACT_APP_SERVER_URL=https://emealay-server.herokuapp.com
+REACT_APP_SERVER_URL=http://localhost:5000
 REACT_APP_NAV_BOTTOM_HEIGHT=45
 REACT_APP_NAV_TOP_HEIGHT=45
 REACT_APP_GRID_LIST_ROW_HEIGHT=125

client/package-lock.json

@@ -15037,9 +15037,9 @@
       }
     },
     "ssri": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz",
-      "integrity": "sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
       "requires": {
         "minipass": "^3.1.1"
       }

client/src/components/Buttons/InnerBoxCloseX.jsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
     '&:hover': {
       color: theme.palette.error.main,
       cursor: 'pointer',
-      boxShadow: '0 0 0.5rem ' + theme.palette.background.default,
+      boxShadow: '0 0 0.5rem ' + theme.myColors.white,
     },
   },
   closeXIcon: {
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.error.main,
   },
   x: {
-    color: theme.palette.background.default,
+    color: theme.myColors.white,
   }
 }));
 

client/src/components/Buttons/InnerBoxSelection.jsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
     '&:hover': {
       color: theme.palette.primary.main,
       cursor: 'pointer',
-      boxShadow: '0 0 0.5rem ' + theme.palette.background.default,
+      boxShadow: '0 0 0.5rem ' + theme.myColors.white,
     },
   }),
   closeXIcon: {
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.primary.main,
   },
   x: {
-    color: theme.palette.background.default,
+    color: theme.myColors.white,
   }
 }));
 

client/src/components/ContentWrapper.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import NavTabs from "./NavTabs";
 import Social from "./Social/Social";
 import Settings from "./Settings/Settings";
@@ -30,9 +30,6 @@ const ContentWrapper = (props) => {
   const { activeTab } = props;
   let history = useHistory();
 
-
-  let { path, url } = useRouteMatch();
-  console.log(path, url);
   const goToPlans = () => {history.push('/plans');};
   const goToMeals = () => {history.push('/meals');};
 

client/src/components/Images/CircleImage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { string } from "prop-types";
+import { bool, string } from "prop-types";
 import { makeStyles } from '@material-ui/styles';
-import Box from "@material-ui/core/Box";
+import { Box, CircularProgress } from "@material-ui/core";
 
 const useStyles = makeStyles({
   imageCropper: {
@@ -10,26 +10,26 @@ const useStyles = makeStyles({
     position: "relative",
     overflow: "hidden",
     borderRadius: '100%',
+    display: 'flex',
+    alignItems: "center",
+    justifyContent: "center",
   },
   image: {
     display: "block",
-    position: "absolute",
     height: '100%',
     width: "auto",
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
   },
 });
 
 /** Image cropped to circular shape */
 const CircleImage = (props) => {
   const classes = useStyles();
-  const { src, altText } = props;
+  const { src, altText, loading } = props;
 
   return (
     <Box className={classes.imageCropper}>
-      <img src={src} alt={altText} className={classes.image} />
+      {loading ? <CircularProgress color="secondary" style={{ width: '110px', height: '110px', }} /> :
+        <img src={src} alt={altText} className={classes.image} />}
     </Box>
   );
 }
@@ -39,6 +39,12 @@ CircleImage.propTypes = {
   src: string.isRequired,
   /** alternative text if image cannot be displayed */
   altText: string.isRequired,
+  /** shows progress instead of image */
+  loading: bool,
+};
+
+CircleImage.propTypes = {
+  loading: false,
 };
 
 export default CircleImage;

client/src/components/Images/ImageCarousel.jsx

@@ -40,8 +40,8 @@ const ImageCarousel = (props) => {
 
   const slides = images.map((image, index) => (
     <Box key={index}>
-      <Link href={serverURL + image.path}>
-        <img src={serverURL + image.path} alt={image.name} className={classes.carouselItemImage} />
+      <Link href={image.url}>
+        <img src={image.url} alt={image.name} className={classes.carouselItemImage} />
       </Link>
     </Box>
   ));

client/src/components/Images/ImageGrid.jsx

@@ -6,8 +6,6 @@ import { GridList, GridListTile } from "@material-ui/core";
 import InnerBoxCloseX from "../Buttons/InnerBoxCloseX";
 import InnerBoxSelection from "../Buttons/InnerBoxSelection";
 
-const serverURL = process.env.REACT_APP_SERVER_URL;
-
 const useStyles = makeStyles((theme) => ({
   noButton: {
     background: 'none',
@@ -70,12 +68,12 @@ const ImageGrid = (props) => {
   const getPhotos = () => {
     let photoBoxes = [];
     if (images && images.length > 0) {
-      photoBoxes = images.map((photo, index) => {
+      photoBoxes = images.map((image, index) => {
         return (
-          <GridListTile key={index} cols={photo.isMain ? 2 : 1} >
-            <img src={serverURL + photo.path} alt={photo.name} onClick={() => openImage(photo, index)}/>
-            {allowChoosingMain ? <InnerBoxSelection selected={photo.isMain} onClick={() => chooseAsMain(photo)} /> : null}
-            {allowDelete ? <InnerBoxCloseX onClick={() => deletePhoto(photo)} /> : null}
+          <GridListTile key={index} cols={image.isMain ? 2 : 1} >
+            <img src={image.url} alt={image.name} onClick={() => openImage(image, index)}/>
+            {allowChoosingMain ? <InnerBoxSelection selected={image.isMain} onClick={() => chooseAsMain(image)} /> : null}
+            {allowDelete ? <InnerBoxCloseX onClick={() => deletePhoto(image)} /> : null}
           </GridListTile>
         );
       });
@@ -85,7 +83,7 @@ const ImageGrid = (props) => {
 
   return (
     <>
-      <GridList cellHeight={process.env.REACT_APP_GRID_LIST_ROW_HEIGHT} className={classes.gridList} cols={3}>
+      <GridList cellHeight={Number.parseInt(process.env.REACT_APP_GRID_LIST_ROW_HEIGHT)} className={classes.gridList} cols={3}>
         {props.children}
         {getPhotos()}
       </GridList>
@@ -98,7 +96,7 @@ ImageGrid.propTypes = {
   /** all Images to display, including name (that will be the altText) and relative path to serverURL, as well as isMain boolean value (only necessary if allowChoosingMain === true) */
   images: arrayOf(shape({
     name: string,
-    path: string,
+    url: string,
     isMain: bool,
   })),
   /** should image deletion be allowed? (Otherwise delete button will not be shown) */

client/src/components/Images/ImageUpload.jsx

@@ -2,12 +2,13 @@ import React, { useState } from 'react';
 import PhotoDropzone from './PhotoDropzone';
 import ImageGrid from './ImageGrid.jsx';
 import axios from "axios";
-import { arrayOf, bool, func, oneOfType, shape, string } from "prop-types";
+import { array, arrayOf, bool, func, oneOfType, shape, string } from "prop-types";
 import { makeStyles } from "@material-ui/styles";
 import { Box, GridList, GridListTile, Snackbar } from "@material-ui/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCamera, faCircle } from "@fortawesome/free-solid-svg-icons";
 import CircleImage from "./CircleImage";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 
@@ -47,31 +48,6 @@ const useStyles = makeStyles((theme) => ({
     },
     borderRadius: '100%',
   },
-  photoRow: {
-    marginTop: '-0.5rem',
-    paddingTop: '0.5rem',
-    marginBottom: '0.25rem',
-    width: '100%',
-    borderRadius: '0.25rem',
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    display: 'flex',
-    flexWrap: 'nowrap',
-    flex: 1,
-    color: theme.palette.secondary.main,
-  },
-  photoBoxPlaceholder: {
-    display: 'inlineBlock',
-    height: '7rem',
-    maxHeight: '7rem',
-    width: '4.5rem',
-    flex: '0 0 auto',
-    border: '1px solid ' + theme.palette.secondary.main,
-    borderRadius: '0.25rem',
-    margin: '0.5rem',
-    position: 'relative',
-    wordWrap: 'anywhere',
-  },
   gridList: {
     width: '100%',
     marginTop: '0.5rem !important',
@@ -82,6 +58,16 @@ const useStyles = makeStyles((theme) => ({
     padding: '2px',
     height: process.env.REACT_APP_GRID_LIST_ROW_HEIGHT + 4 + 'px',
   },
+  placeholderTile: {
+    height: 'calc(100% - 4px)',
+    width: 'calc(100% - 4px)',
+    border: '2px double ' + theme.myColors.white,
+    color: theme.myColors.white,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    opacity: 0.7,
+  },
   cameraOverlay: {
     position: "absolute",
     height: '100%',
@@ -112,7 +98,8 @@ const useStyles = makeStyles((theme) => ({
 const ImageUpload = (props) => {
   const classes = useStyles();
 
-  const { uploadedImages, category, categoryId, onChangeUploadedImages, multiple, imageName, useSingleUploadOverlay } = props;
+  const { uploadedImages, category, categoryId, onChangeUploadedImages, multiple, imageName, useSingleUploadOverlay, tags } = props;
+  const altText = imageName || category;
 
   const [photosToUpload, setPhotosToUpload] = useState([]);
   const [rejectMessageVisible, setRejectMessageVisible] = useState(false);
@@ -140,7 +127,7 @@ const ImageUpload = (props) => {
   const uploadImages = (imagesToUpload) => {
     console.log('trying to upload images', imagesToUpload, ' to ', serverURL);
     setPhotosToUpload(imagesToUpload);
-    Array.from(imagesToUpload).forEach((image) => {
+    Array.from(imagesToUpload).forEach((image, index) => {
       const data = new FormData();
       let folderParam = '';
       if (category) {
@@ -148,8 +135,13 @@ const ImageUpload = (props) => {
         data.append('categoryId', categoryId);
         folderParam = category;
       }
+      if (tags) data.append('tags', tags);
+      const name = index > 0 ? altText + index : altText;
+      data.append('name', name);
       data.append('image', image);
 
+      onChangeUploadedImages(uploadedImages.filter(i => i !== image))
+
       axios.post(serverURL + "/images/addImage/" + folderParam, data, {})
            .then(res => {
              console.log('result of adding image', res);
@@ -172,10 +164,7 @@ const ImageUpload = (props) => {
   const deleteImage = (image) => {
     console.log('trying to Reset Image', image);
 
-    const data = new FormData();
-    data.append('path', image.path);
-    const folderParam = category || '';
-    axios.post(serverURL + "/images/deleteImage/" + folderParam + '/' + image._id, data)
+    axios.post(serverURL + "/images/deleteImage", image)
          .then(res => {
            console.log('result of deleting planItem image', res);
            const newUploadedImages = uploadedImages.filter(i => i !== image);
@@ -204,9 +193,8 @@ const ImageUpload = (props) => {
     let placeholderBoxes = [];
     if (photosToUpload && photosToUpload.length > 0) {
       placeholderBoxes = photosToUpload.map((photo, index) => {
-        return <GridListTile key={'placeholder' + index} cols={1} className={classes.dropzoneTile}>
-          {/*<Box className={classes.photoBoxPlaceholder} key={i}>{photo.name}</Box>;*/}
-          {photo.name}
+        return <GridListTile key={'placeholder' + index} cols={index === 0 ? 2 : 1} className={classes.dropzoneTile}>
+          <Box className={classes.placeholderTile}><CircularProgress color="inherit" /></Box>
         </GridListTile>
       });
     }
@@ -219,7 +207,6 @@ const ImageUpload = (props) => {
       setRejectMessageVisible(false);
       setRejectMessages([])
     }} message={m} className={classes.snackbarOffset} ContentProps={{ className: classes.rejectSnackbar }} />);
-
   return (
     <>
       {multiple ?
@@ -231,7 +218,7 @@ const ImageUpload = (props) => {
                              handleAcceptedFiles={handleAcceptedFiles}
                              handleRejectedFiles={handleRejectedFiles}
                              dropZoneStyles={classes.photoDropzoneMultiple} />
-            </GridListTile>,
+            </GridListTile>
             {getPhotoPlaceholders()}
           </ImageGrid>
         </GridList>
@@ -241,7 +228,7 @@ const ImageUpload = (props) => {
                          handleRejectedFiles={handleRejectedFiles}
                          dropZoneStyles={uploadedImages.length === 0 ? classes.photoDropzoneSingleEmpty : classes.photoDropzoneSingle}
                          usePlusIcon={uploadedImages.length === 0}>
-            <CircleImage src={uploadedImages[0]} altText={imageName} />
+            <CircleImage src={uploadedImages[0]} altText={altText} loading={photosToUpload.length>0} />
             {useSingleUploadOverlay ? <Box className={classes.cameraOverlay}>
               <FontAwesomeIcon className={classes.overlayIcon} icon={faCamera} mask={faCircle} transform="shrink-8" /></Box> : null}
           </PhotoDropzone>
@@ -261,7 +248,7 @@ ImageUpload.propTypes = {
    */
   uploadedImages: arrayOf(oneOfType([shape({
     name: string,
-    path: string,
+    url: string,
   }), string])),
   /** category/folder name of the image, e.g., mealImages or userProfile (make sure that folder exists in uploads folder!) */
   category: string.isRequired,
@@ -269,16 +256,19 @@ ImageUpload.propTypes = {
   categoryId: string.isRequired,
   /** function that updates the image(s) */
   onChangeUploadedImages: func.isRequired,
-  /** if multiple === false this name is the alt tag of the single uploaded image */
+  /** if multiple === false this name is the alt tag of the single uploaded image, if multiple === true, an index number will be appended.
+   * if not supplied, the category will be used */
   imageName: string,
+  /** array of tags that will be given to the image (optional) */
+  tags: array,
   /** overlay single image upload area with a transparent camera icon */
   useSingleUploadOverlay: bool,
 }
 
 ImageUpload.defaultProps = {
   multiple: false,
-  string: '',
   uploadedImages: [],
+  tags: [],
   useSingleUploadOverlay: false,
 }
 

client/src/components/Meals/AddMeal.jsx

@@ -1,13 +1,12 @@
 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 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 { addMeal, deleteAllImagesFromMeal } from "./meals.util";
 import EditMealCore from "./EditMealCore";
 import { useAuth0 } from "@auth0/auth0-react";
 import { withLoginRequired } from "../util";
@@ -16,7 +15,7 @@ import DoneButton from "../Buttons/DoneButton";
 
 const useStyles = makeStyles(theme => ({
   form: {
-    padding: '1rem 2.5rem',
+    padding: '1rem 1.5rem',
     maxHeight: `calc(100% - 2rem - ${process.env.REACT_APP_NAV_TOP_HEIGHT}px)`,
     overflowY: 'auto',
   },
@@ -26,8 +25,6 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const serverURL = process.env.REACT_APP_SERVER_URL;
-
 /** page that allows adding a meal */
 const AddMeal = (props) => {
   const classes = useStyles();
@@ -65,13 +62,7 @@ const AddMeal = (props) => {
 
   const addNewMeal = (event) => {
     event.preventDefault();
-    if (meal.title) {
-      axios.post(serverURL + '/meals/add', meal, {})
-           .then(res => {
-             console.log('added meal', res);
-             if (onDoneAdding) onDoneAdding();
-           }).catch(err => {console.log(err)});
-    }
+    addMeal(meal, onDoneAdding);
   }
 
   return (
@@ -79,7 +70,7 @@ const AddMeal = (props) => {
       <Navbar pageTitle={t('New Meal')} leftSideComponent={<BackButton onClick={() => {
         deleteAllImagesFromMeal(meal._id, () => {updateMeal('images', []);});
         history.goBack();
-      }} />} rightSideComponent={meal.title ? <DoneButton onClick={addNewMeal}/> : null} />
+      }} />} rightSideComponent={meal.title ? <DoneButton onClick={addNewMeal} /> : null} />
 
       <form noValidate onSubmit={addNewMeal} className={classes.form}>
         <EditMealCore updateMeal={updateMeal} meal={meal} />

client/src/components/Meals/EditMeal.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dialog, Grid } from '@material-ui/core';
+import { Button, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
 import { arrayOf, bool, func, shape, string } from "prop-types";
@@ -9,11 +9,11 @@ import EditMealCore from "./EditMealCore";
 import { deleteAllImagesFromMeal } from "./meals.util";
 import Navbar from "../Navbar";
 import BackButton from "../Buttons/BackButton";
-import { SlidingTransitionLeft } from "../util/SlidingTransition";
 import { withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
 import useSnackbars from "../util/useSnackbars";
 import DoneButton from "../Buttons/DoneButton";
+import FullScreenDialog from "../util/FullScreenDialog";
 
 const useStyles = makeStyles((theme) => ({
   form: {
@@ -120,7 +120,7 @@ const EditMeal = (props) => {
     <>
 
       {meal ?
-        <Dialog open={open} fullScreen onClose={closeDialog} TransitionComponent={SlidingTransitionLeft}>
+        <FullScreenDialog open={open} onClose={closeDialog}>
           <Navbar pageTitle={t('Edit Meal')}
                   leftSideComponent={<BackButton onClick={closeDialog} />}
                   rightSideComponent={meal.title ? <DoneButton onClick={editAndClose} /> : null}
@@ -139,7 +139,7 @@ const EditMeal = (props) => {
               </Grid>
             </Grid>
           </form>
-        </Dialog>
+        </FullScreenDialog>
         : ''}
 
       {Snackbars}

client/src/components/Meals/EditMealCore.jsx

@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
 import { arrayOf, bool, func, shape, string } from "prop-types";
 import { useTranslation } from "react-i18next";
 import ImageUpload from "../Images/ImageUpload";
@@ -8,39 +6,11 @@ import { withAuthenticationRequired } from "@auth0/auth0-react";
 import { LoadingBody } from "../Loading";
 import SelectMealCategory from "./SelectMealCategory";
 import SelectMealTags from "./SelectMealTags";
-
-const useStyles = makeStyles((theme) => ({
-  textField: {
-    width: '100%',
-    marginTop: '0.5rem',
-    marginBottom: '0.5rem',
-  },
-  outlinedInput: {
-    padding: '14px',
-  },
-  errorTextField: {
-    '& .MuiOutlinedInput-notchedOutline': {
-      borderColor: theme.palette.error.main,
-    }
-  },
-  chips: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  listItemIcon: {
-    fontSize: "1rem",
-    color: theme.palette.text.primary,
-    minWidth: '2rem',
-  },
-  chip: {
-    margin: 2,
-  },
-}));
+import OutlinedTextField from "../util/OutlinedTextField";
 
 /** component is used by AddMeal and EditMeal and provides their shared core elements: text and photo input.
  *  Does not handle communication to server */
 const EditMealCore = (props) => {
-  const classes = useStyles();
   const { t } = useTranslation();
 
   const {
@@ -57,9 +27,6 @@ const EditMealCore = (props) => {
     isSecondary,
   } = props;
 
-  // const colorA = isSecondary ? "primary" : "secondary";
-  const colorB = isSecondary ? "secondary" : "primary";
-
   const [, updateState] = useState();
   const forceUpdate = React.useCallback(() => updateState({}), []);
 
@@ -71,39 +38,15 @@ const EditMealCore = (props) => {
 
   return (
     <>
-      <TextField className={classes.textField}
-                 inputProps={{className: classes.outlinedInput}}
-                 value={title}
-                 color={colorB}
-                 name="title"
-                 onChange={e => updateMeal('title', e.target.value)}
-                 label={t('Meal Title')}
-                 variant="outlined"
-                 autoFocus
-                 required />
-      <TextField className={classes.textField}
-                 inputProps={{className: classes.outlinedInput}}
-                 color={colorB}
-                 value={recipeLink}
-                 name="recipeLink"
-                 onChange={e => updateMeal('recipeLink', e.target.value)}
-                 label={t('Link to Recipe')}
-                 variant="outlined" />
-      <TextField multiline
-                 rowsMax={10}
-                 color={colorB}
-                 className={classes.textField}
-                 value={comment}
-                 name="comment"
-                 onChange={e => updateMeal('comment', e.target.value)}
-                 label={t('Comment')}
-                 variant="outlined" />
+      <OutlinedTextField name="title" value={title} label={t('Meal Title')} onChange={e => updateMeal('title', e.target.value)} secondary={isSecondary} autoFocus required />
+      <OutlinedTextField name="recipeLink" value={recipeLink} label={t('Link to Recipe')} onChange={e => updateMeal('recipeLink', e.target.value)} secondary={isSecondary} />
+      <OutlinedTextField multiline rowsMax={10} name="comment" label={t('Comment')} value={comment} onChange={e => updateMeal('comment', e.target.value)} secondary={isSecondary} />
 
       <SelectMealCategory currentCategory={category} updateMeal={updateMeal} />
 
       <SelectMealTags currentTags={tags} updateTags={(newTags) => {updateMeal('tags', newTags)}} allowCreate />
 
-      <ImageUpload multiple uploadedImages={images} category="mealImages" categoryId={mealId} onChangeUploadedImages={onChangeUploadedImages} />
+      <ImageUpload multiple uploadedImages={images} category="mealImages" categoryId={mealId} onChangeUploadedImages={onChangeUploadedImages} imageName={title} tags={tags} />
     </>
   );
 }
@@ -114,6 +57,7 @@ EditMealCore.propTypes = {
   /** meal to be edited */
   meal: shape({
     _id: string,
+    userId: string,
     title: string,
     images: arrayOf(shape({
       name: string,

client/src/components/Meals/MealAvatar.jsx

@@ -33,7 +33,7 @@ const MealAvatar = (props) => {
   let avatar;
   if (meal.images.length > 0) {
     const image = getMainImage(meal);
-    avatar = <Avatar alt={image.name} src={serverURL + image.path} />;
+    avatar = <Avatar alt={image.name} src={image.url} />;
   } else {
     avatar = (<Avatar className={classes.backgroundColor}><FontAwesomeIcon icon={faUtensils} /></Avatar>);
   }
@@ -43,6 +43,7 @@ const MealAvatar = (props) => {
 MealAvatar.propTypes = {
   meal: shape({
     _id: string,
+    userId: string,
     title: string,
     images: arrayOf(shape({
       name: string,

client/src/components/Meals/MealDetailView.jsx

@@ -11,6 +11,9 @@ import EditButton from "../Buttons/EditButton";
 import FullScreenDialog from "../util/FullScreenDialog";
 import { fetchAndUpdateMeal } from "./meals.util";
 import ShareButton from "../util/ShareButton";
+import { useAuth0 } from "@auth0/auth0-react";
+import { getUserById } from "../Settings/settings.util";
+import MealImportButton from "./MealImportButton";
 
 const useStyles = makeStyles((theme) => ({
   content: {
@@ -31,13 +34,30 @@ const useStyles = makeStyles((theme) => ({
 const MealDetailView = (props) => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const { user } = useAuth0();
 
   const { meal: initialMeal, open, closeDialog, onDoneEditing, allowEditing, extern } = props;
 
+  const [own, setOwn] = useState(false);
   const [meal, setMeal] = useState(initialMeal);
+  const [/*mealUser*/, setMealUser] = useState(null);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [mealBeingEdited, setMealBeingEdited] = useState(null);
 
+  useEffect(() => {
+    if (meal) {
+      getUserById(meal.userId, setMealUser);
+    }
+  }, [meal]);
+
+  useEffect(() => {
+    if (user && meal) {
+      setOwn(user.sub === meal.userId);
+    } else {
+      setOwn(false);
+    }
+  }, [user, meal]);
+
   useEffect(() => {
     setMeal(initialMeal);
   }, [initialMeal]);
@@ -59,15 +79,13 @@ const MealDetailView = (props) => {
     fetchMeal();
   }
 
-  const rightSideComponent = <>
-    {allowEditing && <EditButton onClick={() => {openEditItemDialog(meal)}} />}
-  </>;
-
   return (
     <>
       {meal ?
         <FullScreenDialog open={open} onClose={closeDialog}>
-          <Navbar pageTitle={t('Meal')} rightSideComponent={rightSideComponent} leftSideComponent={extern ? null : <BackButton onClick={closeDialog} />} />
+          <Navbar pageTitle={t('Meal')}
+                  rightSideComponent={own ? allowEditing && <EditButton onClick={() => {openEditItemDialog(meal)}} /> : <MealImportButton meal={meal} />}
+                  leftSideComponent={extern ? null : <BackButton onClick={closeDialog} />} />
           <Box className={classes.content}>
             <Grid container spacing={0} justify="space-between" alignItems="flex-start" wrap="nowrap">
               <Grid item xs className={classes.mealTitle}>

client/src/components/Meals/MealImportButton.jsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from 'react';
+import { Button, CircularProgress, Grid, IconButton, Snackbar } from "@material-ui/core";
+import { CheckCircle } from "@material-ui/icons";
+import { v4 as uuidv4 } from 'uuid';
+import { useTranslation } from "react-i18next";
+import { useAuth0 } from "@auth0/auth0-react";
+import { withLoginRequired } from "../util";
+import { arrayOf, shape, string } from "prop-types";
+import { makeStyles } from "@material-ui/styles";
+import { faChevronRight, faFileImport } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import EditMealCore from "./EditMealCore";
+import FullScreenDialog from "../util/FullScreenDialog";
+import Navbar from "../Navbar";
+import DoneButton from "../Buttons/DoneButton";
+import BackButton from "../Buttons/BackButton";
+import { addMeal, copyMealImages, deleteAllImagesFromMeal } from "./meals.util";
+import Alert from "@material-ui/lab/Alert";
+import { useHistory } from "react-router-dom";
+
+const useStyles = makeStyles(theme => ({
+  importButton: {
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+    fontSize: '1.5rem',
+    color: theme.palette.background.default,
+  },
+  form: {
+    padding: '1rem 2.5rem',
+    maxHeight: `calc(100% - 2rem - ${process.env.REACT_APP_NAV_TOP_HEIGHT}px)`,
+    overflowY: 'auto',
+  },
+  snackbar: {
+    bottom: 10 + 'px',
+    color: theme.palette.primary.contrastText,
+  },
+  successSnackbar: {
+    backgroundColor: theme.palette.primary[theme.palette.type],
+    display: "flex",
+    alignItems: "center",
+  },
+}));
+
+/** Page that displays a user's own meals and adds a Navbar to the Meals list that allows adding a meal */
+const MealImportButton = (props) => {
+  const { t } = useTranslation();
+  const { user } = useAuth0();
+  const classes = useStyles();
+  const { meal } = props;
+  let history = useHistory();
+
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [newMeal, setNewMeal] = useState(meal);
+  const [importAllowed, setImportAllowed] = useState(false);
+  const [successMessageOpen, setSuccessMessageOpen] = useState(false);
+
+  useEffect(() => {
+    if (importDialogOpen && meal && user) {
+      setImportAllowed(false);
+      const { title, recipeLink, comment } = meal;
+      const mealCopy = {
+        _id: uuidv4(),
+        userId: user.sub,
+        title,
+        recipeLink,
+        comment,
+        category: null,
+        tags: [],
+      };
+
+      // const mainImage = meal.images.find(i => i.isMain);
+
+      copyMealImages(meal._id, mealCopy._id, (newImages) => {
+        /*newImages.forEach(i => {
+          i.isMain = i.name === mainImage.name;
+        });*/
+        updateMeal('images', newImages);
+        setImportAllowed(true);
+      });
+      setNewMeal(mealCopy);
+    }
+  }, [importDialogOpen, user, meal]);
+
+  const updateMeal = (key, value) => {
+    setNewMeal(prevState => ({
+      ...prevState,
+      [key]: value,
+    }));
+  }
+
+  const submitImport = (event) => {
+    event.preventDefault();
+    console.log('new meal', newMeal);
+    addMeal(newMeal, () => {
+      console.log('meal imported');
+      setSuccessMessageOpen(true);
+      closeDialog();
+    });
+  }
+
+  if (!user) {
+    return null;
+  } else if (user.sub === meal.userId) {
+    return null;
+  }
+
+  function importMeal() {
+    setImportDialogOpen(true);
+  }
+
+  const goToMeals = () => {history.push('/meals');};
+
+  const cancel = () => {
+    deleteAllImagesFromMeal(newMeal._id);
+    closeDialog();
+  }
+
+  const closeDialog = () => {
+    setImportDialogOpen(false);
+  };
+
+  return <>
+    <IconButton title={t('Import into my meals')} onClick={importMeal} className={classes.importButton}><FontAwesomeIcon icon={faFileImport} /></IconButton>
+    <FullScreenDialog open={importDialogOpen} onClose={closeDialog}>
+      <Navbar pageTitle={t('Import Meal')}
+              secondary
+              rightSideComponent={importAllowed ? (meal.title ? <DoneButton onClick={submitImport} /> : null) : <CircularProgress color="inherit" size={25} />}
+              leftSideComponent={<BackButton onClick={cancel} />} />
+      <form noValidate onSubmit={submitImport} className={classes.form}>
+        <EditMealCore meal={newMeal} updateMeal={updateMeal} isSecondary />
+        <Grid container spacing={0} justify="space-between" alignItems="center" wrap="nowrap">
+          <Grid item xs>
+            <Button type="button" color="secondary" variant="outlined" onClick={cancel}>{t('Cancel')}</Button>
+          </Grid>
+          <Grid item xs style={{ textAlign: 'right' }}>
+            <Button type="submit"
+                    disabled={!meal.title || !importAllowed}
+                    variant='contained'
+                    color='primary'
+                    startIcon={importAllowed ? <FontAwesomeIcon icon={faFileImport} /> : <CircularProgress color="inherit" size={20} />}>
+              {t('Import')}
+            </Button>
+          </Grid>
+        </Grid>
+
+      </form>
+    </FullScreenDialog>
+    <Snackbar open={successMessageOpen} autoHideDuration={4000} onClose={() => {
+      setSuccessMessageOpen(false);
+    }} className={classes.snackbar}>
+      <Alert action={<Button color="inherit" variant="outlined" size="small" endIcon={<FontAwesomeIcon icon={faChevronRight} />} onClick={goToMeals}>{t('Go to my meals')}</Button>}
+             icon={<CheckCircle />}
+             variant="filled"
+             className={classes.successSnackbar}>
+        {t('Successfully imported meal')}
+      </Alert>
+    </Snackbar>
+  </>;
+}
+
+MealImportButton.propTypes = {
+  /** meal to be imported */
+  meal: shape({
+    _id: string,
+    userId: string,
+    title: string,
+    images: arrayOf(shape({
+      name: string,
+      path: string,
+    })),
+    recipeLink: string,
+    comment: string,
+    category: string,
+    tags: arrayOf(string),
+  }).isRequired,
+}
+
+export default withLoginRequired(MealImportButton);

client/src/components/Meals/Meals.jsx

@@ -4,7 +4,8 @@ import { Box, Button, Collapse, Divider, List, ListItem, ListItemAvatar, ListIte
 import { ExpandLess, ExpandMore } from "@material-ui/icons";
 import { useTranslation } from "react-i18next";
 import MealDetailView from "./MealDetailView";
-import { fetchAndUpdateMealsFromUser, useCategoryIcons } from "./meals.util";
+import { fetchAndUpdateMealsFromUser } from "./meals.util";
+import useCategoryIcons from "./useCategoryIcons";
 import { bool, string } from "prop-types";
 import { withLoginRequired } from "../util";
 import MealAvatar from "./MealAvatar";

client/src/components/Meals/SelectMealCategory.jsx

@@ -10,13 +10,14 @@ import { getSettingsOfUser } from "../Settings/settings.util";
 import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChooseIconDialog, updateMealCategories } from "../Settings/EditMealCategories";
-import { reactSelectTheme, useCategoryIcons } from "./meals.util";
+import { reactSelectTheme } from "./meals.util";
+import useCategoryIcons from "./useCategoryIcons";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
     width: '100%',
-    marginTop: '0.2rem',
-    marginBottom: '0.7rem',
+    marginTop: '0.5rem',
+    marginBottom: '1rem',
   },
   errorTextField: {
     '& .MuiOutlinedInput-notchedOutline': {
@@ -110,8 +111,6 @@ const SelectMealCategory = (props) => {
     }
   }
 
-  console.log(categoryIcons);
-  console.log(categoryName, currentCategory, allCategories);
   return (
     <>
       <CreatableSelect className={classes.textField}

client/src/components/Meals/meals.util.jsx

@@ -1,8 +1,5 @@
 /** File includes all helper methods for meals */
 import axios from "axios";
-import { useAuth0 } from "@auth0/auth0-react";
-import { useEffect, useState } from "react";
-import { getSettingsOfUser } from "../Settings/settings.util";
 import { darken, lighten } from "@material-ui/core";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
@@ -12,11 +9,11 @@ const serverURL = process.env.REACT_APP_SERVER_URL;
  * @param {string} mealId
  * @param {function} callback optional function tht will be executed after deletion
  */
-export const deleteAllImagesFromMeal = (mealId, callback) => {
+export const deleteAllImagesFromMeal = (mealId, callback = undefined) => {
   axios.post(serverURL + '/images/deleteAllImagesFromCategory/mealImages/' + mealId)
        .then(res => {
-         console.log('deleted all images from planItem ' + mealId + ' after timeout', res);
-         callback();
+         console.log('deleted all images from meal ' + mealId, res);
+         if(callback) callback();
        }).catch(err => {console.log(err)});
 }
 
@@ -50,31 +47,21 @@ export const fetchAndUpdateMeal = (mealId, updateMeal) => {
        });
 }
 
-export const useCategoryIcons = () => {
-  const { user } = useAuth0();
-
-  const [allCategories, setAllCategories] = useState([]);
-  const [allCategoryIcons, setAllCategoryIcons] = useState({});
-
-  useEffect(() => {
-    if (user) {
-      const userId = user.sub;
-      getSettingsOfUser(userId, (settings) => {
-        setAllCategories(settings.mealCategories || []);
-      });
-    }
-  }, [user]);
-
-  useEffect(() => {
-    allCategories.forEach(c => {
-      setAllCategoryIcons(prevState => ({
-        ...prevState,
-        [c.name]: c.icon,
-      }));
-    });
-  }, [allCategories]);
+export const addMeal = (meal, callback) => {
+  if (meal.title) {
+    axios.post(serverURL + '/meals/add', meal, {})
+         .then(res => {
+           console.log('added meal', res);
+           if (callback) callback();
+         }).catch(err => {console.log(err)});
+  }
+}
 
-  return allCategoryIcons;
+export const copyMealImages = (oldId, newId, setNewImages) => {
+  axios.post(serverURL + `/images/copyImagesFromCategory/mealImages/${oldId}/${newId}`)
+       .then(res => {
+         if (setNewImages) setNewImages(res.data.newImages);
+       }).catch(err => {console.log(err)});
 }
 
 export const reactSelectTheme = (givenTheme, muiTheme, secondary = false) => {

client/src/components/Meals/useCategoryIcons.jsx

@@ -0,0 +1,30 @@
+import { useAuth0 } from "@auth0/auth0-react";
+import { useEffect, useState } from "react";
+import { getSettingsOfUser } from "../Settings/settings.util";
+
+export default function useCategoryIcons() {
+  const { user } = useAuth0();
+
+  const [allCategories, setAllCategories] = useState([]);
+  const [allCategoryIcons, setAllCategoryIcons] = useState({});
+
+  useEffect(() => {
+    if (user) {
+      const userId = user.sub;
+      getSettingsOfUser(userId, (settings) => {
+        setAllCategories(settings.mealCategories || []);
+      });
+    }
+  }, [user]);
+
+  useEffect(() => {
+    allCategories.forEach(c => {
+      setAllCategoryIcons(prevState => ({
+        ...prevState,
+        [c.name]: c.icon,
+      }));
+    });
+  }, [allCategories]);
+
+  return allCategoryIcons;
+}

client/src/components/Plans/MissingIngredients.jsx

@@ -23,7 +23,7 @@ const MissingIngredients = (props) => {
   return (
     <Dialog open={open} onClose={closeDialog} >
       <FormControl style={{minWidth: '200px', padding: '1.5rem 2rem'}}>
-        <FormLabel style={{marginBottom: '1rem'}}>{t('Missing Ingredients for {{plan}}', planItem.title)}</FormLabel>
+        <FormLabel style={{marginBottom: '1rem'}}>{t('Missing Ingredients for {{plan}}', {plan: planItem.title})}</FormLabel>
         <FormGroup>
           {planItem.missingIngredients.map((ingredient) => (
             <FormControlLabel key={ingredient.name} control={<Checkbox checked={ingredient.checked} onChange={(event) => {checkIngredient(ingredient, event.target.checked);}} />} label={ingredient.name} />))}

client/src/components/Settings/EditMealCategories.jsx

@@ -65,7 +65,7 @@ export const ChooseIconDialog = (props) => {
   if (isOpen && category) {
     return (
       <Dialog open={category && isOpen} onClose={onClose} PaperProps={{ className: classes.iconSelectDialog }}>
-        <DialogTitle style={{paddingBottom: 0}}>{t('Choose Icon for {{categoryName}}', category.name)}{t('Missing Ingredients for {{plan}}', category.name)}</DialogTitle>
+        <DialogTitle style={{paddingBottom: 0}}>{t('Choose Icon for {{categoryName}}', {categoryName: category.name})}</DialogTitle>
         <Box className={classes.iconGrid}>
           {categoryIcons.map((icon) => (
               <Button key={icon.name} className={`${classes.iconListButton} ${category && category.icon && category.icon.iconName === icon.iconName && classes.iconListButtonSelected}`}>

client/src/components/Settings/EditProfile.jsx

@@ -12,8 +12,6 @@ import BackButton from "../Buttons/BackButton";
 import { muiTableBorder } from "../util";
 import FullScreenDialog from "../util/FullScreenDialog";
 
-const serverURL = process.env.REACT_APP_SERVER_URL;
-
 const useStyles = makeStyles(theme => ({
   userProfile: {
     padding: '1rem 0',
@@ -90,7 +88,7 @@ const EditProfile = (props) => {
   }, [userId]);
 
   const updateUserData = () => {
-    const newUserData = {
+    const newUserData = usingOAuth ? { nickname } : {
       name, email, nickname
     };
     updateUserMetadata(userId, { nickname }, onUpdateUser);
@@ -98,7 +96,7 @@ const EditProfile = (props) => {
   }
 
   const updateProfileImage = (image) => {
-    const imageSrc = serverURL + image.path;
+    const imageSrc = image.url;
     console.log('set uploaded source', imageSrc);
     setProfileImage(imageSrc);
     updateProfileImageInMetadata(imageSrc);
@@ -149,7 +147,7 @@ const EditProfile = (props) => {
               </Typography>
             </CardContent>
           </Collapse>
-        </Card> }
+        </Card>}
 
         <form name="edit-user-form" onSubmit={editAndClose}>
           <TableContainer className={classes.table}>

client/src/components/util/OutlinedTextField.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { bool } from "prop-types";
+
+const useStyles = makeStyles((theme) => ({
+  textField: {
+    width: '100%',
+    marginTop: '0.5rem',
+    marginBottom: '0.5rem',
+  },
+  outlinedInput: {
+    padding: '14px',
+  },
+  correctFloatingLabel: {
+    transform: 'translate(14px, 12px) scale(1)',
+  }
+}));
+
+/** component is used by AddMeal and EditMeal and provides their shared core elements: text and photo input.
+ *  Does not handle communication to server */
+const OutlinedTextField = (props) => {
+  const classes = useStyles();
+
+  const { secondary } = props;
+
+  return (
+    <TextField className={classes.textField}
+               InputProps={{ margin: 'dense' }}
+               InputLabelProps={{ className: classes.correctFloatingLabel }}
+               color={secondary ? "secondary" : "primary"}
+               variant="outlined"
+               {...props} />
+  );
+}
+
+OutlinedTextField.propTypes = {
+  /** whether to use primary or secondary color scheme */
+  secondary: bool,
+}
+
+OutlinedTextField.defaultProps = {
+  secondary: false,
+}
+
+export default OutlinedTextField;

client/src/components/util/ShareButton.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { IconButton, Button, DialogTitle, Dialog, TextField, InputAdornment, Grid } from '@material-ui/core';
-import { Share, Link, FileCopy, AssignmentTurnedInRounded } from '@material-ui/icons';
+import { Button, Dialog, DialogTitle, Grid, IconButton, InputAdornment, TextField } from '@material-ui/core';
+import { AssignmentTurnedInRounded, FileCopy, Link, Share } from '@material-ui/icons';
 import { string } from "prop-types";
 import { useTranslation } from "react-i18next";
 
@@ -58,8 +58,8 @@ const ShareButton = (props) => {
             ),
           }} />
           </Grid>
-          <Grid item xs>
-          <Button style={{textAlign: 'right'}} startIcon={isCopied ? <AssignmentTurnedInRounded /> : <FileCopy />} variant="contained" color={"secondary"} onClick={copyToClipboard}>
+          <Grid item xs style={{textAlign: 'right'}}>
+          <Button startIcon={isCopied ? <AssignmentTurnedInRounded /> : <FileCopy />} variant="contained" color={"secondary"} onClick={copyToClipboard}>
             {isCopied ? t('Copied') : t('Copy')}
           </Button>
         </Grid>

client/src/translations/_example.translation.json

@@ -58,6 +58,7 @@
   "You can, however, set a custom profile picture and nickname.": "",
   "Use dark mode?": "",
   "Missing Ingredients": "",
+  "Missing Ingredients for {{plan}}": "",
   "List is currently empty": "",
   "Without Date": "",
   "Choose Icon for {{categoryName}}": "{{categoryName}}",
@@ -77,5 +78,6 @@
   "Copy": "",
   "Copied": "",
   "Check out the following meal: {{mealTitle}}": "",
+  "Import into my meals": "",
   "": ""
 }

client/src/translations/de.translation.json

@@ -60,6 +60,7 @@
   "You can, however, set a custom profile picture and nickname.": "Sie können allerdings ein eigenes Profilbild hochladen und einen Spitznamen wählen.",
   "Use dark mode?": "Dunkler Modus",
   "Missing Ingredients": "Fehlende Zutaten",
+  "Missing Ingredients for {{plan}}": "Fehlende Zutaten für {{plan}}",
   "List is currently empty": "Die Liste ist derzeit leer",
   "Without Date": "Ohne Datum",
   "Choose Icon for {{categoryName}}": "Wähle ein Icon für {{categoryName}}",
@@ -78,5 +79,6 @@
   "Search for users": "Nutzer suchen",
   "Copy": "Kopieren",
   "Copied": "Kopiert",
-  "Check out the following meal: {{mealTitle}}": "Schau dir das Gericht \"{{mealTitle}}\" unter folgendem Link an:"
+  "Check out the following meal: {{mealTitle}}": "Schau dir das Gericht \"{{mealTitle}}\" unter folgendem Link an:",
+  "Import into my meals": "In meine Gerichte importieren"
 }

client/src/translations/en-GB.translation.json

@@ -59,6 +59,7 @@
   "You can, however, set a custom profile picture and nickname.": "You can, however, set a custom profile picture and nickname.",
   "Use dark mode?": "Use dark mode?",
   "Missing Ingredients": "Missing Ingredients",
+  "Missing Ingredients for {{plan}}": "Missing Ingredients for {{plan}}",
   "List is currently empty": "List is currently empty",
   "Without Date": "Without Date",
   "Choose Icon for {{categoryName}}": "Choose Icon for {{categoryName}}",
@@ -77,5 +78,6 @@
   "Search for users": "Search for users",
   "Copy": "Copy",
   "Copied": "Copied",
-  "Check out the following meal: {{mealTitle}}": "Check out the following meal: {{mealTitle}}"
+  "Check out the following meal: {{mealTitle}}": "Check out the following meal: {{mealTitle}}",
+  "Import into my meals": "Import into my meals"
 }

client/src/translations/en-US.translation.json

@@ -59,6 +59,7 @@
   "You can, however, set a custom profile picture and nickname.": "You can, however, set a custom profile picture and nickname.",
   "Use dark mode?": "Use dark mode?",
   "Missing Ingredients": "Missing Ingredients",
+  "Missing Ingredients for {{plan}}": "Missing Ingredients for {{plan}}",
   "List is currently empty": "List is currently empty",
   "Without Date": "Without Date",
   "Choose Icon for {{categoryName}}": "Choose Icon for {{categoryName}}",
@@ -77,5 +78,6 @@
   "Search for users": "Search for users",
   "Copy": "Copy",
   "Copied": "Copied",
-  "Check out the following meal: {{mealTitle}}": "Check out the following meal: {{mealTitle}}"
+  "Check out the following meal: {{mealTitle}}": "Check out the following meal: {{mealTitle}}",
+  "Import into my meals": "Import into my meals"
 }

client/src/translations/es.translation.json

@@ -59,6 +59,7 @@
   "You can, however, set a custom profile picture and nickname.": "Sin embargo, puedes establecer una imagen de perfil personalizada tanto como un apodo.",
   "Use dark mode?": "Modo oscuro",
   "Missing Ingredients": "Ingredientes faltantes",
+  "Missing Ingredients for {{plan}}": "Ingredientes faltantes para {{plan}}",
   "List is currently empty": "La lista está actualmente vacía",
   "Without Date": "Sin fecha",
   "Choose Icon for {{categoryName}}": "Seleccionar l'icono para {{categoryName}}",
@@ -77,5 +78,6 @@
   "Search for users": "Buscar usuarios",
   "Copy": "Copiar",
   "Copied": "Copiado",
-  "Check out the following meal: {{mealTitle}}": "Consulte la comida {{mealTitle}}:"
+  "Check out the following meal: {{mealTitle}}": "Consulte la comida {{mealTitle}}:",
+  "Import into my meals": "Importar a mis comidas"
 }

client/src/translations/fr-FR.translation.json

@@ -59,6 +59,7 @@
   "You can, however, set a custom profile picture and nickname.": "Vous pouvez toutefois définir une photo de profil et un surnom personnalisés.",
   "Use dark mode?": "mode sombre",
   "Missing Ingredients": "Ingrédients manquants",
+  "Missing Ingredients for {{plan}}": "Ingrédients manquants pour {{plan}}",
   "List is currently empty": "La liste est actuellement vide",
   "Without Date": "Sans date",
   "Choose Icon for {{categoryName}}": "Sélectionnez l'icône pour {{categoryName}}",
@@ -77,5 +78,6 @@
   "Search for users": "Chercher des utilisateurs",
   "Copy": "Copier",
   "Copied": "Copié",
-  "Check out the following meal: {{mealTitle}}": "Consultez le repas {{mealTitle}}:"
+  "Check out the following meal: {{mealTitle}}": "Consultez le repas {{mealTitle}}:",
+  "Import into my meals": "Importer dans mes repas"
 }

client/src/translations/it.translation.json

@@ -59,6 +59,7 @@
   "You can, however, set a custom profile picture and nickname.": "Puoi, tuttavia, impostare un'immagine di profilo personalizzata e un soprannome.",
   "Use dark mode?": "modo scuro",
   "Missing Ingredients": "Ingredienti mancanti",
+  "Missing Ingredients for {{plan}}": "Ingredienti mancanti per {{plan}}",
   "List is currently empty": "La lista è attualmente vuota",
   "Without Date": "Senza Data",
   "Choose Icon for {{categoryName}}": "Scegli l'icona per {{categoryName}}",
@@ -77,5 +78,6 @@
   "Search for users": "Cerca gli utenti",
   "Copy": "Copia",
   "Copied": "Copiato",
-  "Check out the following meal: {{mealTitle}}": "Guarda il pasto {{mealTitle}}:"
+  "Check out the following meal: {{mealTitle}}": "Guarda il pasto {{mealTitle}}:",
+  "Import into my meals": "Importare nei miei pasti"
 }

server/.gitignore

@@ -1 +1,3 @@
 *.env
+node_modules/
+uploads/

server/controllers/images.controllers.js

@@ -1,22 +1,24 @@
 /** logic for image routes */
 import multer from 'multer';
 import Image from "../models/image.model.js";
-import fs from 'fs';
+import { v2 as cloudinary } from 'cloudinary';
+import dotenv from 'dotenv';
+import path from 'path';
+import DatauriParser from 'datauri/parser.js';
 
-const uploadsFolder = '/uploads/';
+dotenv.config();
+const dUri = new DatauriParser();
+const dataUri = req => dUri.format(path.extname(req.file.originalname).toString(), req.file.buffer);
 
-const storage = multer.diskStorage({
-  destination: function (req, file, cb) {
-    console.log('multer params', req.params);
-    let uploadPath = '.' + uploadsFolder;
-    if (req.params.folder) uploadPath += req.params.folder;
-    cb(null, uploadPath);
-  },
-  filename: function (req, file, cb) {
-    cb(null, new Date().getTime() + '-' + file.originalname);
-  }
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
 });
 
+const storage = multer.memoryStorage();
+
+/*
 const imageFileFilter = (req, file, cb) => {
   console.log("File in filter", file);
   if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype === 'image/png') {
@@ -24,7 +26,7 @@ const imageFileFilter = (req, file, cb) => {
   } else {
     cb(null, false);
   }
-}
+}*/
 
 export const upload = multer({
   storage: storage,
@@ -32,47 +34,105 @@ export const upload = multer({
     // Allow upload files under 10MB
     fileSize: 10485760,
   },
-  fileFilter: imageFileFilter,
+  // fileFilter: imageFileFilter,
 });
 
 export const uploadSingleImage = async (req, res) => {
-  const image = req.file;
-  console.log('images file', image);
-  let imagePath = uploadsFolder;
-  if (req.params.folder) imagePath += req.params.folder + '/';
-  imagePath += image.filename;
-  const newImage = new Image({
-    categoryName: req.body.category,
-    categoryId: req.body.categoryId,
-    name: image.filename,
-    path: imagePath,
+  const image = dataUri(req).content;
+  const { category, categoryId, tags, name } = req.body;
+
+  const folderName = category && categoryId ? category + '/' + categoryId : req.params.folder;
+  const uploadOptions = {
+    folder: folderName,
+    tags: tags || [],
+  };
+  if (category === 'userProfile') {
+    uploadOptions.folder = category;
+    uploadOptions.public_id = categoryId;
+    uploadOptions.overwrite = true;
+    uploadOptions.transformation = { aspect_ratio: 1, gravity: "faces", crop: "fill" };
+  }
+  cloudinary.uploader.upload(image, uploadOptions).then((cloudinaryImage) => {
+    console.log('upload successful');
+    const { public_id, secure_url, url } = cloudinaryImage;
+    const newImage = new Image({
+      categoryName: category,
+      categoryId,
+      url: secure_url || url,
+      cloudinaryPublicId: public_id,
+      name,
+    });
+    try {
+      newImage.save().then(() => {
+        console.log('added image to ' + folderName, public_id, name);
+        res.status(201).json({ 'message': 'successfully added new Image', 'Image': newImage })
+      });
+    } catch (error) {
+      res.status(409).json({ message: error.message, errorDetails: 'upload successful, but database storage failed' });
+    }
+  }).catch((error) => {
+    res.status(409).json({ message: error.message, errorDetails: 'upload failed' });
   });
-  try {
-    newImage.save().then(() => {
-      console.log('added image ' + imagePath);
-      res.status(201).json({ 'message': 'successfully added new Image', 'Image': newImage })
+}
+
+async function copySingleImage(image, category, newId) {
+  let returnImage = null;
+  if (image.url) {
+    await cloudinary.uploader.upload(image.url, { folder: category + '/' + newId }).then(async (cloudinaryImage) => {
+      console.log('upload successful');
+      const { public_id, secure_url, url } = cloudinaryImage;
+      const newImage = new Image({
+        categoryName: category,
+        categoryId: newId,
+        url: secure_url || url,
+        cloudinaryPublicId: public_id,
+        name: image.name,
+      });
+      await newImage.save().then((savedImage) => {
+        returnImage = savedImage;
+      }).catch((error) => {
+        console.log('upload of copied image successful, but database storage failed', 'error:', error.message);
+      });
+    }).catch((error) => {
+      console.log('image upload failed because ', error);
     });
-  } catch (error) {
-    res.status(409).json({ message: error.message });
   }
+  return returnImage;
+}
+
+export const copyImagesForCategory = async (req, res) => {
+  let { category, oldId, newId } = req.params;
+
+  let newImages = [];
+
+  await Image.find({ categoryName: category, categoryId: oldId }, async function (err, foundImages) {
+    if (err) {
+      console.log('error in find', err);
+    } else {
+      newImages = await Promise.all(foundImages.map(async (i) => {
+        return await copySingleImage(i, 'mealImages', newId)
+      }));
+      if (newImages.length > 0) {
+        res.status(201).json({ 'message': 'successfully copied Images', newImages });
+      } else {
+        res.status(400).json({ 'info': `copying images failed. Check log for more info` });
+      }
+    }
+  });
 }
 
 export const deleteSingleImage = async (req, res) => {
-  let id = req.params.id;
-  console.log('req body', req.body.path);
-  let path = '.' + req.body.path;
-  Image.findByIdAndDelete(id, {}, function (err, deletionResult) {
+  const image = req.body;
+  Image.findByIdAndDelete(image._id, {}, function (err, deletionResult) {
     if (err) {
-      res.status(400).json({ 'info': `Deletion of image ${id} failed`, 'message': err.message });
+      res.status(400).json({ 'info': `Deletion of image ${image._id} failed`, 'message': err.message });
     } else {
-      fs.unlink(path, (err) => {
-        if (err) {
-          console.log('fs deletion failed', err);
-        } else {
-          console.log('successfully deleted', path);
-        }
+      cloudinary.uploader.destroy(image.cloudinaryPublicId).then((result) => {
+        res.status(201).json({ 'info': 'image deleted', deletionResult, cloudinaryResult: result });
+      }).catch(error => {
+        console.log('image deleted from database but not from cloudinary: ', image, 'reason', error);
+        res.status(201).json({ 'info': 'image deleted from database but not from cloudinary', 'cloudinaryError': error });
       });
-      res.status(201).json({ 'info': 'image deleted, id: ' + id, deletionResult })
     }
   });
 }
@@ -80,27 +140,26 @@ export const deleteSingleImage = async (req, res) => {
 export const deleteAllImagesFromCategory = async (req, res) => {
   let category = req.params.category;
   let id = req.params.id;
-  Image.find({ categoryName: category, categoryId: id }, function (err, foundImages) {
+  console.log('delete all images from ', category, id);
+  await Image.find({ categoryName: category, categoryId: id }, function (err, foundImages) {
     if (err) {
       console.log('error in find', err);
     } else {
       foundImages.forEach(i => {
-        fs.unlink('.' + i.path, function (err) {
-          if (err) {
-            console.log('fs deletion failed', err);
-          } else {
-            console.log('successfully deleted', i.path);
-          }
-        })
+        cloudinary.uploader.destroy(i.cloudinaryPublicId).then((result) => {
+          console.log(i.name + ' deleted from cloudinary');
+        }).catch(error => {
+          console.log('deletion of ' + i.name + ' from cloudinary failed because', error);
+        });
       });
     }
-  }).then(() => {
-    Image.deleteMany({ categoryName: category, categoryId: id }, {}, function (err, deletionResult) {
-      if (err) {
-        res.status(400).json({ 'info': `Deletion of images from ${category} ${id} failed`, 'message': err.message });
-      } else {
-        res.status(201).json({ 'info': `images from ${category} with ${id} deleted`, deletionResult })
-      }
-    });
+  })
+  await cloudinary.api.delete_folder(category + '/' + id);
+  Image.deleteMany({ categoryName: category, categoryId: id }, {}, function (err, deletionResult) {
+    if (err) {
+      res.status(400).json({ 'info': `Deletion of images from ${category} ${id} failed`, 'message': err.message });
+    } else {
+      res.status(201).json({ 'info': `images from ${category} with ${id} deleted`, deletionResult })
+    }
   });
 }

server/controllers/users.controller.js

@@ -76,11 +76,11 @@ export const updateUserMetadata = async (req, res) => {
 
   managementAPI.updateUserMetadata(params, newMetadata)
                .then(function (user) {
-                 console.log('user metadata updated.', user);
+                 // console.log('user metadata updated.', user);
                  res.status(200).json(user);
                })
                .catch(function (err) {
-                 console.log('error while updating user metadata', err);
+                 // console.log('error while updating user metadata', err);
                  res.status(404).json({ message: err.message });
                });
 }
@@ -92,11 +92,11 @@ export const updateUser = async (req, res) => {
 
   managementAPI.updateUser(params, newData)
                .then(function (user) {
-                 console.log('user updated.', user);
+                 // console.log('user updated.', user);
                  res.status(200).json(user);
                })
                .catch(function (err) {
-                 console.log('error while updating user', err);
+                 // console.log('error while updating user', err);
                  res.status(404).json({ message: err.message });
                });
 }

server/models/image.model.js

@@ -4,7 +4,8 @@ const imageSchema = mongoose.Schema({
   name: String,
   categoryName: String,
   categoryId: String,
-  path: String,
+  url: String,
+  cloudinaryPublicId: String,
   createdAt: {
     type: Date,
     default: new Date()

server/models/meal.model.js

@@ -7,7 +7,7 @@ const mealSchema = new mongoose.Schema({
   images: [{
     _id: String,
     name: String,
-    path: String,
+    url: String,
     isMain: Boolean,
     }],
   recipeLink: String,

server/package-lock.json

@@ -496,6 +496,22 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "cloudinary": {
+      "version": "1.25.1",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-1.25.1.tgz",
+      "integrity": "sha512-8iyMyOrRhRudJabdNc34GU/Vnr/ltDRq8gmkwQ4NpuJ1lD5Qw88DJGBNeODZnGSNXIPTLln708gsADVKe0AQMw==",
+      "requires": {
+        "cloudinary-core": "^2.10.2",
+        "core-js": "3.6.5",
+        "lodash": "^4.17.11",
+        "q": "^1.5.1"
+      }
+    },
+    "cloudinary-core": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/cloudinary-core/-/cloudinary-core-2.11.3.tgz",
+      "integrity": "sha512-ZRnpjSgvx+LbSf+aEz5NKzxDB4Z0436aY/0BSDa90kAHiwAyd84VyEi95I74SE80e15Ri9t5S2xtksTXpzk9Xw=="
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -588,6 +604,11 @@
       "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.2.tgz",
       "integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA=="
     },
+    "core-js": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -612,6 +633,15 @@
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
       "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
     },
+    "datauri": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/datauri/-/datauri-3.0.0.tgz",
+      "integrity": "sha512-NeDFuUPV1YCpCn8MUIcDk1QnuyenUHs7f4Q5P0n9FFA0neKFrfEH9esR+YMW95BplbYfdmjbs0Pl/ZGAaM2QHQ==",
+      "requires": {
+        "image-size": "0.8.3",
+        "mimer": "1.1.0"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1130,6 +1160,14 @@
       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
     },
+    "image-size": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.8.3.tgz",
+      "integrity": "sha512-SMtq1AJ+aqHB45c3FsB4ERK0UCiA2d3H1uq8s+8T0Pf8A3W4teyBQyaFaktH6xvZqh+npwlKU7i4fJo0r7TYTg==",
+      "requires": {
+        "queue": "6.0.1"
+      }
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -1384,6 +1422,11 @@
       "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
       "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -1519,6 +1562,11 @@
         "mime-db": "1.44.0"
       }
     },
+    "mimer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mimer/-/mimer-1.1.0.tgz",
+      "integrity": "sha512-y9dVfy2uiycQvDNiAYW6zp49ZhFlXDMr5wfdOiMbdzGM/0N5LNR6HTUn3un+WUQcM0koaw8FMTG1bt5EnHJdvQ=="
+    },
     "mimic-response": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
@@ -1652,9 +1700,9 @@
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
     "netmask": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/netmask/-/netmask-1.0.6.tgz",
-      "integrity": "sha1-ICl+idhvb2QA8lDZ9Pa0wZRfzTU="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg=="
     },
     "nodemon": {
       "version": "2.0.6",
@@ -1777,13 +1825,13 @@
       }
     },
     "pac-resolver": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-4.1.0.tgz",
-      "integrity": "sha512-d6lf2IrZJJ7ooVHr7BfwSjRO1yKSJMaiiWYSHcrxSIUtZrCa4KKGwcztdkZ/E9LFleJfjoi1yl+XLR7AX24nbQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-4.2.0.tgz",
+      "integrity": "sha512-rPACZdUyuxT5Io/gFKUeeZFfE5T7ve7cAkE5TUZRRfuKP0u5Hocwe48X7ZEm6mYB+bTB0Qf+xlVlA/RM/i6RCQ==",
       "requires": {
         "degenerator": "^2.2.0",
         "ip": "^1.1.5",
-        "netmask": "^1.0.6"
+        "netmask": "^2.0.1"
       }
     },
     "package-json": {
@@ -1943,11 +1991,24 @@
         "escape-goat": "^2.0.0"
       }
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
     },
+    "queue": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.1.tgz",
+      "integrity": "sha512-AJBQabRCCNr9ANq8v77RJEv73DPbn55cdTb+Giq4X0AVnNVZvMHlYp7XlQiN+1npCZj1DuSmaA2hYVUUDgxFDg==",
+      "requires": {
+        "inherits": "~2.0.3"
+      }
+    },
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -2446,9 +2507,9 @@
       }
     },
     "tslib": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
     },
     "type-check": {
       "version": "0.3.2",

server/package.json

@@ -14,7 +14,9 @@
   "dependencies": {
     "auth0": "^2.33.0",
     "body-parser": "^1.19.0",
+    "cloudinary": "^1.25.1",
     "cors": "^2.8.5",
+    "datauri": "^3.0.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "mongoose": "^5.12.2",

server/routes/images.routes.js

@@ -1,10 +1,11 @@
 import express from 'express';
-import { upload, uploadSingleImage, deleteSingleImage, deleteAllImagesFromCategory } from "../controllers/images.controllers.js";
+import { upload, uploadSingleImage, deleteSingleImage, deleteAllImagesFromCategory, copyImagesForCategory } from "../controllers/images.controllers.js";
 
 const router = express.Router();
 
 router.post('/addImage/:folder', upload.single('image'), uploadSingleImage);
-router.post('/deleteImage/:folder/:id', upload.single('image'), deleteSingleImage);
-router.post('/deleteAllImagesFromCategory/:category/:id', upload.single('image'), deleteAllImagesFromCategory);
+router.post('/deleteImage', deleteSingleImage);
+router.post('/deleteAllImagesFromCategory/:category/:id', deleteAllImagesFromCategory);
+router.post('/copyImagesFromCategory/:category/:oldId/:newId', copyImagesForCategory);
 
 export default router;