pixelfed/resources/assets/components/discover/Memories.vue

<template>
	<div class="discover-my-memories web-wrapper">
		<div v-if="isLoaded" class="container-fluid mt-3">
			<div class="row">
				<div class="col-md-4 col-lg-3">
					<sidebar :user="profile" />
				</div>

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

					<h1 class="font-default">My Memories</h1>
					<p class="font-default lead">Posts from this day in previous years</p>

					<hr>

					<b-spinner v-if="!feedLoaded" />

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

					<p v-if="feedLoaded && feed.length == 0" class="lead">No memories found :(</p>
				</div>

				<div v-else-if="tabIndex === 1" class="col-md-6 col-lg-6">
					<b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>

					<h1 class="font-default">My Memories</h1>
					<p class="font-default lead">Posts I've liked from this day in previous years</p>

					<hr>

					<b-spinner v-if="!likedLoaded" />

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

					<p v-if="likedLoaded && liked.length == 0" class="lead">No memories found :(</p>
				</div>

				<div class="col-md-2 col-lg-3">
					<div class="nav flex-column nav-pills font-default">
						<a class="nav-link" :class="{ active: tabIndex == 0 }" href="#" @click.prevent="toggleTab(0)">My Posts</a>
						<a class="nav-link" :class="{ active: tabIndex == 1 }" href="#" @click.prevent="toggleTab(1)">Posts I've Liked</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: true,
        		profile: window._sharedData.user,
        		curDate: undefined,
        		tabIndex: 0,
        		feedLoaded: false,
        		likedLoaded: false,
        		feed: [],
        		liked: [],
        		breadcrumbItems: [
					{
						text: 'Discover',
						href: '/i/web/discover'
					},
					{
						text: 'My Memories',
						active: true
					}
				]
        	}
        },

        mounted() {
        	this.curDate = new Date();
        	this.fetchConfig();
        },

        methods: {
        	fetchConfig() {
        		if(
        			window._sharedData.hasOwnProperty('discoverMeta') &&
        			window._sharedData.discoverMeta
        		) {
        			this.config = window._sharedData.discoverMeta;
        			this.isLoaded = true;
        			if(this.config.memories.enabled == false) {
						this.$router.push('/i/web/discover');
        			} else {
        				this.fetchMemories();
        			}
        			return;
        		}
				axios.get('/api/pixelfed/v2/discover/meta')
				.then(res => {
					this.config = res.data;
					this.isLoaded = true;
					window._sharedData.discoverMeta = res.data;
					if(res.data.memories.enabled == false) {
						this.$router.push('/i/web/discover');
					} else {
						this.fetchMemories();
					}
				})
			},

			fetchMemories() {
				axios.get('/api/pixelfed/v2/discover/memories')
				.then(res => {
					this.feed = res.data;
					this.feedLoaded = true;
				});
			},

			fetchLiked() {
				axios.get('/api/pixelfed/v2/discover/memories?type=liked')
				.then(res => {
					this.liked = res.data;
					this.likedLoaded = true;
				});
			},

        	toggleTab(idx) {
        		if(idx == 1) {
        			if(!this.likedLoaded) {
        				this.fetchLiked();
        			}
        		}
        		this.tabIndex = idx;
        	}
        }
	}
</script>

<style lang="scss" scoped>
	.discover-my-memories {
		.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>