From 32357f5d6d15fb1dc861a60b2481c148ce1c3901 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Fri, 8 May 2020 16:08:54 +0100
Subject: [PATCH] Add a component for entries in a Story list

We're going to want to list Stories in more than one place, and we
should use a reusable component for the entries to keep the UI
consistent.
---
 src/components/StoryListItem.vue | 40 ++++++++++++++++++++++++++++++++
 src/views/StoryList.vue          | 36 ++++------------------------
 2 files changed, 45 insertions(+), 31 deletions(-)
 create mode 100644 src/components/StoryListItem.vue

diff --git a/src/components/StoryListItem.vue b/src/components/StoryListItem.vue
new file mode 100644
index 0000000..d416aa3
--- /dev/null
+++ b/src/components/StoryListItem.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="story">
+    <h3>
+      <router-link :to="'/story/' + story.id">{{ story.id }}. {{ story.title }}</router-link>
+    </h3>
+    <span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StoryListItem',
+  props: ['story']
+}
+</script>
+
+<style lang="scss" scoped>
+.story {
+  padding: 20px;
+  border-top: solid 1px #ddd;
+
+  &:hover {
+    background-color: #fff;
+  }
+
+  h3 {
+    margin-top: 0;
+    font-size: 1.25em;
+    font-weight: 300;
+  }
+}
+
+.tag {
+  padding: 6px 12px;
+  margin: 0 5px;
+  background-color: #f0ad4e;
+  color: #f7f6f4;
+  border-radius: 20px;
+}
+</style>
diff --git a/src/views/StoryList.vue b/src/views/StoryList.vue
index e65b232..4c7da86 100644
--- a/src/views/StoryList.vue
+++ b/src/views/StoryList.vue
@@ -1,20 +1,19 @@
 <template>
   <div class="story-list">
     <h1>Stories</h1>
-    <div class="story" v-for="story in stories" :key="story.id">
-      <h3>
-        <router-link :to="'/story/' + story.id">{{ story.id }}. {{ story.title }}</router-link>
-      </h3>
-      <span class="tag" v-for="tag in story.tags" :key="tag">{{ tag }}</span>
-    </div>
+    <StoryListItem v-for="story in stories" :key="story.id" :story="story" />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
+import StoryListItem from '@/components/StoryListItem.vue'
 
 export default {
   name: 'StoryListView',
+  components: {
+    StoryListItem
+  },
   data: function () {
     return {
       stories: []
@@ -34,28 +33,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.story {
-  padding: 20px;
-  border-top: solid 1px #ddd;
-
-  &:hover {
-    background-color: #fff;
-  }
-
-  h3 {
-    margin-top: 0;
-    font-size: 1.25em;
-    font-weight: 300;
-  }
-}
-
-.tag {
-  padding: 6px 12px;
-  margin: 0 5px;
-  background-color: #f0ad4e;
-  color: #f7f6f4;
-  border-radius: 20px;
-}
-</style>