Let's add a way for users to reply to tweets. Create a Replies.vue file inside src/components/Tweet and paste the code below in it:

// src/components/Tweet/Replies.vue

<template>
    <div class="ui small feed">
        <div class="event" v-for="reply in replies" :key="reply.id">
            <div class="label">
                <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
            </div>
            <div class="content">
                <div class="summary">
                    <router-link :to="reply.user.username">
                        {{ reply.user.name }}
                        <small>{{ `@${reply.user.username}` }}</small>
                    </router-link>
                    <div class="date">
                        {{ reply.created_at | timeAgo }}
                    </div>
                </div>
                <div class="extra text">
                    {{ reply.reply }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Replies',
        props: {
            replies: {
                type: Array,
                required: true
            }
        }
    }
</script>

This takes an array of replies as props. It loops through the replies and display each reply with the user that posted it.

Next, let's add the form for replying to a tweet and use the Replies components to display tweet's replies. Add the code below to SingleTweet.vue immediately after <div class="ui divider"></div>

Table of Contents

    // src/components/Tweet/SingleTweet.vue
    
    <form class="ui form" @submit.prevent="replyTweet">
        <div class="field">
            <textarea name="reply" v-model="reply" rows="2" placeholder="Reply tweet"></textarea>
        </div>
    
        <button class="ui button primary" :disabled="!isFormValid">Reply</button>
    </form>
    
    <Replies :replies="replies"/>

    Next, we'll update the JavaScript section of the SingleTweet component as below:

    // src/components/Tweet/SingleTweet.vue
    
    <script>
        import Replies from '@/components/Tweet/Replies'
    
        export default {
            name: 'SingleTweet',
            components: {
                Replies
            },
            data () {
                return {
                    tweet: '',
                    replies: [],
                    reply: ''
                }
            },
            computed: {
                isFormValid () {
                    return !!this.reply
                }
            },
            created () {
                this.fetchTweet()
            },
            methods: {
                fetchTweet () {
                    axios.get(`/tweets/${this.$route.params.id}`).then(response => {
                        this.tweet = response.data.data
                        this.replies = response.data.data.replies.reverse()
                    })
                },
                back () {
                    this.$router.go(-1)
                },
                replyTweet () {
                    const token = localStorage.getItem('tweetr-token')
    
                    axios
                        .post(
                            `/tweets/reply/${this.tweet.id}`,
                            { reply: this.reply },
                            {
                                headers: {
                                    Authorization: `Bearer ${token}`
                                }
                            }
                        )
                        .then(response => {
                            this.reply = ''
    
                            this.replies.unshift(response.data.data)
                        })
                }
            }
        }
    </script>

    We get the tweet's replies in reversed order which are passed as props to the Replies component. Once the reply form is submitted, replyTweet method is called. This method makes a POST request to the /tweets/reply/:id endpoint of our API, passing along the reply message and the user's token. :id is the ID of the tweet the user is replying to. On success of replying to the tweet, we clear the input field and add the newly posted reply to the top of the replies.

    There we have it, users can now reply to tweets:

    Chimezie Enyinnaya

    16 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com