From 33388408b6b7c14a0c3dd4af0bef2603b6e399c7 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Fri, 27 May 2022 22:51:46 +0200
Subject: [PATCH] Show recent snippets from json data

---
 src/components/snippets/SnippetList.vue       | 14 ++++++--
 .../snippets/SnippetListElement.vue           | 34 +++++++++++++++++--
 src/interfaces/Snippet.ts                     |  7 ++++
 src/views/HomeView.vue                        | 15 ++++++--
 4 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 src/interfaces/Snippet.ts

diff --git a/src/components/snippets/SnippetList.vue b/src/components/snippets/SnippetList.vue
index 7f9c6fc..d33f2bf 100644
--- a/src/components/snippets/SnippetList.vue
+++ b/src/components/snippets/SnippetList.vue
@@ -10,13 +10,18 @@
         </div>
         <div class="list">
             <ul class="snippet-items">
-                <snippet-list-element />
+                <snippet-list-element
+                    v-for="(snippet, index) in snippets"
+                    :key="index"
+                    :snippet="snippet"
+                />
             </ul>
         </div>
     </section>
 </template>
 
 <script lang="ts">
+import Snippet from "@/interfaces/Snippet";
 import { Options, Vue } from "vue-class-component";
 
 import SnippetListElement from "./SnippetListElement.vue";
@@ -25,8 +30,13 @@ import SnippetListElement from "./SnippetListElement.vue";
     components: {
         SnippetListElement,
     },
+    props: {
+        snippets: Array,
+    },
 })
-export default class SnippetList extends Vue {}
+export default class SnippetList extends Vue {
+    private snippets!: Snippet[];
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/snippets/SnippetListElement.vue b/src/components/snippets/SnippetListElement.vue
index e4ce1f3..8539b03 100644
--- a/src/components/snippets/SnippetListElement.vue
+++ b/src/components/snippets/SnippetListElement.vue
@@ -6,10 +6,38 @@
             class="snippet-image"
         />
         <div class="snippet-text">
-            <h4 class="snippet-title">Title</h4>
-            <span class="snippet-date" title="pretty date">
-                relative date
+            <h4 class="snippet-title">{{ snippet.title }}</h4>
+            <span class="snippet-date" :title="prettyDate">
+                {{ relativeDate }}
             </span>
         </div>
     </li>
 </template>
+
+<script lang="ts">
+import Snippet from "@/interfaces/Snippet";
+import { Options, Vue } from "vue-class-component";
+
+import { DateTime } from "luxon";
+
+@Options({
+    props: {
+        snippet: Object,
+    },
+})
+export default class SnippetListElement extends Vue {
+    private snippet!: Snippet;
+
+    private get dateAsDateTime() {
+        return DateTime.fromSeconds(this.snippet.timeAdded);
+    }
+
+    private get prettyDate() {
+        return this.dateAsDateTime.toLocaleString(DateTime.DATETIME_FULL);
+    }
+
+    private get relativeDate() {
+        return this.dateAsDateTime.toRelative()?.toString();
+    }
+}
+</script>
diff --git a/src/interfaces/Snippet.ts b/src/interfaces/Snippet.ts
new file mode 100644
index 0000000..38698b5
--- /dev/null
+++ b/src/interfaces/Snippet.ts
@@ -0,0 +1,7 @@
+export default interface Snippet {
+    title: string;
+    slug: string;
+    timeAdded: number;
+    snippet: string;
+    tags: string[];
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e92bf1f..8a5fd8e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <snippet-list />
+    <snippet-list :snippets="recentSnippets" />
 </template>
 
 <script lang="ts">
@@ -7,10 +7,21 @@ import { Options, Vue } from "vue-class-component";
 
 import SnippetList from "@/components/snippets/SnippetList.vue";
 
+import snippets from "@/data/snippets.json";
+import Snippet from "@/interfaces/Snippet";
+
 @Options({
     components: {
         SnippetList,
     },
 })
-export default class HomeView extends Vue {}
+export default class HomeView extends Vue {
+    private snippets: Snippet[] = snippets;
+
+    get recentSnippets() {
+        return this.snippets
+            .sort((a, b) => a.timeAdded - b.timeAdded)
+            .slice(0, 5);
+    }
+}
 </script>