outsource fetchandupdatemeals, prepare meals for foreign users

.gitignore

@@ -1,2 +1,3 @@
 client/node_modules/
 server/node_modules/
+client/.eslintcache

client/.env

@@ -2,6 +2,6 @@ REACT_APP_SERVER_URL=http://localhost:5000
 TOP_HEIGHT=55
 REACT_APP_NAV_BOTTOM_HEIGHT=55
 REACT_APP_GRID_LIST_ROW_HEIGHT=140
-REACT_APP_LOGIN_REDIRECT=http://localhost:3000/
+REACT_APP_LOGIN_REDIRECT=http://localhost:3000/plans
 REACT_APP_LOGOUT_REDIRECT=http://localhost:3000/
 REACT_APP_AUTH0_DOMAIN=emealay.eu.auth0.com

client/src/components/Buttons/BoxCloseX.jsx

@@ -34,6 +34,9 @@ const useStyles = makeStyles((theme) => ({
     fontSize: '1.5rem',
     lineHeight: '1.5rem',
   },
+  white: {
+    color: "#ffffff",
+  }
 }));
 
 function BoxCloseX(props) {
@@ -44,7 +47,7 @@ function BoxCloseX(props) {
   return (
     <button type="button" className={classes.boxCloseX} onClick={onClick}>
       <span className={`${classes.closeXIcon} fa-layers`}>
-        <FontAwesomeIcon icon={faCircle} color="white" />
+        <FontAwesomeIcon icon={faCircle} className={classes.white} />
         <FontAwesomeIcon icon={faTimesCircle} transform="shrink--2" />
       </span>
     </button>

client/src/components/Buttons/EditButton.jsx

@@ -4,12 +4,12 @@ import { Edit } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 
 const useStyles = makeStyles(theme => ({
-  navButton: {
+  editButton: {
     border: 'none',
     background: 'transparent',
     cursor: 'pointer',
     fontSize: '1.5rem',
-    color: theme.palette.primary.main,
+    color: "#ffffff",
   }
 }));
 
@@ -18,7 +18,7 @@ const EditButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Edit fontSize="large" color="white" className={classes.navButton} onClick={onClick} />
+      <Edit fontSize="large" className={classes.editButton} onClick={onClick} />
   );
 }
 

client/src/components/Buttons/SearchButton.jsx

@@ -16,7 +16,7 @@ const SearchButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Search fontSize="large" color="white" className={classes.navButton} onClick={onClick} />
+      <Search fontSize="large" className={classes.navButton} onClick={onClick} />
   );
 }
 

client/src/components/Meals/AddMeal.jsx

