fix(pages): update bands page
make "subscribe" or "unsubscribe" buttons update the ui immediately
This commit is contained in:
		
							parent
							
								
									bb7a84259c
								
							
						
					
					
						commit
						25582dd1f1
					
				| @ -6,12 +6,18 @@ | |||||||
| 
 | 
 | ||||||
| 	const { data: bands } = (await useApiFetch<NonNullable<IBand[]>>("/band/all")) as unknown as { data: Ref<IBand[]> }; | 	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 () => { | 	const refresh = async () => { | ||||||
| 		await useAuth().getSession({ force: true }); | 		await useAuth().getSession({ force: true }); | ||||||
| 		rd.value = useAuth().data.value; | 		data.value = useAuth().data.value; | ||||||
|  | 		//inc.value += 1; | ||||||
| 	}; | 	}; | ||||||
| 
 |  | ||||||
| 	const hider = subscriptions; | 	const hider = subscriptions; | ||||||
| 	if (bands.value == null) bands.value = []; | 	if (bands.value == null) bands.value = []; | ||||||
| 	useHead({ | 	useHead({ | ||||||
| @ -21,7 +27,7 @@ | |||||||
| <template> | <template> | ||||||
| 	<a-list v-model:data-source="bands" :grid="bp"> | 	<a-list v-model:data-source="bands" :grid="bp"> | ||||||
| 		<template #renderItem="{ item }"> | 		<template #renderItem="{ item }"> | ||||||
| 			<a-list-item> | 			<a-list-item :key="item._id + inc"> | ||||||
| 				<a-row :gutter="[5, 5]"> | 				<a-row :gutter="[5, 5]"> | ||||||
| 					<a-col> | 					<a-col> | ||||||
| 						<nuxt-link :to="`/band/${item._id}`"> | 						<nuxt-link :to="`/band/${item._id}`"> | ||||||
| @ -29,12 +35,12 @@ | |||||||
| 						</nuxt-link> | 						</nuxt-link> | ||||||
| 					</a-col> | 					</a-col> | ||||||
| 					<!-- subscribe... --> | 					<!-- 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 | 						<a | ||||||
| 							v-if="!rd?.user.subscriptions.bands.includes(item._id)" | 							v-if="!data?.user.subscriptions.bands.includes(item._id)" | ||||||
| 							@click=" | 							@click=" | ||||||
| 								async (e) => { | 								async (e) => { | ||||||
| 									hider(bands, item._id, 'subscribe', 'bands'); | 									await hider(bands, item._id, 'subscribe', 'bands'); | ||||||
| 									await refresh(); | 									await refresh(); | ||||||
| 								} | 								} | ||||||
| 							" | 							" | ||||||
| @ -45,7 +51,7 @@ | |||||||
| 							v-else | 							v-else | ||||||
| 							@click=" | 							@click=" | ||||||
| 								async (e) => { | 								async (e) => { | ||||||
| 									hider(bands, item._id, 'unsubscribe', 'bands'); | 									await hider(bands, item._id, 'unsubscribe', 'bands'); | ||||||
| 									await refresh(); | 									await refresh(); | ||||||
| 								} | 								} | ||||||
| 							" | 							" | ||||||
| @ -53,11 +59,11 @@ | |||||||
| 							<icon :istyle="'regular'" name="x" :size="12" /> | 							<icon :istyle="'regular'" name="x" :size="12" /> | ||||||
| 						</a> | 						</a> | ||||||
| 					</a-col> | 					</a-col> | ||||||
| 					<a-col v-if="rd?.user._id"> | 					<a-col v-if="data?.user._id"> | ||||||
| 						<a | 						<a | ||||||
| 							@click=" | 							@click=" | ||||||
| 								async (e) => { | 								async (e) => { | ||||||
| 									hider(bands, item._id, 'hide', 'bands'); | 									await hider(bands, item._id, 'hide', 'bands'); | ||||||
| 									await refresh(); | 									await refresh(); | ||||||
| 								} | 								} | ||||||
| 							" | 							" | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user