feat(pages): add subscribe+unsubscribe buttons to bands page

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>
+<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>