Refactor home and tag timeline pages
This commit is contained in:
parent
f0c8018e20
commit
112cf150ba
5 changed files with 82 additions and 85 deletions
55
src/components/PostList.vue
Normal file
55
src/components/PostList.vue
Normal file
|
@ -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>
|
|
@ -37,4 +37,8 @@ function onPostDeleted(postId: string) {
|
|||
.action {
|
||||
@include post-action;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: $block-outer-padding;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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 },
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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) {
|
||||
const authToken = this.store.ensureAuthToken()
|
||||
const posts = await getHomeTimeline(
|
||||
authToken,
|
||||
this.posts[this.posts.length - 1].id,
|
||||
)
|
||||
this.posts.push(...posts)
|
||||
}
|
||||
async loadNextPage(maxId: string) {
|
||||
const authToken = this.store.ensureAuthToken()
|
||||
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>
|
|
@ -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) {
|
||||
const { authToken } = useCurrentUser()
|
||||
const newPosts = await getTagTimeline(
|
||||
authToken.value,
|
||||
route.params.tagName,
|
||||
posts.value[posts.value.length - 1].id,
|
||||
)
|
||||
posts.value.push(...newPosts)
|
||||
}
|
||||
async function loadNextPage(maxId: string) {
|
||||
const { authToken } = useCurrentUser()
|
||||
const newPosts = await getTagTimeline(
|
||||
authToken.value,
|
||||
route.params.tagName,
|
||||
maxId,
|
||||
)
|
||||
posts.value.push(...newPosts)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../styles/layout";
|
||||
|
||||
:deep(.post) {
|
||||
margin-bottom: $block-outer-padding;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue