Build a Twitter Clone With Adonis and Vue

Displaying User Favorites

Create the FavoriteTweets component within the Profile folder and paste the code below into it:

// src/components/User/Profile/FavoriteTweets.vue

<template>
    <div>
        <UserProfileHeader
            :user="user"
            :auth-user="authUser"
        />
        <div class="ui stackable grid container">
            <div class="four wide column">
                <UserProfileSidebarDetails :user="user"/>
            </div>
            <div class="eight wide column">
                <div class="ui segment">
                    <h2 class="ui medium dividing header">Favorites</h2>

                    <Tweets
                        :tweets.sync="onlyTweets"
                        :auth-user="authUser"
                    />
                </div>
            </div>
            <div class="four wide column">
                <WhoToFollow v-if="isLoggedIn"/>
            </div>
        </div>
    </div>
</template>

<script>
    import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
    import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
    import Tweets from '@/components/Tweet/Tweets'
    import WhoToFollow from '@/components/User/WhoToFollow'
    import profileMixin from '@/mixins/profileMixin'

    export default {
        name: 'FavoriteTweets',
        mixins: [profileMixin],
        components: {
            UserProfileHeader,
            UserProfileSidebarDetails,
            Tweets,
            WhoToFollow
        },
        data () {
            return {
                user: '',
                authUser: ''
            }
        },
        computed: {
            isLoggedIn () {
                return !!this.authUser
            },
            onlyTweets () {
                return Array.from(this.user.favorites, favorite => favorite.tweet).reverse()
            }
        }
    }
</script>

Just like the UserProfile component, this component uses the UserProfileHeader and UserProfileSidebarDetails as well as the Tweets component. It also uses the profileMixin mixin. If the user is logged in, we render the WhoToFollow component. The isLoggedIn computer property is used to determine whether a user is logged in or not. The onlyTweets return only the tweets data of the user's favorites.

Adding User Followers Routes

Open src/router/index.js, and add the code below to it just above the user followers routes:

// src/router/index.js

import FavoriteTweets from '@/components/User/Profile/FavoriteTweets'

// add these inside the `routes` array
{
    path: '/favorites',
    component: FavoriteTweets
},
{
    path: '/:username/favorites',
    component: FavoriteTweets,
    props: true
},

We should be able to see a particular user's favorites now: