From 7e1e2c0bd31ba594661f8ed2d8ac7cd7942f965b Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 26 Dec 2018 13:37:23 +0000
Subject: [PATCH] Extract star/unstar button

---
 src/components/Application/ApplicationCard.vue | 12 ++++--------
 src/components/Application/StarToggle.vue      | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Application/StarToggle.vue

diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index 6665089..510c1b7 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -17,10 +17,7 @@
         </div>
 
         <div class="flex-none w-1/6 text-right">
-          <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']">
-            <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
-            <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
-          </button>
+          <star-toggle :application="application"></star-toggle>
         </div>
       </div>
     </div>
@@ -41,10 +38,7 @@
           </div>
 
           <div class="px-2">
-            <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']">
-              <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
-              <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
-            </button>
+            <star-toggle :application="application"></star-toggle>
           </div>
         </div>
       </div>
@@ -54,10 +48,12 @@
 
 <script>
 import ApplicationTags from '@/components/Application/ApplicationTags'
+import StarToggle from '@/components/Application/StarToggle'
 
 export default {
   components: {
     ApplicationTags,
+    StarToggle,
   },
 
   props: {
diff --git a/src/components/Application/StarToggle.vue b/src/components/Application/StarToggle.vue
new file mode 100644
index 0000000..0eae01d
--- /dev/null
+++ b/src/components/Application/StarToggle.vue
@@ -0,0 +1,14 @@
+<template>
+  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']">
+    <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
+    <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    application: Object,
+  },
+}
+</script>