Add prev and next cocktail links

karlomikus · Aug 6, 2023 · 5013d95 · 5013d95
1 parent 9265099
commit 5013d95
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/ApiRequests.js b/src/ApiRequests.js
@@ -97,8 +97,9 @@ class ApiRequests
         return this.parseResponse(jsonResp);
     }
 
-    static async fetchCocktail(id) {
-        let jsonResp = await this.getRequest(`/api/cocktails/${id}`);
+    static async fetchCocktail(id, queryParams = {}) {
+        const q = this.generateBAQueryString(queryParams)
+        let jsonResp = await this.getRequest(`/api/cocktails/${id}${q}`);
 
         return this.parseResponse(jsonResp);
     }

diff --git a/src/components/Cocktail/CocktailDetails.vue b/src/components/Cocktail/CocktailDetails.vue
@@ -257,6 +257,10 @@
                     <h3 class="details-block-container__title">{{ $t('notes') }}</h3>
                     <Note v-for="note in cocktail.notes" :note="note" @noteDeleted="fetchCocktail"></Note>
                 </div>
+                <div class="cocktail-details__navigation">
+                    <RouterLink v-if="cocktail.navigation.prev" :to="{name: 'cocktails.show', params: {id: cocktail.navigation.prev}}">{{ $t('cocktail-prev') }}</RouterLink>
+                    <RouterLink v-if="cocktail.navigation.next" :to="{name: 'cocktails.show', params: {id: cocktail.navigation.next}}">{{ $t('cocktail-next') }}</RouterLink>
+                </div>
             </div>
             <div class="cocktail-details__main__aside">
                 <h3 class="page-subtitle" style="margin-top: 0">{{ $t('cocktails-similar') }}</h3>
@@ -387,7 +391,7 @@ export default {
             this.userShelfIngredients = Auth.getUser().shelf_ingredients;
             this.userShoppingListIngredients = Auth.getUser().shopping_lists;
 
-            ApiRequests.fetchCocktail(this.$route.params.id).then(data => {
+            ApiRequests.fetchCocktail(this.$route.params.id, {navigation: true}).then(data => {
                 this.isLoading = false;
                 this.cocktail = data
                 this.isFavorited = Auth.getUser().favorite_cocktails.includes(this.cocktail.id);
@@ -711,4 +715,12 @@ export default {
 .cocktail-details__chips .rating {
     line-height: 1;
 }
+
+.cocktail-details__navigation {
+    display: flex;
+    padding: 0.5rem 0;
+}
+.cocktail-details__navigation a:last-child {
+    margin-left: auto;
+}
 </style>
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
@@ -315,5 +315,7 @@
   "results-per-page": "Per page",
   "used-as-main-ingredient": "Used as main ingredient",
   "total-cocktails": "Total cocktails",
-  "share-copy-md": "Copy as Markdown"
+  "share-copy-md": "Copy as Markdown",
+  "cocktail-prev": "Previous cocktail",
+  "cocktail-next": "Next cocktail"
 }