From 20be3cc5cac7cbeea591693886509113a22ca3f7 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 11 Oct 2020 14:04:42 +0200
Subject: [PATCH] If date in params, fetch only that date.

- Now handles only fetching date by epoch from url params.
- Displays date w/ helper function humanReadableDate.
---
 src/components/HistoryPage.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 372e348..c1951b4 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -2,14 +2,15 @@
   <div>
     <h1>Historie fra tidligere lotteri</h1>
 
-    <div v-if="lotteries.length" v-for="lottery in lotteries">
-      <Winners :winners="lottery.winners" :title="`Vinnere fra ${lottery.dateString}`" />
+    <div v-if="lotteries.length || lotteries != null" v-for="lottery in lotteries">
+      <Winners :winners="lottery.winners" :title="`Vinnere fra ${humanReadableDate(lottery.date)}`" />
     </div>
   </div>
 </template>
 
 <script>
-import { historyAll } from '@/api'
+import { historyByDate, historyAll } from '@/api'
+import { humanReadableDate } from "@/utils";
 import Winners from '@/ui/Winners'
 
 export default {
@@ -20,9 +21,18 @@ export default {
       lotteries: [],
     }
   },
+  methods: {
+    humanReadableDate: humanReadableDate
+  },
   created() {
-    historyAll()
-      .then(history => this.lotteries = history.lotteries.reverse())
+    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)
   }
 }
 </script>