From a6fb9d6cf35ac8bf4edd3d4577ce2b3ba56b520a Mon Sep 17 00:00:00 2001
From: Kevin Peters <kevinigeligeligel@gmail.com>
Date: Sun, 19 May 2019 15:43:32 +0200
Subject: [PATCH] Uninline the elements #113 (#117)

---
 src/components/ArticleActions.vue | 49 ++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/components/ArticleActions.vue b/src/components/ArticleActions.vue
index ed5b00da..eea3b7c2 100644
--- a/src/components/ArticleActions.vue
+++ b/src/components/ArticleActions.vue
@@ -1,40 +1,29 @@
 <template>
   <!-- Used when user is also author -->
   <span v-if="canModify">
-    <router-link
-      class="btn btn-sm btn-outline-secondary"
-      :to="{ name: 'article-edit', params: { slug: this.article.slug } }"
-    >
-      <i class="ion-edit"></i><span>&nbsp;Edit Article</span>
+    <router-link class="btn btn-sm btn-outline-secondary" :to="editArticleLink">
+      <i class="ion-edit"></i> <span>&nbsp;Edit Article</span>
     </router-link>
     <span>&nbsp;&nbsp;</span>
     <button class="btn btn-outline-danger btn-sm" @click="deleteArticle">
-      <i class="ion-trash-a"></i><span>&nbsp;Delete Article</span>
+      <i class="ion-trash-a"></i> <span>&nbsp;Delete Article</span>
     </button>
   </span>
   <!-- Used in ArticleView when not author -->
   <span v-else>
     <button class="btn btn-sm btn-outline-secondary" @click="toggleFollow">
       <i class="ion-plus-round"></i> <span>&nbsp;</span>
-      <span
-        >{{ profile.following ? "Unfollow" : "Follow" }}
-        {{ article.author.username }}</span
-      >
+      <span v-text="followUserLabel" />
     </button>
     <span>&nbsp;&nbsp;</span>
     <button
       class="btn btn-sm"
       @click="toggleFavorite"
-      :class="{
-        'btn-primary': article.favorited,
-        'btn-outline-primary': !article.favorited
-      }"
+      :class="toggleFavoriteButtonClasses"
     >
-      <i class="ion-heart"></i><span>&nbsp;</span>
-      <span>
-        {{ article.favorited ? "Unfavorite Article" : "Favorite Article" }}
-      </span>
-      <span class="counter"> ({{ article.favoritesCount }}) </span>
+      <i class="ion-heart"></i> <span>&nbsp;</span>
+      <span v-text="favoriteArticleLabel" /> <span>&nbsp;</span>
+      <span class="counter" v-text="favoriteCounter" />
     </button>
   </span>
 </template>
@@ -56,7 +45,27 @@ export default {
     canModify: { type: Boolean, required: true }
   },
   computed: {
-    ...mapGetters(["profile", "isAuthenticated"])
+    ...mapGetters(["profile", "isAuthenticated"]),
+    editArticleLink() {
+      return { name: "article-edit", params: { slug: this.article.slug } };
+    },
+    toggleFavoriteButtonClasses() {
+      return {
+        "btn-primary": this.article.favorited,
+        "btn-outline-primary": !this.article.favorited
+      };
+    },
+    followUserLabel() {
+      return `${this.profile.following ? "Unfollow" : "Follow"} ${
+        this.article.author.username
+      }`;
+    },
+    favoriteArticleLabel() {
+      return this.article.favorited ? "Unfavorite Article" : "Favorite Article";
+    },
+    favoriteCounter() {
+      return `(${this.article.favoritesCount})`;
+    }
   },
   methods: {
     toggleFavorite() {