@@ -25,6 +25,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const serverURL = process.env.REACT_APP_SERVER_URL;
+
 const AddMeal = (props) => {
   const classes = useStyles();
   let history = useHistory();
@@ -58,7 +60,7 @@ const AddMeal = (props) => {
   const addNewMeal = (event) => {
     event.preventDefault();
     if (meal.title) {
-      axios.post('http://localhost:5000/meals/add', meal, {})
+      axios.post(serverURL + '/meals/add', meal, {})
            .then(res => { // then print response status
              console.log('added meal', res);
              onDoneAdding();

client/src/components/Meals/EditMeal.jsx

@@ -48,6 +48,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const inverseColors = true;
+const serverURL = process.env.REACT_APP_SERVER_URL;
 
 const EditMeal = (props) => {
   const classes = useStyles();
@@ -75,7 +76,7 @@ const EditMeal = (props) => {
 
   const editMeal = () => {
     if (meal.title) {
-      axios.post('http://localhost:5000/meals/edit/' + meal._id, meal).then((result) => {
+      axios.post(serverURL + '/meals/edit/' + meal._id, meal).then((result) => {
         console.log('edit request sent', result.data);
         onDoneEditing();
       });
@@ -83,7 +84,7 @@ const EditMeal = (props) => {
   }
 
   const deleteMeal = () => {
-    axios.post('http://localhost:5000/meals/delete/' + meal._id).then((result) => {
+    axios.post(serverURL + '/meals/delete/' + meal._id).then((result) => {
       setDeletedItem(meal);
       setDeleteImagesTimeout(setTimeout(() => {
         if (deleteImagesTimeout) {
@@ -100,7 +101,7 @@ const EditMeal = (props) => {
 
   const undoDeletion = () => {
     setDeleteImagesTimeout(null);
-    axios.post('http://localhost:5000/meals/add', deletedItem).then((result) => {
+    axios.post(serverURL + '/meals/add', deletedItem).then((result) => {
       console.log('re-add request sent', result.data);
       setDeleteMessageVisible(false);
       setReaddedMessageVisible(true);

client/src/components/Meals/Meals.jsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 import MealDetailView from "./MealDetailView";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
+import { fetchAndUpdateMealsFromUser } from "./meals.util";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 
@@ -41,23 +42,18 @@ const Meals = (props) => {
   const [mealBeingViewed, setMealBeingViewed] = useState(null);
   const [emptyListFound, setEmptyListFound] = useState(false);
 
-  const fetchAndUpdateMeals = () => {
-    if (!user) return;
-    const userId = user.sub;
-    axios.get('http://localhost:5000/meals/ofUser/' + userId)
-         .then(res => {
-           setMeals(res.data);
-           console.log('Meals get', meals);
-           if(res.data.length === 0) setEmptyListFound(true);
-         })
-         .catch(err => {
-           console.log(err.message);
-         });
+  const updateMealsCallback = (mealsFound) => {
+    setMeals(mealsFound);
+    if(mealsFound.length === 0) setEmptyListFound(true);
+  }
+
+  const fetchAndUpdateOwnMeals = () => {
+    fetchAndUpdateMealsFromUser(user, updateMealsCallback);
   }
 
   useEffect(() => {
-    fetchAndUpdateMeals();
-  }, [user]);
+    fetchAndUpdateOwnMeals();
+  }, [user, fetchAndUpdateOwnMeals]);
 
   const goToAddMeal = () => {history.push('/meals/add');};
   const openMealDetailView = (meal) => {
@@ -106,7 +102,7 @@ const Meals = (props) => {
       <MealDetailView open={detailViewOpen} meal={mealBeingViewed} closeDialog={() => {
         setMealBeingViewed(null);
         setDetailViewOpen(false);
-      }} onDoneEditing={fetchAndUpdateMeals} />
+      }} onDoneEditing={fetchAndUpdateOwnMeals} />
     </>
   );
 }

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

@@ -1,9 +1,25 @@
 import axios from "axios";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const serverURL = process.env.REACT_APP_SERVER_URL;
 
 export const deleteAllImagesFromMeal = (mealId, callback) => {
-  axios.post('http://localhost:5000/images/deleteAllImagesFromCategory/mealImages/' + mealId)
+  axios.post(serverURL + '/images/deleteAllImagesFromCategory/mealImages/' + mealId)
        .then(res => {
          console.log('deleted all images from planItem ' + mealId + ' after timeout', res);
          callback();
        }).catch(err => {console.log(err)});
 }
+
+export const fetchAndUpdateMealsFromUser = (user, updateMeals) => {
+  if(!user) return;
+  if(!user.sub) return;
+  const userId = user.sub;
+  axios.get(serverURL + '/meals/ofUser/' + userId)
+       .then(res => {
+         updateMeals(res.data);
+       })
+       .catch(err => {
+         console.log(err.message);
+       });
+}

client/src/components/Plans/AddPlanItem.jsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import EditPlanItemCore from "./EditPlanItemCore";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
+import { fetchAndUpdateMealsFromUser } from "../Meals/meals.util";
 
 const useStyles = makeStyles(theme => ({
   form: {
@@ -23,6 +24,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const serverURL = process.env.REACT_APP_SERVER_URL;
+
 const AddPlanItem = (props) => {
   const classes = useStyles();
   let history = useHistory();
@@ -51,22 +54,13 @@ const AddPlanItem = (props) => {
 
   const [meals, setMeals] = useState([]);
 
-  const fetchAndUpdateMeals = () => {
-    if (!user) return;
-    const userId = user.sub;
-    axios.get('http://localhost:5000/meals/ofUser/' + userId)
-         .then(res => {
-           setMeals(res.data);
-           console.log('Meals get', meals);
-         })
-         .catch(err => {
-           console.log(err.message);
-         });
+  const updateMealsCallback = (mealsFound) => {
+    setMeals(mealsFound);
   }
 
   useEffect(() => {
-    fetchAndUpdateMeals();
-  }, [user]);
+    fetchAndUpdateMealsFromUser(user, updateMealsCallback);
+  }, [user, fetchAndUpdateMealsFromUser]);
 
   const addNewPlan = (event) => {
     event.preventDefault();
@@ -82,7 +76,7 @@ const AddPlanItem = (props) => {
         connectedMealId: planItem.connectedMeal ? planItem.connectedMeal._id : null,
       }
 
-      axios.post('http://localhost:5000/plans/add', newPlan).then((result) => {
+      axios.post(serverURL + '/plans/add', newPlan).then((result) => {
         console.log('add request sent', result.data);
         onDoneAdding();
       });

client/src/components/Plans/EditPlanItem.jsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dialog, Snackbar, Box, Grid } from '@material-ui/core';
+import { Button, Dialog, Grid, Snackbar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
 import DeleteButton from "../Buttons/DeleteButton";
 import { useTranslation } from "react-i18next";
-import { func, bool, string, shape, arrayOf } from "prop-types";
+import { arrayOf, bool, func, shape, string } from "prop-types";
 import Navbar from "../Navbar";
 import FontButton from "../Buttons/FontButton";
 import EditPlanItemCore from "./EditPlanItemCore";
 import BackButton from "../Buttons/BackButton";
 import { SlidingTransition } from "../util";
-import { withAuthenticationRequired, useAuth0 } from "@auth0/auth0-react";
+import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
 
 const useStyles = makeStyles((theme) => ({
@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const inverseColors = true;
+const serverURL = process.env.REACT_APP_SERVER_URL;
 
 const EditPlanItem = (props) => {
   const classes = useStyles();
@@ -82,7 +83,7 @@ const EditPlanItem = (props) => {
       }
       console.log('to become', newPlan);
 
-      axios.post('http://localhost:5000/plans/edit/' + planItem._id, newPlan).then((result) => {
+      axios.post(serverURL + '/plans/edit/' + planItem._id, newPlan).then((result) => {
         console.log('edit request sent', result.data);
         onDoneEditing();
       });
@@ -90,7 +91,7 @@ const EditPlanItem = (props) => {
   }
 
   const deletePlan = () => {
-    axios.post('http://localhost:5000/plans/delete/' + planItem._id).then((result) => {
+    axios.post(serverURL + '/plans/delete/' + planItem._id).then((result) => {
       setDeletedItem(planItem);
       setDeleteMessageVisible(true);
       console.log('delete request sent', result.data);
@@ -100,7 +101,7 @@ const EditPlanItem = (props) => {
   }
 
   const undoDeletion = () => {
-    axios.post('http://localhost:5000/plans/add', deletedItem).then((result) => {
+    axios.post(serverURL + '/plans/add', deletedItem).then((result) => {
       console.log('re-add request sent', result.data);
       setDeleteMessageVisible(false);
       setReaddedMessageVisible(true);

client/src/components/Plans/EditPlanItemCore.jsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Checkbox, FormControlLabel, TextField, Box, Grid } from '@material-ui/core';
+import { Box, Button, Checkbox, FormControlLabel, Grid, TextField } from '@material-ui/core';
 // import MuiAlert from '@material-ui/lab/Alert';
 import { makeStyles } from '@material-ui/styles';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlusCircle, faMinusCircle } from "@fortawesome/free-solid-svg-icons";
+import { faMinusCircle, faPlusCircle } from "@fortawesome/free-solid-svg-icons";
 import axios from 'axios';
 import { any, arrayOf, bool, func, shape, string } from "prop-types";
 import dateformat from 'dateformat';
 import { useTranslation } from "react-i18next";
 import { Autocomplete } from "@material-ui/lab";
-import { withAuthenticationRequired } from "@auth0/auth0-react";
+import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
+import { fetchAndUpdateMealsFromUser } from "../Meals/meals.util";
 
 const useStyles = makeStyles((theme) => ({
   dateSelectionWrapper: {
@@ -64,9 +65,12 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const serverURL = process.env.REACT_APP_SERVER_URL;
+
 const EditPlanItemCore = (props) => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const { user } = useAuth0();
 
   const {
     isAdd,
@@ -90,20 +94,13 @@ const EditPlanItemCore = (props) => {
 
   const [meals, setMeals] = useState([]);
 
-  const fetchAndUpdateMeals = () => {
-    axios.get('http://localhost:5000/meals')
-         .then(res => {
-           setMeals(res.data);
-           console.log('Meals get', meals);
-         })
-         .catch(err => {
-           console.log(err.message);
-         });
+  const updateMealsCallback = (mealsFound) => {
+    setMeals(mealsFound);
   }
 
   useEffect(() => {
-    fetchAndUpdateMeals();
-  }, []);
+    fetchAndUpdateMealsFromUser(user, updateMealsCallback);
+  }, [user, fetchAndUpdateMealsFromUser]);
 
   const addIngredient = () => {
     const ingredientToAdd = {

client/src/components/Plans/Plans.jsx

@@ -64,7 +64,7 @@ const Plans = (props) => {
   const fetchAndUpdatePlans = () => {
     if (!user) return;
     const userId = user.sub;
-    axios.get('http://localhost:5000/plans/ofUser/' + userId)
+    axios.get(serverURL + '/plans/ofUser/' + userId)
          .then(res => {
            console.log('plans', res.data);
            setPlans(res.data);

client/src/components/Social/Social.jsx

@@ -3,7 +3,6 @@ import { Typography } from '@material-ui/core';
 import Navbar from "../Navbar";
 import SearchButton from "../Buttons/SearchButton";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
-import LoginButton from "../Buttons/LoginButton";
 import { makeStyles } from '@material-ui/styles';
 import Loading from "../Loading";