next/pages/bands.vue

<script lang="ts" setup>
	import { IBand } from "@models/band";
	import icon from "~/components/icon.vue";
	import { subscriptions, bp } from "@client/listActions";
	import { IUser } from "@models/user";

	const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>("/band/all")) as unknown as { data: Ref<IBand[]> };

	const { data: rd }: { data: any } = useAuth();
	const refresh = async () => {
		await useAuth().getSession({ force: true });
		rd.value = useAuth().data.value;
	};

	const hider = subscriptions;
	if (bands.value == null) bands.value = [];
	useHead({
		title: "Bands",
	});
</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="rd && rd.user?._id" style="margin-left: auto">
						<a
							v-if="!rd?.user.subscriptions.bands.includes(item._id)"
							@click="
								async (e) => {
									hider(bands, item._id, 'subscribe', 'bands');
									await refresh();
								}
							"
						>
							<icon :istyle="'regular'" name="paper-plane" :size="12" />
						</a>
						<a
							v-else
							@click="
								async (e) => {
									hider(bands, item._id, 'unsubscribe', 'bands');
									await refresh();
								}
							"
						>
							<icon :istyle="'regular'" name="x" :size="12" />
						</a>
					</a-col>
					<a-col v-if="rd?.user._id">
						<a
							@click="
								async (e) => {
									hider(bands, item._id, 'hide', 'bands');
									await refresh();
								}
							"
						>
							<icon :istyle="'regular'" name="eye-slash" :size="12" />
						</a>
					</a-col>
				</a-row>
			</a-list-item>
		</template>
	</a-list>
</template>