From fb5c69e1dd9a411e937c9f410f9a61800b8d7ef0 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Fri, 7 May 2021 13:16:38 -0800
Subject: [PATCH] consolidate tag/category pages

---
 .../{CategoryPage.vue => CategoryTagPage.vue} | 20 ++++++-
 frontend/src/pages/Recipes/CustomPage.vue     |  5 +-
 frontend/src/pages/Recipes/TagPage.vue        | 57 -------------------
 frontend/src/routes/recipes.js                |  7 +--
 4 files changed, 22 insertions(+), 67 deletions(-)
 rename frontend/src/pages/Recipes/{CategoryPage.vue => CategoryTagPage.vue} (64%)
 delete mode 100644 frontend/src/pages/Recipes/TagPage.vue

diff --git a/frontend/src/pages/Recipes/CategoryPage.vue b/frontend/src/pages/Recipes/CategoryTagPage.vue
similarity index 64%
rename from frontend/src/pages/Recipes/CategoryPage.vue
rename to frontend/src/pages/Recipes/CategoryTagPage.vue
index 89818210f..6f58a99a2 100644
--- a/frontend/src/pages/Recipes/CategoryPage.vue
+++ b/frontend/src/pages/Recipes/CategoryTagPage.vue
@@ -22,6 +22,12 @@ export default {
     currentCategory() {
       return this.$route.params.category;
     },
+    currentTag() {
+      return this.$route.params.tag;
+    },
+    TagOrCategory() {
+      return this.currentCategory || this.currentTag;
+    },
     shownRecipes() {
       if (this.sortedResults.length > 0) {
         return this.sortedResults;
@@ -31,7 +37,8 @@ export default {
     },
   },
   watch: {
-    async currentCategory() {
+    async TagOrCategory() {
+      console.log(this.currentCategory, this.currentTag);
       this.sortedResults = [];
       this.getRecipes();
     },
@@ -42,7 +49,16 @@ export default {
   },
   methods: {
     async getRecipes() {
-      let data = await api.categories.getRecipesInCategory(this.currentCategory);
+      if (!this.TagOrCategory === null) return;
+      console.log(this.TagOrCategory);
+
+      let data = {};
+      if (this.currentCategory) {
+        data = await api.categories.getRecipesInCategory(this.TagOrCategory);
+      } else {
+        data = await api.tags.getRecipesInTag(this.TagOrCategory);
+      }
+      console.log(data);
       this.title = data.name;
       this.recipes = data.recipes;
     },
diff --git a/frontend/src/pages/Recipes/CustomPage.vue b/frontend/src/pages/Recipes/CustomPage.vue
index ad6f6003a..7eaa5cfab 100644
--- a/frontend/src/pages/Recipes/CustomPage.vue
+++ b/frontend/src/pages/Recipes/CustomPage.vue
@@ -69,10 +69,7 @@ export default {
   methods: {
     async buildPage() {
       this.page = await api.siteSettings.getPage(this.pageSlug);
-    },
-    filterRecipe(slug) {
-      const storeCategory = this.recipeStore.find(element => element.slug === slug);
-      return storeCategory ? storeCategory.recipes : [];
+      this.tab = this.page.categories[0];
     },
     sortRecipes(sortedRecipes, destKey) {
       this.page.categories[destKey].recipes = sortedRecipes;
diff --git a/frontend/src/pages/Recipes/TagPage.vue b/frontend/src/pages/Recipes/TagPage.vue
deleted file mode 100644
index d5b63cf8a..000000000
--- a/frontend/src/pages/Recipes/TagPage.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <v-container>
-    <CardSection :sortable="true" :title="title" :recipes="shownRecipes" @sort="assignSorted" />
-  </v-container>
-</template>
-
-<script>
-import { api } from "@/api";
-import CardSection from "@/components/UI/CardSection";
-export default {
-  components: {
-    CardSection,
-  },
-  data() {
-    return {
-      title: "",
-      recipes: [],
-      sortedResults: [],
-    };
-  },
-  computed: {
-    currentTag() {
-      return this.$route.params.tag;
-    },
-    shownRecipes() {
-      if (this.sortedResults.length > 0) {
-        return this.sortedResults;
-      } else {
-        return this.recipes;
-      }
-    },
-  },
-  watch: {
-    async currentTag() {
-      this.getRecipes();
-      this.sortedResults = [];
-    },
-  },
-  mounted() {
-    this.getRecipes();
-    this.sortedResults = [];
-  },
-  methods: {
-    async getRecipes() {
-      let data = await api.tags.getRecipesInTag(this.currentTag);
-      this.title = data.name;
-      this.recipes = data.recipes;
-    },
-    assignSorted(val) {
-      console.log(val);
-      this.sortedResults = val.slice();
-    },
-  },
-};
-</script>
-
-<style></style>
diff --git a/frontend/src/routes/recipes.js b/frontend/src/routes/recipes.js
index cd099f780..3493d4940 100644
--- a/frontend/src/routes/recipes.js
+++ b/frontend/src/routes/recipes.js
@@ -2,15 +2,14 @@ import ViewRecipe from "@/pages/Recipe/ViewRecipe";
 import NewRecipe from "@/pages/Recipe/NewRecipe";
 import CustomPage from "@/pages/Recipes/CustomPage";
 import AllRecipes from "@/pages/Recipes/AllRecipes";
-import CategoryPage from "@/pages/Recipes/CategoryPage";
-import TagPage from "@/pages/Recipes/TagPage";
+import CategoryTagPage from "@/pages/Recipes/CategoryTagPage";
 import { api } from "@/api";
 
 export const recipeRoutes = [
   // Recipes
   { path: "/recipes/all", component: AllRecipes },
-  { path: "/recipes/tag/:tag", component: TagPage },
-  { path: "/recipes/category/:category", component: CategoryPage },
+  { path: "/recipes/tag/:tag", component: CategoryTagPage },
+  { path: "/recipes/category/:category", component: CategoryTagPage },
   // Misc
   { path: "/new/", component: NewRecipe },
   { path: "/pages/:customPage", component: CustomPage },