From 25582dd1f1f6f4b9ca80683997f026d9557f8287 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 2 Apr 2024 01:16:34 -0400
Subject: [PATCH] fix(pages): update bands page

make "subscribe" or "unsubscribe" buttons update the ui immediately
---
 pages/bands.vue | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/pages/bands.vue b/pages/bands.vue
index 52a71c7..c1ad341 100644
--- a/pages/bands.vue
+++ b/pages/bands.vue
@@ -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();
 								}
 							"