Add replies.

src/components/post_status_form/post_status_form.js

@@ -1,6 +1,9 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 
 const PostStatusForm = {
+  props: [
+    'replyTo'
+  ],
   data () {
     return {
       newStatus: { }
@@ -10,7 +13,8 @@ const PostStatusForm = {
     postStatus (newStatus) {
       statusPoster.postStatus({
         status: newStatus.status,
-        store: this.$store
+        store: this.$store,
+        inReplyToStatusId: this.replyTo
       })
       this.newStatus = { }
     }

src/components/status/status.js

@@ -1,8 +1,12 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
+import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const Status = {
   props: [ 'statusoid' ],
+  data: () => ({
+    replying: false
+  }),
   computed: {
     retweet () { return !!this.statusoid.retweeted_status },
     retweeter () { return this.statusoid.user.name },
@@ -16,7 +20,13 @@ const Status = {
   },
   components: {
     Attachment,
-    FavoriteButton
+    FavoriteButton,
+    PostStatusForm
+  },
+  methods: {
+    toggleReplying () {
+      this.replying = !this.replying
+    }
   }
 }
 

src/components/status/status.vue

@@ -2,7 +2,7 @@
   <div class="status-el">
     <div v-if="retweet" class="media container retweet-info">
       <div class="media-left">
-        <i class='fa fa-retweet'></i>
+        <i class='fa icon-retweet'></i>
       </div>
       <div class="media-body">
         Retweeted by {{retweeter}}
@@ -34,8 +34,10 @@
 
         <div>
           <div class='status-actions'>
-            <div ng-click="toggleReplying()">
+            <div>
+              <a href="#" v-on:click.prevent="toggleReplying()">
                 <i class='fa icon-reply'></i>
+              </a>
             </div>
             <div>
               <i class='fa icon-retweet'></i>
@@ -43,7 +45,7 @@
             <favorite-button :status=status></favorite-button>
           </div>
 
-          <!-- <post-status-form ng-if="replying" toggle="toggleReplying" reply-to-status="status" reply-to="{{status.id}}"></post-status-form> -->
+          <post-status-form v-if="replying" :reply-to="status.id"></post-status-form>
         </div>
       </div>
     </div>
@@ -55,6 +57,7 @@
 <style lang="scss">
  .status-el {
      word-wrap: break-word;
+     word-break: break-word;
 
      a {
          word-break: break-all;