pixelfed/pixelfed

<template>
    <div class="timeline-onboarding">
        <div class="card card-body shadow-sm mb-3 p-5" style="border-radius: 15px;">
            <h1 class="text-center mb-4">✨ {{ $t('timeline.onboarding.welcome') }}</h1>

            <p class="text-center mb-3" style="font-size: 22px;">
                {{ $t('timeline.onboarding.thisIsYourHomeFeed') }}
            </p>

            <p class="text-center lead">{{ $t('timeline.onboarding.letUsHelpYouFind') }}</p>

            <p v-if="newlyFollowed" class="text-center mb-0">
                <a href="/i/web" class="btn btn-primary btn-lg primary font-weight-bold rounded-pill px-4" onclick="location.reload()">
                    {{ $t('timeline.onboarding.refreshFeed') }}
                </a>
            </p>
        </div>

        <div class="row">
            <div class="col-12 col-md-6 mb-3" v-for="(profile, index) in popularAccounts">
                <div class="card shadow-sm border-0 rounded-px">
                    <div class="card-body p-2">
                        <profile-card
                            :key="'pfc' + index"
                            :profile="profile"
                            class="w-100"
                            v-on:follow="follow(index)"
                            v-on:unfollow="unfollow(index)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import ProfileCard from './../profile/ProfileHoverCard.vue';

    export default {
        props: {
            profile: {
                type: Object
            }
        },

        components: {
            "profile-card": ProfileCard
        },

        data() {
            return {
                popularAccounts: [],
                newlyFollowed: 0
            };
        },

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

        methods: {
            fetchPopularAccounts() {
                axios.get('/api/pixelfed/discover/accounts/popular')
                .then(res => {
                    this.popularAccounts = res.data;
                })
            },

            follow(index) {
                axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/follow')
                .then(res => {
                    this.newlyFollowed++;
                    this.$store.commit('updateRelationship', [res.data]);
                    this.$emit('update-profile', {
                        'following_count': this.profile.following_count + 1
                    })
                });
            },

            unfollow(index) {
                axios.post('/api/v1/accounts/' + this.popularAccounts[index].id + '/unfollow')
                .then(res => {
                    this.newlyFollowed--;
                    this.$store.commit('updateRelationship', [res.data]);
                    this.$emit('update-profile', {
                        'following_count': this.profile.following_count - 1
                    })
                });
            }
        }
    }
</script>

<style lang="scss">
.timeline-onboarding {
    .profile-hover-card-inner {
        width: 100%;

        .d-flex {
            max-width: 100% !important;
        }
    }
}
</style>