From 7a48b659f812e983245ff51b94bf498adb599a70 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Tue, 27 Apr 2021 09:53:55 -0800
Subject: [PATCH] recipe store refactor

---
 .gitignore                                    |  4 +-
 frontend/src/api/recipe.js                    |  6 +-
 .../src/components/MealPlan/MealPlanNew.vue   |  5 +-
 .../src/components/UI/Search/SearchBar.vue    |  2 +-
 .../ToolBox/CategoryTagEditor/BulkAssign.vue  |  2 +-
 frontend/src/pages/HomePage.vue               |  4 +-
 frontend/src/pages/Recipes/AllRecipes.vue     | 19 ++++-
 frontend/src/pages/SearchPage/index.vue       |  2 +-
 frontend/src/store/index.js                   | 18 +----
 frontend/src/store/modules/recipes.js         | 73 +++++++++++++++++++
 mealie/db/models/recipe/recipe.py             |  4 +
 mealie/routes/recipe/recipe_crud_routes.py    |  2 +-
 mealie/schema/recipe.py                       |  1 +
 13 files changed, 110 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/store/modules/recipes.js

diff --git a/.gitignore b/.gitignore
index d01991ff2..e6097687d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,7 @@ mealie/temp/*
 mealie/temp/api.html
 .temp/
 .secret
-
+*.zip
 
 dev/data/backups/*
 dev/data/debug/*
@@ -193,3 +193,5 @@ frontend/dist/js/app.36f2760c.js
 frontend/dist/js/app.36f2760c.js.map
 frontend/dist/js/chunk-vendors.c93761e4.js
 frontend/dist/js/chunk-vendors.c93761e4.js.map
+dev/data/backups/dev_sample_data_2021-Apr-25.zip
+dev/data/backups/dev_sample_data_2021-Feb-13.zip
diff --git a/frontend/src/api/recipe.js b/frontend/src/api/recipe.js
index 364d6a688..7ef5489ea 100644
--- a/frontend/src/api/recipe.js
+++ b/frontend/src/api/recipe.js
@@ -67,13 +67,13 @@ export const recipeAPI = {
 
   async update(data) {
     let response = await apiReq.put(recipeURLs.update(data.slug), data);
-    store.dispatch("requestRecentRecipes");
-    return response.data;
+    store.dispatch("patchRecipe", response.data);
+    return response.data.slug; // ! Temporary until I rewrite to refresh page without additional request
   },
 
   async patch(data) {
     let response = await apiReq.patch(recipeURLs.update(data.slug), data);
-    store.dispatch("requestRecentRecipes");
+    store.dispatch("patchRecipe", response.data);
     return response.data;
   },
 
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index 29487c65e..5bdd403f9 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -3,7 +3,8 @@
     <v-card-title class=" headline">
       {{ $t("meal-plan.create-a-new-meal-plan") }}
       <v-btn color="info" class="ml-auto" @click="setQuickWeek()">
-        <v-icon left>mdi-calendar-minus</v-icon> {{$t('meal-plan.quick-week')}}
+        <v-icon left>mdi-calendar-minus</v-icon>
+        {{ $t("meal-plan.quick-week") }}
       </v-btn>
     </v-card-title>
 
@@ -153,7 +154,7 @@ export default {
       return recipes.length > 0 ? recipes : this.items;
     },
     allRecipes() {
-      return this.$store.getters.getRecentRecipes;
+      return this.$store.getters.getAllRecipes;
     },
   },
 
diff --git a/frontend/src/components/UI/Search/SearchBar.vue b/frontend/src/components/UI/Search/SearchBar.vue
index afb7540d0..964fa72a0 100644
--- a/frontend/src/components/UI/Search/SearchBar.vue
+++ b/frontend/src/components/UI/Search/SearchBar.vue
@@ -132,7 +132,7 @@ export default {
   },
   computed: {
     data() {
-      return this.$store.getters.getRecentRecipes;
+      return this.$store.getters.getAllRecipes;
     },
     autoResults() {
       return this.fuseResults.length > 1 ? this.fuseResults : this.results;
diff --git a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue
index ea66fadd8..3350806c5 100644
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue
+++ b/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/BulkAssign.vue
@@ -94,7 +94,7 @@ export default {
   },
   computed: {
     allRecipes() {
-      return this.$store.getters.getRecentRecipes;
+      return this.$store.getters.getAllRecipes;
     },
     // results() {
     //   if (this.search === null || this.search === "") {
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index f44888452..1aaab2c2b 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -38,8 +38,8 @@ export default {
       return this.$store.getters.getSiteSettings;
     },
     recentRecipes() {
-      let recipes = this.$store.getters.getRecentRecipes;
-      return recipes.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+      return this.$store.getters.getRecentRecipes;
+ 
     },
   },
   async mounted() {
diff --git a/frontend/src/pages/Recipes/AllRecipes.vue b/frontend/src/pages/Recipes/AllRecipes.vue
index ebcf39eae..e516f623c 100644
--- a/frontend/src/pages/Recipes/AllRecipes.vue
+++ b/frontend/src/pages/Recipes/AllRecipes.vue
@@ -1,5 +1,10 @@
 <template>
   <v-container>
+    <v-progress-linear
+      v-if="loading"
+      indeterminate
+      color="primary"
+    ></v-progress-linear>
     <CardSection
       :sortable="true"
       :title="$t('page.all-recipes')"
@@ -18,14 +23,20 @@ export default {
     CardSection,
   },
   data() {
-    return {};
+    return {
+      loading: false,
+    };
   },
-  mounted() {
-    this.$store.dispatch("requestAllRecipes");
+  async mounted() {
+    if (this.allRecipes.length < 1) {
+      this.loading = true;
+    }
+    await this.$store.dispatch("requestAllRecipes");
+    this.loading = false;
   },
   computed: {
     allRecipes() {
-      return this.$store.getters.getRecentRecipes;
+      return this.$store.getters.getAllRecipes;
     },
   },
   methods: {
diff --git a/frontend/src/pages/SearchPage/index.vue b/frontend/src/pages/SearchPage/index.vue
index 37782c618..e00fb4eff 100644
--- a/frontend/src/pages/SearchPage/index.vue
+++ b/frontend/src/pages/SearchPage/index.vue
@@ -119,7 +119,7 @@ export default {
   },
   computed: {
     allRecipes() {
-      return this.$store.getters.getRecentRecipes;
+      return this.$store.getters.getAllRecipes;
     },
     filteredRecipes() {
       return this.allRecipes.filter(recipe => {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 627a0eee8..618e01507 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -5,6 +5,7 @@ import createPersistedState from "vuex-persistedstate";
 import userSettings from "./modules/userSettings";
 import language from "./modules/language";
 import siteSettings from "./modules/siteSettings";
+import recipes from "./modules/recipes";
 import groups from "./modules/groups";
 
 Vue.use(Vuex);
@@ -20,6 +21,7 @@ const store = new Vuex.Store({
     language,
     siteSettings,
     groups,
+    recipes,
   },
   state: {
     // All Recipe Data Store
@@ -35,9 +37,6 @@ const store = new Vuex.Store({
   },
 
   mutations: {
-    setRecentRecipes(state, payload) {
-      state.recentRecipes = payload;
-    },
     setMealPlanCategories(state, payload) {
       state.mealPlanCategories = payload;
     },
@@ -53,18 +52,6 @@ const store = new Vuex.Store({
   },
 
   actions: {
-    async requestRecentRecipes({ getters }) {
-      const payload = await api.recipes.allSummary(0, 30);
-      const recent = getters.getRecentRecipes;
-      if (recent.length >= 30) return;
-      this.commit("setRecentRecipes", payload);
-    },
-    async requestAllRecipes({ getters }) {
-      const recent = getters.getRecentRecipes;
-      const start = recent.length + 1;
-      const payload = await api.recipes.allSummary(start, 9999);
-      this.commit("setRecentRecipes", [...recent, ...payload]);
-    },
     async requestCategories({ commit }) {
       const categories = await api.categories.getAll();
       commit("setAllCategories", categories);
@@ -80,7 +67,6 @@ const store = new Vuex.Store({
   },
 
   getters: {
-    getRecentRecipes: state => state.recentRecipes,
     getMealPlanCategories: state => state.mealPlanCategories,
     getAllCategories: state =>
       state.allCategories.sort((a, b) => (a.slug > b.slug ? 1 : -1)),
diff --git a/frontend/src/store/modules/recipes.js b/frontend/src/store/modules/recipes.js
new file mode 100644
index 000000000..bcec72447
--- /dev/null
+++ b/frontend/src/store/modules/recipes.js
@@ -0,0 +1,73 @@
+import { api } from "@/api";
+
+const state = {
+  recentRecipes: [],
+  allRecipes: [],
+};
+
+const mutations = {
+  setRecentRecipes(state, payload) {
+    state.recentRecipes = payload;
+  },
+  patchRecentRecipes(state, payload) {
+    if (state.recentRecipes[payload.id]) {
+      state.recentRecipes[payload.id] = payload;
+    }
+  },
+  dropRecentRecipes(state, payload) {
+    if (state.recentRecipes[payload.id]) {
+      delete state.recentRecipes[payload.id];
+    }
+  },
+  setAllRecipes(state, payload) {
+    state.allRecipes = payload;
+  },
+  patchAllRecipes(state, payload) {
+    state.allRecipes[payload.id] = payload;
+  },
+  dropAllRecipes(state, payload) {
+    if (state.allRecipes[payload.id]) {
+      delete state.allRecipes[payload.id];
+    }
+  },
+};
+
+const actions = {
+  async requestRecentRecipes() {
+    const payload = await api.recipes.allSummary(0, 30);
+    payload.sort((a, b) => (a.dateAdded > b.dateAdded ? -1 : 1));
+    console.log(payload);
+    const hash = Object.fromEntries(payload.map(e => [e.id, e]));
+    this.commit("setRecentRecipes", hash);
+  },
+  async requestAllRecipes({ getters }) {
+    const all = getters.getAllRecipes;
+    const payload = await api.recipes.allSummary(all.length, 9999);
+    const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));
+    console.log(hash);
+
+    this.commit("setAllRecipes", hash);
+  },
+  patchRecipe({ commit }, payload) {
+    commit("patchAllRecipes", payload);
+    commit("patchRecentRecipes", payload);
+  },
+  dropRecipe({ commit }, payload) {
+    commit("dropAllRecipes", payload);
+    commit("dropRecentRecipes", payload);
+  },
+};
+
+const getters = {
+  getAllRecipes: state => Object.values(state.allRecipes),
+  getAllRecipesHash: state => state.allRecipes,
+  getRecentRecipes: state => Object.values(state.recentRecipes),
+  getRecentRecipesHash: state => state.recentRecipes,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};
diff --git a/mealie/db/models/recipe/recipe.py b/mealie/db/models/recipe/recipe.py
index 28e512db0..3127a840b 100644
--- a/mealie/db/models/recipe/recipe.py
+++ b/mealie/db/models/recipe/recipe.py
@@ -86,6 +86,8 @@ class RecipeModel(SqlAlchemyBase, BaseMixins):
         rating: int = None,
         orgURL: str = None,
         extras: dict = None,
+        *args,
+        **kwargs
     ) -> None:
         self.name = name
         self.description = description
@@ -139,6 +141,8 @@ class RecipeModel(SqlAlchemyBase, BaseMixins):
         rating: int = None,
         orgURL: str = None,
         extras: dict = None,
+        *args,
+        **kwargs
     ):
         """Updated a database entry by removing nested rows and rebuilds the row through the __init__ functions"""
 
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 5669fe478..1ee6a3e25 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -61,7 +61,7 @@ def update_recipe(
     if recipe_slug != recipe.slug:
         rename_image(original_slug=recipe_slug, new_slug=recipe.slug)
 
-    return recipe.slug
+    return recipe
 
 
 @router.patch("/{recipe_slug}")
diff --git a/mealie/schema/recipe.py b/mealie/schema/recipe.py
index 3ea0b9aee..994255a4b 100644
--- a/mealie/schema/recipe.py
+++ b/mealie/schema/recipe.py
@@ -35,6 +35,7 @@ class Nutrition(BaseModel):
 
 
 class RecipeSummary(BaseModel):
+    id: Optional[int]
     name: str
     slug: Optional[str] = ""
     image: Optional[Any]