Enable pagination on profile directory page
This commit is contained in:
parent
6e9ea6f4c4
commit
48198ddf62
2 changed files with 31 additions and 3 deletions
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue