From 681d90dc6f215c3d564b29a454d0dd83bf309a0b 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: Wed, 11 Oct 2023 13:23:08 -0400
Subject: [PATCH] feat(pages): add subscribe+unsubscribe buttons to bands page

---
 pages/bands.vue | 87 +++++++++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/pages/bands.vue b/pages/bands.vue
index 1f955a4..0c5a40b 100644
--- a/pages/bands.vue
+++ b/pages/bands.vue
@@ -1,36 +1,51 @@
-<script lang="ts" setup>
-import { IBand } from '~/models/band';
-import icon from '~/components/icon.vue';
-	const {data} = await useApiFetch("/bands/all")
-	const bands = data as Ref<IBand[]>
-	const hider = (id: number) => (e) => {
-		bands.value.splice(bands.value.findIndex(a => a._id == id), 1)
-		useApiFetch("/user/hide", {
-			body: {
-				authors: [],
-				bands: [id]
-			},
-		 method: "post"
-		})
-	}
-</script>
-<template>
-	<a-list :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 7 }" v-model:data-source="bands">
-    <template #renderItem="{ item } ">
-      <a-list-item>
-				<a-row :gutter="[10, 10]">
-					<a-col>
-						<NuxtLink :to="`/band/${item._id}`">
-							{{ item.name }}
-						</NuxtLink>
-					</a-col>
-					<a-col>
-						<a @click="hider(item._id)">
-						<icon :istyle="'regular'" name="eye-slash" :size="12"/>
-					</a>
-					</a-col>
-				</a-row>
-      </a-list-item>
-    </template>
-  </a-list>
-</template>
\ No newline at end of file
+<script lang="ts" setup>
+	import { IBand } from "~/models/band";
+	import icon from "~/components/icon.vue";
+	import { subscriptions, bp } from "~/lib/client/listActions";
+	import { IUser } from "~/models/user";
+
+	const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>(
+		"/bands/all",
+	)) as { data: Ref<IBand[]> };
+
+	const { data: rd }: { data: any } = useAuth();
+	const data = rd as { user: IUser };
+
+	const hider = subscriptions;
+	if (bands.value == null) bands.value = [];
+</script>
+<template>
+	<a-list v-model:data-source="bands" :grid="bp">
+		<template #renderItem="{ item }">
+			<a-list-item>
+				<a-row :gutter="[5, 5]">
+					<a-col>
+						<nuxt-link :to="`/band/${item._id}`">
+							{{ item.name }}
+						</nuxt-link>
+					</a-col>
+					<!-- subscribe... -->
+					<a-col v-if="data && data.user?._id" style="margin-left: auto">
+						<a
+							v-if="!data?.user.subscriptions.bands.includes(item._id)"
+							@click="(e) => hider(bands, item._id, 'subscribe', 'bands')"
+						>
+							<icon :istyle="'regular'" name="paper-plane" :size="12" />
+						</a>
+						<a
+							v-else
+							@click="(e) => hider(bands, item._id, 'unsubscribe', 'bands')"
+						>
+							<icon :istyle="'regular'" name="x" :size="12" />
+						</a>
+					</a-col>
+					<a-col v-if="data?.user._id">
+						<a @click="(e) => hider(bands, item._id, 'hide', 'bands')">
+							<icon :istyle="'regular'" name="eye-slash" :size="12" />
+						</a>
+					</a-col>
+				</a-row>
+			</a-list-item>
+		</template>
+	</a-list>
+</template>