From 242ae8e91b1586aee185873b2f2d10bb52495ef3 Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Sun, 13 Nov 2016 16:42:56 +0100
Subject: [PATCH 1/3] Add retweet button component Expand API service for
 retweet

---
 .../retweet_button/retweet_button.js           | 16 ++++++++++++++++
 .../retweet_button/retweet_button.vue          | 18 ++++++++++++++++++
 src/components/status/status.js                |  2 ++
 src/components/status/status.vue               |  4 +---
 src/services/api/api.service.js                |  9 +++++++++
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/components/retweet_button/retweet_button.js
 create mode 100644 src/components/retweet_button/retweet_button.vue

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
new file mode 100644
index 00000000..42da2531
--- /dev/null
+++ b/src/components/retweet_button/retweet_button.js
@@ -0,0 +1,16 @@
+const RetweetButton = {
+  props: [ 'status' ],
+  methods: {
+    retweet () {
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'retweeted': this.status.repeated
+      }
+    }
+  }
+}
+
+export default RetweetButton
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
new file mode 100644
index 00000000..ed5cb935
--- /dev/null
+++ b/src/components/retweet_button/retweet_button.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <i :class='classes' class='icon-retweet fa' v-on:click.prevent=''></i>
+    <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
+  </div>
+</template>
+
+<script src="./retweet_button.js" ></script>
+
+<style>
+ .icon-retweet {
+     cursor: pointer
+ }
+ .retweeted {
+     cursor: auto;
+     color: green;
+ }
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 6253d334..0bf2ecde 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,5 +1,6 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
+import RetweetButton from '../retweet_button/retweet_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const Status = {
@@ -24,6 +25,7 @@ const Status = {
   components: {
     Attachment,
     FavoriteButton,
+    RetweetButton,
     PostStatusForm
   },
   methods: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 48c910c0..d309c495 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -37,9 +37,7 @@
                 <i class='fa icon-reply'></i>
               </a>
             </div>
-            <div>
-              <i class='fa icon-retweet'></i>
-            </div>
+            <retweet-button :status=status></retweet-button>
             <favorite-button :status=status></favorite-button>
           </div>
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 06585ac7..d00bc0d0 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -5,6 +5,7 @@ const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
 const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json'
 const FAVORITE_URL = '/api/favorites/create'
 const UNFAVORITE_URL = '/api/favorites/destroy'
+const RETWEET_URL = '/api/statuses/retweet'
 const STATUS_UPDATE_URL = '/api/statuses/update.json'
 const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
 // const CONVERSATION_URL = '/api/statusnet/conversation/';
@@ -63,6 +64,13 @@ const unfavorite = ({ id, credentials }) => {
   })
 }
 
+const retweet = ({ id, credentials }) => {
+  return fetch(`${RETWEET_URL}/${id}.json`, {
+    headers: authHeaders(credentials),
+    method: 'POST'
+  })
+}
+
 const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
   const idsText = mediaIds.join(',')
   const form = new FormData()
@@ -96,6 +104,7 @@ const apiService = {
   fetchTimeline,
   favorite,
   unfavorite,
+  retweet,
   postStatus,
   uploadMedia
 }

From 11125abeeba1e945461ac5d1708e89cac7bf0714 Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Sun, 13 Nov 2016 17:09:16 +0100
Subject: [PATCH 2/3] Implement retweet action

---
 src/components/retweet_button/retweet_button.js  | 3 +++
 src/components/retweet_button/retweet_button.vue | 2 +-
 src/modules/statuses.js                          | 9 +++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 42da2531..e7318dc5 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -2,6 +2,9 @@ const RetweetButton = {
   props: [ 'status' ],
   methods: {
     retweet () {
+      if (!this.status.repeated) {
+        this.$store.dispatch('retweet', {id: this.status.id})
+      }
     }
   },
   computed: {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index ed5cb935..ec94356a 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i :class='classes' class='icon-retweet fa' v-on:click.prevent=''></i>
+    <i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
     <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index cc5e296c..8238644d 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -146,6 +146,10 @@ export const mutations = {
     const newStatus = find(state.allStatuses, status)
     newStatus.favorited = value
   },
+  setRetweeted (state, { status, value }) {
+    const newStatus = find(state.allStatuses, status)
+    newStatus.repeated = value
+  },
   setLoading (state, { timeline, value }) {
     state.timelines[timeline].loading = value
   },
@@ -167,6 +171,11 @@ const statuses = {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: false })
       apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials })
+    },
+    retweet ({ rootState, commit }, status) {
+      // Optimistic retweeting...
+      commit('setRetweeted', { status, value: true })
+      apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials })
     }
   },
   mutations

From 53fed694dfa4f2c4fe5c8f58ad8eb728c7720449 Mon Sep 17 00:00:00 2001
From: Jiayi Zheng <thebluber@gmail.com>
Date: Sun, 13 Nov 2016 17:52:20 +0100
Subject: [PATCH 3/3] Refactor css Apply different styles to reply, retweet and
 favorite buttons

---
 src/App.scss                                   |  8 +++-----
 src/_variables.scss                            |  6 ++++++
 .../favorite_button/favorite_button.vue        | 15 +++++++++++----
 .../retweet_button/retweet_button.vue          | 18 +++++++++++-------
 src/components/status/status.vue               | 13 +++++++++----
 5 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 src/_variables.scss

diff --git a/src/App.scss b/src/App.scss
index c155de73..a97ad56d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,7 +1,4 @@
-$main-color: #f58d2c;
-$main-background: white;
-$darkened-background: whitesmoke;
-
+@import './_variables.scss';
 #app {
     background-color: $main-color;
     background-size: cover;
@@ -225,9 +222,10 @@ status.ng-enter.ng-enter-active {
 }
 
 .fa {
-    color: $main-color;
+    color: grey;
 }
 
+
 .status-actions {
     width: 50%;
     display: flex;
diff --git a/src/_variables.scss b/src/_variables.scss
new file mode 100644
index 00000000..c317fd32
--- /dev/null
+++ b/src/_variables.scss
@@ -0,0 +1,6 @@
+$main-color: #f58d2c;
+$main-background: white;
+$darkened-background: whitesmoke;
+$green: #0fa00f;
+$blue: #0095ff;
+
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 0455c706..6eaf0607 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -7,8 +7,15 @@
 
 <script src="./favorite_button.js" ></script>
 
-<style>
- .favorite-button {
-     cursor: pointer
- }
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .favorite-button {
+      cursor: pointer;
+      &:hover {
+        color: $main-color;
+      }
+  }
+  .icon-star {
+      color: $main-color;
+  }
 </style>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index ec94356a..9b2f5c7b 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -7,12 +7,16 @@
 
 <script src="./retweet_button.js" ></script>
 
-<style>
- .icon-retweet {
-     cursor: pointer
- }
- .retweeted {
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .icon-retweet {
+     cursor: pointer;
+     &:hover {
+      color: $green;
+     }
+  }
+  .retweeted {
      cursor: auto;
-     color: green;
- }
+     color: $green;
+  }
 </style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d309c495..d4bcc279 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -51,7 +51,8 @@
 <script src="./status.js" ></script>
 
 <style lang="scss">
- .status-el {
+  @import '../../_variables.scss';
+  .status-el {
      hyphens: auto;
      overflow-wrap: break-word;
      word-wrap: break-word;
@@ -66,9 +67,13 @@
          margin-top: 3px;
          margin-bottom: 3px;
      }
- }
+  }
 
- .status-actions {
+  .status-actions {
      padding-top: 5px;
- }
+  }
+
+  .icon-reply:hover {
+     color: $blue;
+  }
 </style>