Create a WhoToFollow.vue file inside src/components/User and paste the code below in it:

// src/components/User/WhoToFollow.vue

<template>
    <div class="ui segment">
        <h2 class="ui medium dividing header">Who to follow</h2>
        <i class="refresh link icon" @click="fetchWhoToFollow"></i>

        <div class="ui divided link items">
            <div class="item" v-for="user in usersToFollow" :key="user.id">
                <div class="ui avatar image">
                    <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
                </div>
                <div class="content">
                    <router-link class="ui small header" :to="`/${user.username}`">
                        {{ user.name }} <small>{{ `@${user.username}` }}</small>
                    </router-link>

                    <div class="meta">
                        <button class="ui compact button mini primary" @click="followUser(user.id)">Follow</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'WhoToFollow',
        data () {
            return {
                usersToFollow: ''
            }
        },
        created () {
            this.fetchWhoToFollow()
        },
        methods: {
            fetchWhoToFollow () {
                const token = localStorage.getItem('tweetr-token')

                axios
                    .get('/users/users_to_follow', {
                        headers: {
                            Authorization: `Bearer ${token}`
                        }
                    })
                    .then(response => {
                        this.usersToFollow = response.data.data
                    })
            },
            followUser (userId) {
                const token = localStorage.getItem('tweetr-token')

                axios
                    .post(
                        '/users/follow',
                        { user_id: userId },
                        {
                            headers: {
                                Authorization: `Bearer ${token}`
                            }
                        }
                    )
                    .then(response => {
                        this.usersToFollow = this.usersToFollow.filter(u => {
                            return u.id !== userId
                        })
                    })
            }
        }
    }
</script>

First, we fetch and display some users the authenticated user can follow. Then we implement a follow button. Once the button is click, a followUser method is called passing to it the ID of the user to follow. This method makes a POST request to the /users/follow endpoint of our API. On success, we filter the list of users to follow by removing the just followed user from the list. We also add a refresh button which we use to fetch new set of users to follow.

Now, let's make use of this WhoToFollow component. Remember we said the user homepage will be a three column layout. Currently, it has only two columns, and we said we'll be adding the last column later on. Let's add it in now. Open src/components/Home.vue and add the code below to it:

Table of Contents

    // src/components/Home.vue
    
    <!-- update the last column as below -->
    <div class="four wide column">
        <WhoToFollow/>
    </div>
    
    // import `WhoToFollow`
    import WhoToFollow from '@/components/User/WhoToFollow'
    
    // add this to `components`
    WhoToFollow

    Visiting the homepage, we should now see a list of users to follow and users can now starting following one another:

    Chimezie Enyinnaya

    19 posts

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