Api call from component itself.

frontend/components/HistoryPage.vue

@@ -3,42 +3,51 @@
     <h1>Historie fra tidligere lotteri</h1>
 
     <div v-if="lotteries.length || lotteries != null" v-for="lottery in lotteries">
-      <Winners :winners="lottery.winners" :title="`Vinnere fra ${ humanReadableDate(lottery.date) }`" />
+      <Winners :winners="lottery.winners" :title="`Vinnere fra ${humanReadableDate(lottery.date)}`" />
     </div>
   </div>
 </template>
 
 <script>
-import { historyByDate, historyAll } from '@/api'
+import { historyByDate, historyAll } from "@/api";
 import { humanReadableDate } from "@/utils";
-import Winners from '@/ui/Winners'
+import Winners from "@/ui/Winners";
 
 export default {
-  name: 'History page of prev lotteries',
+  name: "History page of prev lotteries",
   components: { Winners },
   data() {
     return {
-      lotteries: [],
-    }
-  },
-  methods: {
-    humanReadableDate: humanReadableDate
+      lotteries: []
+    };
   },
   created() {
     const dateFromUrl = this.$route.params.date;
 
-    if (dateFromUrl !== undefined)
-      historyByDate(dateFromUrl)
-        .then(history => this.lotteries = { "lottery": history })
-    else
-      historyAll()
-        .then(history => this.lotteries = history.lotteries)
+    if (dateFromUrl !== undefined) {
+      this.fetchHistoryByDate(dateFromUrl).then(history => (this.lotteries = [history]));
+    } else {
+      this.fetchHistory().then(history => (this.lotteries = history));
+    }
+  },
+  methods: {
+    humanReadableDate: humanReadableDate,
+    fetchHistory() {
+      return fetch("/api/history/by-date")
+        .then(resp => resp.json())
+        .then(response => response.lotteries);
+    },
+    fetchHistoryByDate(date) {
+      return fetch(`/api/history/by-date/${date}`)
+        .then(resp => resp.json())
+        .then(response => response);
+    }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 h1 {
   text-align: center;
 }
-</style>
+</style>