fix(pages): update bands page

make "subscribe" or "unsubscribe" buttons update the ui immediately
This commit is contained in:
parent bb7a84259c
commit 25582dd1f1
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C

@ -6,12 +6,18 @@
const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>("/band/all")) as unknown as { data: Ref<IBand[]> }; const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>("/band/all")) as unknown as { data: Ref<IBand[]> };
const { data: rd }: { data: any } = useAuth(); const {
data: { value: rd },
getSession,
} = useAuth();
await getSession({ force: true });
let inc = ref<number>(1);
const data = ref(rd);
const refresh = async () => { const refresh = async () => {
await useAuth().getSession({ force: true }); await useAuth().getSession({ force: true });
rd.value = useAuth().data.value; data.value = useAuth().data.value;
//inc.value += 1;
}; };
const hider = subscriptions; const hider = subscriptions;
if (bands.value == null) bands.value = []; if (bands.value == null) bands.value = [];
useHead({ useHead({
@ -21,7 +27,7 @@
<template> <template>
<a-list v-model:data-source="bands" :grid="bp"> <a-list v-model:data-source="bands" :grid="bp">
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<a-list-item> <a-list-item :key="item._id + inc">
<a-row :gutter="[5, 5]"> <a-row :gutter="[5, 5]">
<a-col> <a-col>
<nuxt-link :to="`/band/${item._id}`"> <nuxt-link :to="`/band/${item._id}`">
@ -29,12 +35,12 @@
</nuxt-link> </nuxt-link>
</a-col> </a-col>
<!-- subscribe... --> <!-- subscribe... -->
<a-col v-if="rd && rd.user?._id" style="margin-left: auto"> <a-col v-if="data && data.user?._id" style="margin-left: auto">
<a <a
v-if="!rd?.user.subscriptions.bands.includes(item._id)" v-if="!data?.user.subscriptions.bands.includes(item._id)"
@click=" @click="
async (e) => { async (e) => {
hider(bands, item._id, 'subscribe', 'bands'); await hider(bands, item._id, 'subscribe', 'bands');
await refresh(); await refresh();
} }
" "
@ -45,7 +51,7 @@
v-else v-else
@click=" @click="
async (e) => { async (e) => {
hider(bands, item._id, 'unsubscribe', 'bands'); await hider(bands, item._id, 'unsubscribe', 'bands');
await refresh(); await refresh();
} }
" "
@ -53,11 +59,11 @@
<icon :istyle="'regular'" name="x" :size="12" /> <icon :istyle="'regular'" name="x" :size="12" />
</a> </a>
</a-col> </a-col>
<a-col v-if="rd?.user._id"> <a-col v-if="data?.user._id">
<a <a
@click=" @click="
async (e) => { async (e) => {
hider(bands, item._id, 'hide', 'bands'); await hider(bands, item._id, 'hide', 'bands');
await refresh(); await refresh();
} }
" "