Enable pagination on profile directory page

This commit is contained in:
silverpill 2021-12-16 23:25:34 +00:00
parent 6e9ea6f4c4
commit 48198ddf62
2 changed files with 31 additions and 3 deletions

View file

@ -1,5 +1,5 @@
import { BACKEND_URL } from "@/constants"
import { http } from "./common"
import { PAGE_SIZE, http } from "./common"
interface ProfileField {
name: string;
@ -103,9 +103,13 @@ export async function getProfile(
return data
}
export async function getProfiles(authToken: string): Promise<Profile[]> {
export async function getProfiles(
authToken: string,
offset?: number,
): Promise<Profile[]> {
const url = `${BACKEND_URL}/api/v1/directory`
const response = await http(url, { authToken })
const queryParams = { offset, limit: PAGE_SIZE }
const response = await http(url, { queryParams, authToken })
const data = await response.json()
return data
}

View file

@ -9,6 +9,13 @@
>
<profile-card :profile="profile"></profile-card>
</router-link>
<button
v-if="isPageFull()"
class="btn"
@click="loadNextPage()"
>
Show more posts
</button>
</div>
<sidebar></sidebar>
</div>
@ -17,6 +24,7 @@
<script lang="ts">
import { Options, Vue, setup } from "vue-class-component"
import { PAGE_SIZE } from "@/api/common"
import { Profile, getProfiles } from "@/api/users"
import ProfileCard from "@/components/ProfileCard.vue"
import Sidebar from "@/components/Sidebar.vue"
@ -36,10 +44,26 @@ export default class ProfileDirectory extends Vue {
})
profiles: Profile[] = []
initialProfileCount: number | null = null
async created() {
const authToken = this.store.ensureAuthToken()
this.profiles = await getProfiles(authToken)
this.initialProfileCount = this.profiles.length
}
isPageFull(): boolean {
if (this.initialProfileCount === null) {
return false
}
return this.initialProfileCount >= PAGE_SIZE
}
async loadNextPage() {
const authToken = this.store.ensureAuthToken()
const offset = this.profiles.length
const profiles = await getProfiles(authToken, offset)
this.profiles.push(...profiles)
}
}