From 72c18967476389747ea2fad0ef0f924aee900a51 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 18 Feb 2021 21:14:34 +0100
Subject: [PATCH] Do api call from within the component itself.

---
 frontend/components/AllRequestedWines.vue | 46 ++++++++++++++---------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/components/AllRequestedWines.vue b/frontend/components/AllRequestedWines.vue
index a2996d1..b13e93e 100644
--- a/frontend/components/AllRequestedWines.vue
+++ b/frontend/components/AllRequestedWines.vue
@@ -5,37 +5,47 @@
     <section class="requested-wines-container">
       <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
 
-      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.wine._id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/>
+      <RequestedWineCard
+        v-for="requestedWine in wines"
+        :key="requestedWine.wine._id"
+        :requestedElement="requestedWine"
+        @wineDeleted="filterOutDeletedWine"
+        :showDeleteButton="isAdmin"
+      />
     </section>
   </main>
 </template>
 
 <script>
-import { allRequestedWines } from "@/api";
 import RequestedWineCard from "@/ui/RequestedWineCard";
 export default {
   components: {
     RequestedWineCard
   },
-  data(){
-    return{
+  data() {
+    return {
       wines: undefined,
-      canRequest: true,
       isAdmin: false
-    }
-  },
-  methods: {
-    filterOutDeletedWine(wine){
-      this.wines = this.wines.filter(item => item.wine._id !== wine._id)
-    },
-    async refreshData(){
-      [this.wines, this.isAdmin] = await allRequestedWines() || [[], false]
-    }
+    };
   },
   mounted() {
-    this.refreshData()
+    this.fetchRequestedWines();
+  },
+  methods: {
+    filterOutDeletedWine(wine) {
+      this.wines = this.wines.filter(item => item.wine._id !== wine._id);
+    },
+    fetchRequestedWines() {
+      return fetch("/api/requests")
+        .then(resp => {
+          this.isAdmin = resp.headers.get("vinlottis-admin") == "true";
+          return resp;
+        })
+        .then(resp => resp.json())
+        .then(response => (this.wines = response.wines));
+    }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -56,9 +66,9 @@ h1 {
   font-weight: normal;
 }
 
-.requested-wines-container{
+.requested-wines-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 2rem;
 }
-</style>
\ No newline at end of file
+</style>