Refactor home and tag timeline pages

src/components/PostList.vue

@@ -0,0 +1,55 @@
+<template>
+  <post-or-repost
+    v-for="post in posts"
+    :post="post"
+    :key="post.id"
+    @post-deleted="onPostDeleted($event)"
+  ></post-or-repost>
+  <button
+    v-if="isPageFull()"
+    class="btn"
+    @click="loadNextPage()"
+  >
+    Show more posts
+  </button>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { watch } from "vue"
+import { PAGE_SIZE } from "@/api/common"
+import { Post as PostObject } from "@/api/posts"
+import PostOrRepost from "@/components/PostOrRepost.vue"
+
+const props = defineProps<{
+  posts: PostObject[],
+}>()
+const emit = defineEmits<{(event: "load-next-page", maxId: string): void}>()
+
+const initialPostCount: number | null = null
+
+watch(() => props.posts.length, (postCount) => {
+  if (initialPostCount === null) {
+    initialPostCount = postCount
+  }
+})
+
+function onPostDeleted(postId: string) {
+  const posts = props.posts
+  const postIndex = posts.findIndex((post) => post.id === postId)
+  posts.splice(postIndex, 1)
+}
+
+function isPageFull(): boolean {
+  return initialPostCount === null ? false : initialPostCount >= PAGE_SIZE
+}
+
+function loadNextPage() {
+  let maxId
+  if (props.posts.length > 0) {
+    maxId = props.posts[props.posts.length - 1].id
+  }
+  emit("load-next-page", maxId)
+}
+</script>

src/components/PostOrRepost.vue

@@ -37,4 +37,8 @@ function onPostDeleted(postId: string) {
 .action {
   @include post-action;
 }
+
+.post {
+  margin-bottom: $block-outer-padding;
+}
 </style>

src/router/index.ts

@@ -2,12 +2,12 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
 
 import AboutPage from "@/views/About.vue"
 import AboutPublicPage from "@/views/AboutPublic.vue"
+import HomeTimeline from "@/views/HomeTimeline.vue"
 import LandingPage from "../views/LandingPage.vue"
 import NotificationList from "../views/NotificationList.vue"
 import ProfileDirectory from "../views/ProfileDirectory.vue"
 import ProfileView from "@/views/Profile.vue"
 import ProfileForm from "@/views/ProfileForm.vue"
-import PostList from "@/views/PostList.vue"
 import PostDetail from "@/views/PostDetail.vue"
 import PostOverlay from "@/views/PostOverlay.vue"
 import TagTimeline from "@/views/TagTimeline.vue"
@@ -53,7 +53,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/home",
     name: "home",
-    component: PostList,
+    component: HomeTimeline,
     meta: { onlyAuthenticated: true },
   },
   {

src/views/HomeTimeline.vue

@@ -2,19 +2,7 @@
   <div id="main">
     <div class="content posts">
       <post-editor @post-created="insertPost"></post-editor>
-      <post-or-repost
-        v-for="post in posts"
-        :post="post"
-        :key="post.id"
-        @post-deleted="onPostDeleted($event)"
-      ></post-or-repost>
-      <button
-        v-if="isPageFull()"
-        class="btn"
-        @click="loadNextPage()"
-      >
-        Show more posts
-      </button>
+      <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
     </div>
     <sidebar></sidebar>
   </div>
@@ -23,23 +11,22 @@
 <script lang="ts">
 import { Options, Vue, setup } from "vue-class-component"
 
-import { PAGE_SIZE } from "@/api/common"
 import { Post, getHomeTimeline } from "@/api/posts"
 import Avatar from "@/components/Avatar.vue"
-import PostOrRepost from "@/components/PostOrRepost.vue"
 import PostEditor from "@/components/PostEditor.vue"
+import PostList from "@/components/PostList.vue"
 import Sidebar from "@/components/Sidebar.vue"
 import { useCurrentUser } from "@/store/user"
 
 @Options({
   components: {
     Avatar,
-    PostOrRepost,
     PostEditor,
+    PostList,
     Sidebar,
   },
 })
-export default class PostList extends Vue {
+export default class HomeTimeline extends Vue {
 
   private store = setup(() => {
     const { ensureAuthToken } = useCurrentUser()
@@ -57,28 +44,13 @@ export default class PostList extends Vue {
     this.posts = [post, ...this.posts]
   }
 
-  onPostDeleted(postId: string) {
-    const postIndex = this.posts.findIndex((post) => post.id === postId)
-    this.posts.splice(postIndex, 1)
-  }
-
-  isPageFull(): boolean {
-    return this.posts.length >= PAGE_SIZE
-  }
-
-  async loadNextPage() {
-    if (this.posts.length > 0) {
+  async loadNextPage(maxId: string) {
     const authToken = this.store.ensureAuthToken()
-      const posts = await getHomeTimeline(
-        authToken,
-        this.posts[this.posts.length - 1].id,
-      )
+    const posts = await getHomeTimeline(authToken, maxId)
     this.posts.push(...posts)
   }
-  }
 
 }
-
 </script>
 
 <style scoped lang="scss">
@@ -87,8 +59,4 @@ export default class PostList extends Vue {
 .post-form {
   margin-bottom: $block-outer-padding * 2;
 }
-
-:deep(.post) {
-  margin-bottom: $block-outer-padding;
-}
 </style>

src/views/TagTimeline.vue

@@ -1,19 +1,10 @@
 <template>
   <div id="main">
     <div class="content posts">
-      <post-or-repost
-        v-for="post in posts"
-        :post="post"
-        :key="post.id"
-        @post-deleted="onPostDeleted($event)"
-      ></post-or-repost>
-      <button
-        v-if="isPageFull()"
-        class="btn"
-        @click="loadNextPage()"
-      >
-        Show more posts
-      </button>
+      <post-list
+        :posts="posts"
+        @load-next-page="loadNextPage"
+      ></post-list>
     </div>
     <sidebar></sidebar>
   </div>
@@ -24,12 +15,10 @@
 import { ref, onMounted } from "vue"
 import { useRoute } from "vue-router"
 
-import { PAGE_SIZE } from "@/api/common"
 import { Post, getTagTimeline } from "@/api/posts"
-import PostOrRepost from "@/components/PostOrRepost.vue"
+import PostList from "@/components/PostList.vue"
 import Sidebar from "@/components/Sidebar.vue"
 import { useCurrentUser } from "@/store/user"
-import { formatDate } from "@/utils/format"
 
 const route = useRoute()
 const posts = ref<Post[]>([])
@@ -42,32 +31,13 @@ onMounted(async () => {
   )
 })
 
-function onPostDeleted(postId: string) {
-  const postIndex = posts.value.findIndex((post) => post.id === postId)
-  posts.value.splice(postIndex, 1)
-}
-
-function isPageFull(): boolean {
-  return posts.value.length >= PAGE_SIZE
-}
-
-async function loadNextPage() {
-  if (posts.value.length > 0) {
+async function loadNextPage(maxId: string) {
   const { authToken } = useCurrentUser()
   const newPosts = await getTagTimeline(
     authToken.value,
     route.params.tagName,
-      posts.value[posts.value.length - 1].id,
+    maxId,
   )
   posts.value.push(...newPosts)
-  }
 }
 </script>
-
-<style scoped lang="scss">
-@import "../styles/layout";
-
-:deep(.post) {
-  margin-bottom: $block-outer-padding;
-}
-</style>