From c8eaef8e8033305c724c4e2c2aee98837a966ca2 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Sat, 28 May 2022 00:27:38 +0200
Subject: [PATCH] Add common tag list

---
 src/App.vue                     | 20 +++++++++++++++++++-
 src/components/tags/TagList.vue | 12 +++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a90af6d..4f5b5ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,9 @@ import PageHeader from "@/components/header/PageHeader.vue";
 import PageFooter from "@/components/footer/PageFooter.vue";
 import TagList from "@/components/tags/TagList.vue";
 
+import snippets from "@/data/snippets.json";
+import Snippet from "@/interfaces/Snippet";
+
 @Options({
     components: {
         PageHeader,
@@ -29,5 +32,20 @@ import TagList from "@/components/tags/TagList.vue";
         TagList,
     },
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+    private snippets: Snippet[] = snippets;
+
+    private get commonTags() {
+        const tagCounts = this.snippets
+            .flatMap((e) => e.tags)
+            .reduce((acc: { [key: string]: number }, tag) => {
+                acc[tag] = (acc[tag] ?? 0) + 1;
+                return acc;
+            }, {});
+
+        return Object.keys(tagCounts)
+            .sort((a, b) => tagCounts[a] - tagCounts[b])
+            .slice(0, 5);
+    }
+}
 </script>
diff --git a/src/components/tags/TagList.vue b/src/components/tags/TagList.vue
index 1cde70b..4fdd98c 100644
--- a/src/components/tags/TagList.vue
+++ b/src/components/tags/TagList.vue
@@ -2,9 +2,9 @@
     <section class="snippet-common-tags">
         <h3>Common tags</h3>
         <ul class="common-tags">
-            <li>
+            <li v-for="tag in tags" :key="tag">
                 <arrow-image />
-                <a href="javascript:void(0)">Some tag</a>
+                <a href="javascript:void(0)">{{ tag }}</a>
             </li>
         </ul>
     </section>
@@ -14,11 +14,17 @@
 import { Options, Vue } from "vue-class-component";
 
 import ArrowImage from "@/components/ArrowImage.vue";
+import Snippet from "@/interfaces/Snippet";
 
 @Options({
     components: {
         ArrowImage,
     },
+    props: {
+        tags: Array,
+    },
 })
-export default class TagList extends Vue {}
+export default class TagList extends Vue {
+    private tags!: Snippet[];
+}
 </script>