From af41b08a6066507b5fd4400ab7115665d49b1da7 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 13 Jun 2021 14:07:58 -0800
Subject: [PATCH] Bug/fix infinite loop (#512)

* fix infinite loop with safe get method

* fix ingredients

Co-authored-by: hay-kot <hay-kot@pm.me>
---
 frontend/src/api/api-utils.js               | 91 +++++++++++++++------
 frontend/src/api/recipe.js                  |  6 +-
 frontend/src/components/Login/LoginForm.vue | 12 +--
 frontend/src/pages/Recipe/ViewRecipe.vue    | 10 ++-
 frontend/src/pages/ShoppingList/index.vue   | 10 ++-
 frontend/src/routes/index.js                |  3 +-
 frontend/src/routes/recipes.js              |  3 +-
 7 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/frontend/src/api/api-utils.js b/frontend/src/api/api-utils.js
index 012f5bd0a800..a346636e24a6 100644
--- a/frontend/src/api/api-utils.js
+++ b/frontend/src/api/api-utils.js
@@ -27,47 +27,88 @@ function defaultSuccessText(response) {
   return response.statusText;
 }
 
-const apiReq = {
-  post: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
-    const response = await axios.post(url, data).catch(function(error) {
+const requests = {
+  /**
+   *
+   * @param {*} funcCall Callable Axios Function
+   * @param {*} url Destination url
+   * @param {*} data Request Data
+   * @param {*} getErrorText Error Text Function
+   * @param {*} getSuccessText Success Text Function
+   * @returns Object response
+   */
+  unsafe: async function(funcCall, url, data, getErrorText = defaultErrorText, getSuccessText) {
+    const response = await funcCall(url, data).catch(function(error) {
       handleError(error, getErrorText);
-      return error;
     });
     return handleResponse(response, getSuccessText);
   },
+  /**
+   *
+   * @param {*} funcCall Callable Axios Function
+   * @param {*} url Destination url
+   * @param {*} data Request Data
+   * @param {*} getErrorText Error Text Function
+   * @param {*} getSuccessText Success Text Function
+   * @returns Array [response, error]
+   */
+  safe: async function(funcCall, url, data, getErrorText = defaultErrorText, getSuccessText) {
+    const response = await funcCall(url, data).catch(function(error) {
+      handleError(error, getErrorText);
+      return [null, error];
+    });
+    return [handleResponse(response, getSuccessText), null];
+  },
+};
+
+const apiReq = {
+  get: async function(url, getErrorText = defaultErrorText) {
+    return axios.get(url).catch(function(error) {
+      handleError(error, getErrorText);
+    });
+  },
+
+  getSafe: async function(url) {
+    let error = null;
+    const response = await axios.get(url).catch(e => {
+      error = e;
+    });
+    return [response, error];
+  },
+
+  post: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
+    return await requests.unsafe(axios.post, url, data, getErrorText, getSuccessText);
+  },
+
+  postSafe: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
+    return await requests.safe(axios.post, url, data, getErrorText, getSuccessText);
+  },
 
   put: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
-    const response = await axios.put(url, data).catch(function(error) {
-      handleError(error, getErrorText);
-      return error;
-    });
-    return handleResponse(response, getSuccessText);
+    return await requests.unsafe(axios.put, url, data, getErrorText, getSuccessText);
+  },
+
+  putSafe: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
+    return await requests.safe(axios.put, url, data, getErrorText, getSuccessText);
   },
 
   patch: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
-    const response = await axios.patch(url, data).catch(function(error) {
-      handleError(error, getErrorText);
-      return error;
-    });
-    return handleResponse(response, getSuccessText);
+    return await requests.unsafe(axios.patch, url, data, getErrorText, getSuccessText);
   },
 
