feature/category-tag-crud (#354)

* update tag route

* search.and

* offset for mobile

* relative imports

* get settings

* new page

* category/tag CRUD

* bulk assign frontend

* Bulk assign

* debounce search

* remove dev data

* recipe store refactor

* fix mobile view

* fix failing tests

* commit test data

Co-authored-by: hay-kot <hay-kot@pm.me>

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)),

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,
+};

frontend/src/store/modules/siteSettings.js

@@ -29,10 +29,10 @@ const actions = {
     let settings = await api.siteSettings.get();
     commit("setSettings", settings);
   },
-  async requestCustomPages({commit }) {
-    const customPages = await api.siteSettings.getPages()
-    commit("setCustomPages", customPages)
-  }
+  async requestCustomPages({ commit }) {
+    const customPages = await api.siteSettings.getPages();
+    commit("setCustomPages", customPages);
+  },
 };
 
 const getters = {