pixelfed/resources/assets/components/ProfileFollowing.vue

<template>
    <div class="profile-timeline-component">
        <div v-if="isLoaded" class="container-fluid mt-3">
            <div class="row">
                <div class="col-12 col-md-8 offset-md-2 px-md-5">
                    <profile-following
                        :profile="profile"
                        :relationship="relationship"
                        @back="goBack()"
                    />
                </div>
            </div>

            <drawer />
        </div>
    </div>
</template>

<script type="text/javascript">
    import Drawer from './partials/drawer.vue';
    import ProfileFollowing from './partials/profile/ProfileFollowing.vue';

    export default {
        props: {
            id: {
                type: String
            },

            profileId: {
                type: String
            },

            username: {
                type: String
            },

            cachedProfile: {
                type: Object
            },

            cachedUser: {
                type: Object
            }
        },

        components: {
            "drawer": Drawer,
            "profile-following": ProfileFollowing
        },

        data() {
            return {
                isLoaded: false,
                curUser: undefined,
                profile: undefined,
                relationship: undefined
            }
        },

        mounted() {
            this.init();
        },

        watch: {
            '$route': 'init'
        },

        methods: {
            init() {
                this.isLoaded = false;
                this.relationship = undefined;
                this.owner = false;

                if(this.cachedProfile && this.cachedUser) {
                    this.curUser = this.cachedUser;
                    this.profile = this.cachedProfile;
                    this.fetchRelationship();
                } else {
                    this.curUser = window._sharedData.user;
                    this.fetchProfile();
                }
            },

            fetchProfile() {
                let id = this.profileId ? this.profileId : this.id;
                axios.get('/api/pixelfed/v1/accounts/' + id)
                .then(res => {
                    this.profile = res.data;
                    if(res.data.id == this.curUser.id) {
                        this.owner = true;
                        this.fetchRelationship();
                    } else {
                        this.owner = false;
                        this.fetchRelationship();
                    }
                })
                .catch(err => {
                    this.$router.push('/i/web/404');
                });
            },

            fetchRelationship() {
                if(this.owner) {
                    this.relationship = {};
                    this.isLoaded = true;
                    return;
                }

                axios.get('/api/v1/accounts/relationships', {
                    params: {
                        'id[]': this.profile.id
                    }
                }).then(res => {
                    this.relationship = res.data[0];
                    this.isLoaded = true;
                })
            },

            goBack() {
                this.$router.push('/i/web/profile/' + this.profile.id);
            }
        }
    }
</script>