-  get: async function(url, data, getErrorText = defaultErrorText) {
-    return axios.get(url, data).catch(function(error) {
-      handleError(error, getErrorText);
-      return error;
-    });
+  patchSafe: async function(url, data, getErrorText = defaultErrorText, getSuccessText) {
+    return await requests.safe(axios.patch, url, data, getErrorText, getSuccessText);
   },
 
   delete: async function(url, data, getErrorText = defaultErrorText, getSuccessText = defaultSuccessText) {
-    const response = await axios.delete(url, data).catch(function(error) {
-      handleError(error, getErrorText);
-      return error;
-    });
-    return handleResponse(response, getSuccessText);
+    return await requests.unsafe(axios.delete, url, data, getErrorText, getSuccessText);
   },
 
-  async download(url) {
+  deleteSafe: async function(url, data, getErrorText = defaultErrorText, getSuccessText = defaultSuccessText) {
+    return await requests.unsafe(axios.delete, url, data, getErrorText, getSuccessText);
+  },
+
+  download: async function(url) {
     const response = await this.get(url);
     const token = response.data.fileToken;
 
diff --git a/frontend/src/api/recipe.js b/frontend/src/api/recipe.js
index 7f039e32b7fb..7fbad58d3b51 100644
--- a/frontend/src/api/recipe.js
+++ b/frontend/src/api/recipe.js
@@ -35,10 +35,8 @@ export const recipeAPI = {
   },
 
   async requestDetails(recipeSlug) {
-    const response = await apiReq.get(API_ROUTES.recipesRecipeSlug(recipeSlug));
-    if (response.response) {
-      return response.response;
-    }
+    const response = await apiReq.getSafe(API_ROUTES.recipesRecipeSlug(recipeSlug));
+    console.log(response);
     return response;
   },
 
diff --git a/frontend/src/components/Login/LoginForm.vue b/frontend/src/components/Login/LoginForm.vue
index fad4ea0e9139..c36d0785640c 100644
--- a/frontend/src/components/Login/LoginForm.vue
+++ b/frontend/src/components/Login/LoginForm.vue
@@ -12,12 +12,6 @@
 
     <v-form @submit.prevent="login">
       <v-card-text>
-        <v-text-field
-          v-if="!options.isLoggingIn"
-          v-model="user.name"
-          prepend-icon="person"
-          :label="$t('general.name')"
-        ></v-text-field>
         <v-text-field
           v-model="user.email"
           prepend-icon="mdi-email"
@@ -35,12 +29,10 @@
           @click:append="showPassword = !showPassword"
         ></v-text-field>
         <v-card-actions>
-          <v-btn v-if="options.isLoggingIn" color="primary" block="block" type="submit"
-            >{{ $t("user.sign-in") }}
-          </v-btn>
+          <v-btn v-if="options.isLoggingIn" color="primary" block large type="submit">{{ $t("user.sign-in") }} </v-btn>
         </v-card-actions>
 
-        <v-alert v-if="error" outlined class="mt-3 mb-0" type="error">
+        <v-alert v-if="error" class="mt-3 mb-0" type="error">
           {{ $t("user.could-not-validate-credentials") }}
         </v-alert>
       </v-card-text>
diff --git a/frontend/src/pages/Recipe/ViewRecipe.vue b/frontend/src/pages/Recipe/ViewRecipe.vue
index 72926f2f647d..0b6e3296207d 100644
--- a/frontend/src/pages/Recipe/ViewRecipe.vue
+++ b/frontend/src/pages/Recipe/ViewRecipe.vue
@@ -192,10 +192,12 @@ export default {
         return;
       }
 
-      const response = await api.recipes.requestDetails(this.currentRecipe);
-      console.log("View Response", { response });
-      if (response.status === 401) router.push(`/login`);
-      if (response.status === 404) return;
+      const [response, error] = await api.recipes.requestDetails(this.currentRecipe);
+
+      if (error) {
+        if (error.response.status === 401) router.push(`/login`);
+        if (error.response.status === 404) router.push("/page-not-found");
+      }
 
       this.recipeDetails = response.data;
       this.skeleton = false;
diff --git a/frontend/src/pages/ShoppingList/index.vue b/frontend/src/pages/ShoppingList/index.vue
index 0679ddcf9d14..38f71acb56e0 100644
--- a/frontend/src/pages/ShoppingList/index.vue
+++ b/frontend/src/pages/ShoppingList/index.vue
@@ -198,12 +198,18 @@ export default {
       this.$refs.searchRecipe.open();
     },
     async importIngredients(selected) {
-      const response = await api.recipes.requestDetails(selected.slug);
+      const [response, error] = await api.recipes.requestDetails(selected.slug);
+      console.log(response);
+
+      if (error) {
+        console.log(error);
+      }
+
       const recipe = response.data;
 
       const ingredients = recipe.recipeIngredient.map(x => ({
         title: "",
-        text: x,
+        text: x.note,
         quantity: 1,
         checked: false,
       }));
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 3c4035dba08a..006ecc177863 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -18,6 +18,7 @@ export const routes = [
   ...mealRoutes,
   ...recipeRoutes,
 
+  { path: "/page-not-found", component: Page404 },
   { path: "*", component: Page404 },
 ];
 
@@ -31,7 +32,7 @@ const router = new VueRouter({
 });
 
 const DEFAULT_TITLE = "Mealie";
-const TITLE_SEPARATOR = "🍴";
+const TITLE_SEPARATOR = "|";
 const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE;
 router.afterEach(to => {
   Vue.nextTick(async () => {
diff --git a/frontend/src/routes/recipes.js b/frontend/src/routes/recipes.js
index e0cb44bac4c2..11cc58c03694 100644
--- a/frontend/src/routes/recipes.js
+++ b/frontend/src/routes/recipes.js
@@ -26,7 +26,8 @@ export const recipeRoutes = [
     component: ViewRecipe,
     meta: {
       title: async route => {
-        const response = await api.recipes.requestDetails(route.params.recipe);
+        const [response, error] = await api.recipes.requestDetails(route.params.recipe);
+        if (error) console.log({ error });
         const recipe = response.data;
         if (recipe && recipe.name) return recipe.name;
         else return null;