From edf132c1688a0e5af0bd0dd2926671dc8ef45e75 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Sat, 28 May 2022 13:24:49 +0200
Subject: [PATCH] Implement bare-bones snippets detail view

---
 src/components/header/HeaderNavigation.vue    |  4 ++-
 src/components/snippets/SnippetList.vue       |  2 +-
 .../snippets/SnippetListElement.vue           | 12 ++++++-
 src/components/snippets/SnippetShow.vue       | 30 ++++++++++++++++++
 src/interfaces/Snippet.ts                     |  1 +
 src/router/index.ts                           | 13 ++++++--
 ...{SnippetsView.vue => SnippetIndexView.vue} |  0
 src/views/SnippetShowView.vue                 | 31 +++++++++++++++++++
 8 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 src/components/snippets/SnippetShow.vue
 rename src/views/{SnippetsView.vue => SnippetIndexView.vue} (100%)
 create mode 100644 src/views/SnippetShowView.vue

diff --git a/src/components/header/HeaderNavigation.vue b/src/components/header/HeaderNavigation.vue
index 66eb543..d34c8a1 100644
--- a/src/components/header/HeaderNavigation.vue
+++ b/src/components/header/HeaderNavigation.vue
@@ -2,7 +2,9 @@
     <nav class="site-nav">
         <ul class="nav-items">
             <li class="nav-item">
-                <router-link :to="{ name: 'snippets' }">Snippets</router-link>
+                <router-link :to="{ name: 'snippet-index' }">
+                    Snippets
+                </router-link>
             </li>
         </ul>
     </nav>
diff --git a/src/components/snippets/SnippetList.vue b/src/components/snippets/SnippetList.vue
index 208e53f..e9e4f85 100644
--- a/src/components/snippets/SnippetList.vue
+++ b/src/components/snippets/SnippetList.vue
@@ -3,7 +3,7 @@
         <div class="header">
             <h3>Latest snippets</h3>
             <div class="all-snippets" v-if="showAllSnippets">
-                <router-link :to="{ name: 'snippets' }">
+                <router-link :to="{ name: 'snippet-index' }">
                     All snippets
                 </router-link>
             </div>
diff --git a/src/components/snippets/SnippetListElement.vue b/src/components/snippets/SnippetListElement.vue
index 8539b03..5755f91 100644
--- a/src/components/snippets/SnippetListElement.vue
+++ b/src/components/snippets/SnippetListElement.vue
@@ -1,5 +1,5 @@
 <template>
-    <li class="snippet-item">
+    <li class="snippet-item" @click="navigate">
         <img
             src="//via.placeholder.com/128"
             alt="Snippet Topic"
@@ -39,5 +39,15 @@ export default class SnippetListElement extends Vue {
     private get relativeDate() {
         return this.dateAsDateTime.toRelative()?.toString();
     }
+
+    private navigate() {
+        this.$router.push({
+            name: "snippet-show",
+            params: {
+                id: this.snippet.id,
+                slug: this.snippet.slug,
+            },
+        });
+    }
 }
 </script>
diff --git a/src/components/snippets/SnippetShow.vue b/src/components/snippets/SnippetShow.vue
new file mode 100644
index 0000000..e62e930
--- /dev/null
+++ b/src/components/snippets/SnippetShow.vue
@@ -0,0 +1,30 @@
+<template>
+    <h1>{{ snippet.title }}</h1>
+    <h5>Added on {{ prettyDate }}</h5>
+
+    <code>{{ snippet.snippet }}</code>
+</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 SnippetShow extends Vue {
+    private snippet?: Snippet;
+
+    private get prettyDate() {
+        if (!this.snippet) return undefined;
+
+        return DateTime.fromSeconds(this.snippet.timeAdded).toLocaleString(
+            DateTime.DATE_FULL
+        );
+    }
+}
+</script>
diff --git a/src/interfaces/Snippet.ts b/src/interfaces/Snippet.ts
index 38698b5..66cc073 100644
--- a/src/interfaces/Snippet.ts
+++ b/src/interfaces/Snippet.ts
@@ -1,4 +1,5 @@
 export default interface Snippet {
+    id: number;
     title: string;
     slug: string;
     timeAdded: number;
diff --git a/src/router/index.ts b/src/router/index.ts
index 95c2c16..fea09c2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import SnippetsView from "../views/SnippetsView.vue";
+import SnippetIndexView from "../views/SnippetIndexView.vue";
+import SnippetShowView from "../views/SnippetShowView.vue";
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -10,8 +11,14 @@ const routes: Array<RouteRecordRaw> = [
     },
     {
         path: "/snippets",
-        name: "snippets",
-        component: SnippetsView,
+        name: "snippet-index",
+        component: SnippetIndexView,
+    },
+    {
+        path: "/snippets/:id-:slug",
+        name: "snippet-show",
+        component: SnippetShowView,
+        props: true,
     },
 ];
 
diff --git a/src/views/SnippetsView.vue b/src/views/SnippetIndexView.vue
similarity index 100%
rename from src/views/SnippetsView.vue
rename to src/views/SnippetIndexView.vue
diff --git a/src/views/SnippetShowView.vue b/src/views/SnippetShowView.vue
new file mode 100644
index 0000000..75cd2f5
--- /dev/null
+++ b/src/views/SnippetShowView.vue
@@ -0,0 +1,31 @@
+<template>
+    <snippet-show :snippet="snippet" />
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import SnippetShow from "@/components/snippets/SnippetShow.vue";
+
+import snippets from "@/data/snippets.json";
+import Snippet from "@/interfaces/Snippet";
+
+@Options({
+    components: {
+        SnippetShow,
+    },
+    props: {
+        id: String,
+        slug: String,
+    },
+})
+export default class HomeView extends Vue {
+    private snippets: Snippet[] = snippets;
+    private id!: string;
+
+    get snippet() {
+        const paramSnippetId = parseInt(this.id);
+        return this.snippets.find((snippet) => snippet.id == paramSnippetId);
+    }
+}
+</script>