Uninline the elements #113

gothinkster · May 19, 2019 · 0debfbc · 0debfbc
1 parent 2e7cd97
commit 0debfbc
Showing 1 changed file with 29 additions and 20 deletions.
diff --git 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() {