Add ProfileDirectory.vue

resources/assets/js/components/ProfileDirectory.vue

@@ -0,0 +1,127 @@
+<template>
+<div>
+	<div class="col-12">
+		<p class="font-weight-bold text-lighter text-uppercase">Profiles Directory</p>
+		<div v-if="loaded" class="">
+			<div class="row">
+				<div class="col-12 col-md-6 p-1" v-for="(profile, index) in profiles">
+					<div class="card card-body border shadow-none py-2">
+						<div class="media">
+							<a :href="profile.url"><img :src="profile.avatar" class="rounded-circle border mr-3" alt="..." width="40px" height="40px"></a>
+							<div class="media-body">
+								<p class="mt-0 mb-0 font-weight-bold">
+									<a :href="profile.url" class="text-dark">{{profile.username}}</a>
+								</p>
+								<p class="mb-1 small text-lighter d-flex justify-content-between font-weight-bold">
+									<span>
+										<span>{{prettyCount(profile.statuses_count)}}</span> POSTS
+									</span>
+									<span>
+										<span>{{postsPerDay(profile)}}</span> POSTS/DAY
+									</span>
+									<span>
+										<span>{{prettyCount(profile.followers_count)}}</span> FOLLOWERS
+									</span>
+								</p>
+								<p class="mb-1">
+									<span v-for="(post, i) in profile.posts" class="shadow-sm" :key="'profile_posts_'+i">
+										<a :href="post.url" class="text-decoration-none mr-1">
+											<img :src="thumbUrl(post)" width="62.3px" height="62.3px" class="border rounded">
+										</a>
+									</span>
+								</p>
+								
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div v-if="showLoadMore" class="col-12">
+					<p class="text-center mb-0 pt-3">
+						<button class="btn btn-outline-secondary btn-sm px-4 py-1 font-weight-bold" @click="loadMore()">Load More</button>
+					</p>
+				</div>
+			</div>
+			
+		</div>
+		<div v-else>
+			<div class="row">
+				<div class="col-12 d-flex justify-content-center align-items-center">
+					<div class="spinner-border" role="status">
+						<span class="sr-only">Loading...</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<style type="text/css" scoped></style>
+
+<script type="text/javascript">
+	export default {
+		props: ['profileId'],
+
+		data() {
+			return {
+				loaded: false,
+				showLoadMore: true,
+				profiles: [],
+				page: 1
+			}
+		},
+
+		beforeMount() {
+			this.fetchData();
+		},
+
+		methods: {
+			fetchData() {
+				axios.get('/api/pixelfed/v2/discover/profiles', {
+					params: {
+						page: this.page
+					}
+				})
+				.then(res => {
+					if(res.data.length == 0) {
+						this.showLoadMore = false;
+						this.loaded = true;
+						return;
+					}
+					this.profiles = res.data;
+					this.showLoadMore = this.profiles.length == 8;
+					this.loaded = true;
+				});
+			},
+
+			prettyCount(val) {
+				return App.util.format.count(val);
+			},
+
+			loadMore() {
+				this.loaded = false;
+				this.page++;
+				this.fetchData();
+			},
+
+			thumbUrl(p) {
+				return p.media_attachments[0].url;
+			},
+
+			postsPerDay(profile) {
+				let created = profile.created_at;
+				let now = Date.now();
+				let diff = Math.abs(created, now)
+				let day = 1000 * 60 * 60 * 24;
+				let days = Math.round(diff / day);
+
+				let statuses = profile.statuses_count;
+
+				let perDay = this.prettyCount(Math.floor(statuses / days));
+				console.log(perDay);
+				return perDay;
+			}
+		}
+	}
+</script>