Moved actions to relevant pages, made recipes page

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>

src/components/ActionsPage.vue

@@ -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>

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');
             }
         }
     },

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

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: '',

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>

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>
+</template>
+
+<script>
+import ActionItem from './ActionItem.vue'
+
+export default {
+    name: 'ShoppingPage',
+    components: {
+        ActionItem
+    }
+}
+</script>

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();
     }

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