From ca5f74904232ee2f56dc80c86a3ad49600708a36 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sat, 4 May 2024 12:39:30 +1000
Subject: [PATCH] Moved actions to relevant pages, made recipes page

---
 src/App.vue                        |  2 +-
 src/components/ActionsPage.vue     | 30 ------------------------------
 src/components/EditRecipePage.vue  |  2 +-
 src/components/MealPlanPage.vue    |  6 +++---
 src/components/RecipeSearchBox.vue |  5 ++++-
 src/components/RecipesPage.vue     | 18 ++++++++++++++++++
 src/components/ShoppingPage.vue    | 16 ++++++++++++++--
 src/data.js                        |  1 +
 src/main.js                        |  7 ++++---
 9 files changed, 46 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/ActionsPage.vue
 create mode 100644 src/components/RecipesPage.vue

diff --git a/src/App.vue b/src/App.vue
index 902f260..563e382 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <p>
     <ul class="nav">
         <li class="nav-item">
-            <router-link class="nav-link" to="/" active-class="active">Actions</router-link>
+            <router-link class="nav-link" to="/recipes" active-class="active">Recipes</router-link>
         </li>
         <li class="nav-item">
             <router-link class="nav-link" to="/mealplan" active-class="active">Meal Plan</router-link>
diff --git a/src/components/ActionsPage.vue b/src/components/ActionsPage.vue
deleted file mode 100644
index e58f022..0000000
--- a/src/components/ActionsPage.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <div>
-        <action-item title="Add to next shop" :image="require('@/assets/add-cart.svg')" @click="addToNextShop" />
-        <action-item title="Add Recipe" :image="require('@/assets/add-recipe.svg')" @click="addRecipe" />
-        <action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="planMeal" />
-    </div>
-</template>
-<script>
-import ActionItem from './ActionItem.vue'
-
-export default {
-    name: 'ActionsPage',
-    components: {
-        ActionItem
-    },
-    methods: {
-        addToNextShop() {
-            console.log('Add to next shop')
-        },
-        addRecipe() {
-            console.log('Add Recipe')
-            this.$router.push('/recipes/add')
-        },
-        planMeal() {
-            console.log('Plan Meal')
-            this.$router.push('/meals/add')
-        }
-    }
-}
-</script>
\ No newline at end of file
diff --git a/src/components/EditRecipePage.vue b/src/components/EditRecipePage.vue
index abc8ac0..55d9fa2 100644
--- a/src/components/EditRecipePage.vue
+++ b/src/components/EditRecipePage.vue
@@ -180,7 +180,7 @@ export default {
         async deleteRecipe() {
             if (confirm('Are you sure you want to delete this recipe?')) {
                 await data.deleteRecipe(this.recipe.id);
-                this.$router.push('/');
+                this.$router.push('/recipes');
             }
         }
     },
diff --git a/src/components/MealPlanPage.vue b/src/components/MealPlanPage.vue
index 4d64629..3e34d43 100644
--- a/src/components/MealPlanPage.vue
+++ b/src/components/MealPlanPage.vue
@@ -16,6 +16,7 @@
         <ul v-if="!meals.length">
             <li>No meals planned</li>
         </ul>
+        <action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="() => this.$router.push('/meals/add')" />
     </div>
 </template>
 
@@ -76,14 +77,13 @@ ul.actions {
 </style>
 
 <script>
+import ActionItem from './ActionItem.vue'
 import MealCard from './MealCard.vue'
 import data from '@/data.js'
 
 export default {
     name: 'MealPlanPage',
-    components: {
-        MealCard
-    },
+    components: { MealCard, ActionItem },
     data() {
         const from = new Date();
         from.setTime(0);
diff --git a/src/components/RecipeSearchBox.vue b/src/components/RecipeSearchBox.vue
index b8bf779..84c9701 100644
--- a/src/components/RecipeSearchBox.vue
+++ b/src/components/RecipeSearchBox.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="recipe-search-box" @focusout="recipes = []">
         <input type="text" v-model="searchTerm" @keyup.enter="search" @keyup.exit="clear" @focusin="search"
-            placeholder="Add a recipe..." />
+            :placeholder="placeholder" />
         <ul v-if="recipes?.length" class="dropdown">
             <li class="recipe" v-for="recipe in recipes" :key="recipe.id" @mousedown="selectRecipe(recipe)">
                 <recipe-card :recipe="recipe" />
@@ -17,6 +17,9 @@ import RecipeCard from './RecipeCard.vue';
 export default {
     name: 'RecipeSearchBox',
     components: { RecipeCard },
+    props: {
+        placeholder: { type: String, default: 'Add a recipe...' }
+    },
     data() {
         return {
             searchTerm: '',
diff --git a/src/components/RecipesPage.vue b/src/components/RecipesPage.vue
new file mode 100644
index 0000000..1c03f25
--- /dev/null
+++ b/src/components/RecipesPage.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <recipe-search-box placeholder="Search for a recipe..." @select-recipe="(r) => this.$router.push(`/recipes/${r.id}`)"/>
+        <action-item title="Add new Recipe" :image="require('@/assets/add-recipe.svg')" @click="() => this.$router.push('/recipes/add')" />
+    </div>
+</template>
+<script>
+import ActionItem from './ActionItem.vue'
+import RecipeSearchBox from './RecipeSearchBox.vue';
+
+export default {
+    name: 'ActionsPage',
+    components: {
+        ActionItem,
+        RecipeSearchBox
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ShoppingPage.vue b/src/components/ShoppingPage.vue
index 6c2c4f4..6088278 100644
--- a/src/components/ShoppingPage.vue
+++ b/src/components/ShoppingPage.vue
@@ -1,5 +1,17 @@
 <template>
     <div>
-        Shopping
+        Shopping <br>
+        <action-item title="Add to next shop" :image="require('@/assets/add-cart.svg')" @click="() => this.$router.push('/')" />
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import ActionItem from './ActionItem.vue'
+
+export default {
+    name: 'ShoppingPage',
+    components: {
+        ActionItem
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/data.js b/src/data.js
index b61d884..1951a60 100644
--- a/src/data.js
+++ b/src/data.js
@@ -119,6 +119,7 @@ export default {
     async deleteRecipe(id) {
         var response = await fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`, {
             method: "DELETE",
+            credentials: "include",
         });
         return await response.json();
     }
diff --git a/src/main.js b/src/main.js
index 32bdfd3..1d5646a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 
 import LoginPage from './components/LoginPage.vue'
-import ActionsPage from './components/ActionsPage.vue'
+import RecipesPage from './components/RecipesPage.vue'
 import MealPlanPage from './components/MealPlanPage.vue'
 import ShoppingPage from './components/ShoppingPage.vue'
 import EditMealPage from './components/EditMealPage.vue'
@@ -14,10 +14,11 @@ import EditRecipePage from './components/EditRecipePage.vue'
 // Each route should map to a component.
 // We'll talk about nested routes later.
 const routes = [
-    { path: '/', component: ActionsPage },
-    { path: '/login', component: LoginPage },
+    { path: '/', component: MealPlanPage },
     { path: '/mealplan', component: MealPlanPage },
+    { path: '/login', component: LoginPage },
     { path: '/shopping', component: ShoppingPage },
+    { path: '/recipes', component: RecipesPage },
     { path: '/recipes/add', component: EditRecipePage },
     { path: '/recipes/:id', component: EditRecipePage, props: true },
     { path: '/meals/add', component: EditMealPage },