feat: check item exists on request

rivenmedia · Oct 22, 2024 · d56cf6c · d56cf6c
1 parent 87fa3b0
commit d56cf6c
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 39 deletions.
diff --git a/src/lib/components/home-items.svelte b/src/lib/components/home-items.svelte
@@ -2,11 +2,15 @@
 	import { Star, CalendarDays, Clapperboard, MoveUpRight } from 'lucide-svelte';
 	import ItemRequest from './item-request.svelte';
 	import { roundOff } from '$lib/helpers';
+	import { writable } from 'svelte/store';
+	import { goto } from '$app/navigation';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let data: any;
 	export let name: string;
 	export let type: string;
+
+	const hoveredItem = writable(null);
 </script>
 
 <div class="flex h-full w-full flex-col p-8 md:px-24 lg:px-32">
@@ -28,6 +32,19 @@
 				{#each data.results as item}
 					<div
 						class="group relative mb-2 flex w-1/2 flex-shrink-0 flex-col gap-2 rounded-lg p-2 sm:w-1/4 lg:w-1/6 xl:p-[.4rem]"
+						role="button"
+						tabindex="0"
+						on:mouseenter={() => ($hoveredItem = item.id)}
+						on:mouseleave={() => ($hoveredItem = null)}
+						on:focus={() => ($hoveredItem = item.id)}
+						on:blur={() => ($hoveredItem = null)}
+						on:keydown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') {
+								e.preventDefault();
+								$hoveredItem = item.id;
+							}
+						}}
+						on:click={() => goto(`/${type}/${item.id}`)}
 					>
 						<div class="relative aspect-[1/1.5] w-full overflow-hidden rounded-lg">
 							<img
@@ -44,12 +61,13 @@
 									{roundOff(item.vote_average)}
 								</span>
 							</div>
-							<a
-								href="/{type}/{item.id}"
+							<div
 								class="absolute inset-0 hidden flex-col justify-end from-zinc-900/70 p-2 group-hover:flex group-hover:bg-gradient-to-t"
 							>
-								<ItemRequest data={item} {type} />
-							</a>
+								{#if $hoveredItem === item.id}
+									<ItemRequest data={item} {type} />
+								{/if}
+							</div>
 						</div>
 					</div>
 				{/each}

diff --git a/src/lib/components/item-request.svelte b/src/lib/components/item-request.svelte
@@ -4,11 +4,34 @@
 	import { toast } from 'svelte-sonner';
 	import { getExternalID } from '$lib/tmdb';
 	import { ItemsService } from '$lib/client';
+	import { onMount } from 'svelte';
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	export let data: any;
 	export let type: string;
 
+	let isInLibrary = false;
+	let isChecking = true;
+
+	async function checkItemExists(id: number) {
+		try {
+			const externalIds = await getExternalID(fetch, type, id);
+			const response = await ItemsService.getItems({
+				query: {
+					search: externalIds.imdb_id
+				}
+			});
+
+			if (response.data && response.data.items.length > 0) {
+				isInLibrary = true;
+			}
+		} catch {
+			//pass
+		} finally {
+			isChecking = false;
+		}
+	}
+
 	async function requestItem(id: number) {
 		const externalIds = await getExternalID(fetch, type, id);
 		const response = await ItemsService.addItems({
@@ -19,36 +42,47 @@
 
 		if (!response.error) {
 			toast.success('Media requested successfully');
+			isInLibrary = true;
 		} else {
 			toast.error('An error occurred while requesting the media');
 		}
 	}
+
+	onMount(() => {
+		checkItemExists(data.id);
+	});
 </script>
 
-<AlertDialog.Root>
-	<AlertDialog.Trigger asChild let:builder>
-		<Button
-			on:click={(e) => {
-				e.preventDefault();
-				e.stopPropagation();
-			}}
-			variant="outline"
-			builders={[builder]}>Request</Button
-		>
-	</AlertDialog.Trigger>
-	<AlertDialog.Content>
-		<AlertDialog.Header>
-			<AlertDialog.Title
-				>Requesting {data.title || data.name || data.original_name}</AlertDialog.Title
-			>
-		</AlertDialog.Header>
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-			<AlertDialog.Action
-				on:click={async () => {
-					await requestItem(data.id);
-				}}>Continue</AlertDialog.Action
+{#if isChecking}
+	<Button variant="outline" disabled>Checking...</Button>
+{:else if isInLibrary}
+	<Button variant="outline" disabled>In Library</Button>
+{:else}
+	<AlertDialog.Root>
+		<AlertDialog.Trigger asChild let:builder>
+			<Button
+				on:click={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				}}
+				variant="outline"
+				builders={[builder]}>Request</Button
 			>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>
+		</AlertDialog.Trigger>
+		<AlertDialog.Content>
+			<AlertDialog.Header>
+				<AlertDialog.Title
+					>Requesting {data.title || data.name || data.original_name}</AlertDialog.Title
+				>
+			</AlertDialog.Header>
+			<AlertDialog.Footer>
+				<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+				<AlertDialog.Action
+					on:click={async () => {
+						await requestItem(data.id);
+					}}>Continue</AlertDialog.Action
+				>
+			</AlertDialog.Footer>
+		</AlertDialog.Content>
+	</AlertDialog.Root>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { roundOff } from '$lib/helpers';
 	import HomeItems from '$lib/components/home-items.svelte';
+	import ItemRequest from '$lib/components/item-request.svelte';
 	export let data: PageData;
 </script>
 
@@ -62,15 +63,7 @@
 									<p class="line-clamp-2 text-base">{nowPlaying.overview}</p>
 								</div>
 								<div class="mt-2 flex gap-2">
-									<Button
-										size="lg"
-										variant="default"
-										class="flex items-center gap-2"
-										href="/movie/{nowPlaying.id}"
-									>
-										<Play class="h-4 w-4" />
-										<span>Request</span>
-									</Button>
+									<ItemRequest data={nowPlaying} type={'movie'} />
 									<Button
 										size="lg"
 										variant="ghost"