pixelfed/pixelfed

<template>
    <div class="discover-serverfeeds-component">
        <div class="container-fluid mt-3">

            <div class="row">
                <div class="col-md-4 col-lg-3">
                    <sidebar :user="profile" />
                </div>

                <div class="col-md-6 col-lg-6">
                    <b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>

                    <h1 class="font-default">Server Timelines</h1>
                    <p class="font-default lead">Browse timelines of a specific instance</p>

                    <hr>

                    <b-spinner v-if="isLoading && !initialTab" />

                    <status-card
                        v-if="!isLoading"
                        v-for="(post, idx) in feed"
                        :key="'ti1:'+idx+':'+post.id"
                        :profile="profile"
                        :status="post"
                        />

                    <p v-if="!initialTab && !isLoading && feed.length == 0" class="lead">No posts found :(</p>

                    <div v-if="initialTab === true">
                        <p v-if="config.server.mode == 'allowlist'" class="lead">Select an instance from the menu</p>
                    </div>
                </div>

                <div class="col-md-2 col-lg-3">
                    <div v-if="config.server.mode === 'allowlist'" class="nav flex-column nav-pills font-default">
                        <a
                            v-for="(tag, idx) in domains"
                            class="nav-link"
                            :class="{ active: tagIndex == idx }"
                            href="#"
                            @click.prevent="toggleTag(idx)">
                            {{ tag }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import Drawer from './../partials/drawer.vue';
import Sidebar from './../partials/sidebar.vue';
import StatusCard from './../partials/TimelineStatus.vue';

export default {
    components: {
        "drawer": Drawer,
        "sidebar": Sidebar,
        "status-card": StatusCard
    },

    data() {
        return {
            isLoaded: false,
            isLoading: true,
            initialTab: true,
            config: {},
            profile: window._sharedData.user,
            tagIndex: undefined,
            domains: [],
            feed: [],
            breadcrumbItems: [
                {
                    text: 'Discover',
                    href: '/i/web/discover'
                },
                {
                    text: 'Server Timelines',
                    active: true
                }
            ]
        }
    },

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

    methods: {
        fetchConfig() {
            axios.get('/api/pixelfed/v2/discover/meta')
            .then(res => {
                this.config = res.data;
                if(this.config.server.enabled == false) {
                    this.$router.push('/i/web/discover');
                }
                if(this.config.server.mode === 'allowlist') {
                    this.domains = this.config.server.domains.split(',');
                }
            })
        },

        fetchFeed(domain) {
            this.isLoading = true;
            axios.get('/api/pixelfed/v2/discover/server-timeline', {
                params: {
                    domain: domain
                }
            }).then(res => {
                this.feed = res.data;
                this.isLoading = false;
                this.isLoaded = true;
            })
            .catch(err => {
                this.feed = [];
                this.tagIndex = null;
                this.isLoaded = true;
                this.isLoading = false;
            })
        },

        toggleTag(tag) {
            this.initialTab = false;
            this.tagIndex = tag;
            this.fetchFeed(this.domains[tag]);
        }
    }
}
</script>

<style lang="scss" scoped>
    .discover-serverfeeds-component {
        .bg-stellar {
            background: #7474BF;
            background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
            background: linear-gradient(to right, #348AC7, #7474BF);
        }
        .font-default {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            letter-spacing: -0.7px;
        }

        .active {
            font-weight: 700;
        }
    }
</style>