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