refator(anime): move upcoming to component

2 files changed, 30 insertions, 65 deletions

diff --git a/src/lib/List/AnimeList.svelte b/src/lib/List/AnimeList.svelte
index 03d58b1f..50fee05d 100644
--- a/src/lib/List/AnimeList.svelte
+++ b/src/lib/List/AnimeList.svelte
@@ -51,22 +51,26 @@
 					{anime.title.english || anime.title.romaji || anime.title.native}
 				</a>
 				<span style="opacity: 50%;">|</span>
-				<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-				{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
-				<a
-					href={'#'}
-					on:click={() =>
-						updateMedia(
-							anime.id,
-							anime.mediaListEntry?.progress,
-							() => (animeLists = cleanCache(user, identity))
-						)}>+</a
-				>
-				{#if !title.includes('Completed')}
-					[{anime.nextAiringEpisode?.episode === -1
-						? '?'
-						: (anime.nextAiringEpisode?.episode || 1) - 1}]
-					{@html airingTime(anime)}
+				{#if title === 'Upcoming Episodes'}
+					<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
+					{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
+					<a
+						href={'#'}
+						on:click={() =>
+							updateMedia(
+								anime.id,
+								anime.mediaListEntry?.progress,
+								() => (animeLists = cleanCache(user, identity))
+							)}>+</a
+					>
+					{#if !title.includes('Completed')}
+						[{anime.nextAiringEpisode?.episode === -1
+							? '?'
+							: (anime.nextAiringEpisode?.episode || 1) - 1}]
+						{@html airingTime(anime)}
+					{/if}
+				{:else}
+					{@html airingTime(anime, true)}
 				{/if}
 			</li>
 		{/each}
diff --git a/src/lib/List/UpcomingAnimeList.svelte b/src/lib/List/UpcomingAnimeList.svelte
index 9ae6b1bb..b959b290 100644
--- a/src/lib/List/UpcomingAnimeList.svelte
+++ b/src/lib/List/UpcomingAnimeList.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-	/* eslint svelte/no-at-html-tags: "off" */
-
 	import { mediaListCollection, Type, type Media } from '$lib/AniList/media';
 	import type { UserIdentity, AniListAuthorisation } from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
 	import anime from '../../stores/anime';
 	import lastPruneTimes from '../../stores/lastPruneTimes';
-	import settings from '../../stores/settings';
-	import { airingTime, cleanCache } from '$lib/Media/anime';
-	import ListTitle from './ListTitle.svelte';
-	import Error from '$lib/Error.svelte';
+	import AnimeList from './AnimeList.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -76,46 +71,12 @@
 	};
 </script>
 
-{#await animeLists}
-	<ListTitle custom="Upcoming Episodes" />
-
-	<ul><li>Loading ...</li></ul>
-{:then media}
-	{@const cleanedMedia = cleanMedia(media, displayUnresolved)}
-
-	<ListTitle count={cleanedMedia.length} time={endTime / 1000} custom="Upcoming Episodes" />
-
-	{#if cleanedMedia.length === 0}
-		<ul>
-			<li>
-				No anime to display. <a
-					href={'#'}
-					on:click={() => (animeLists = cleanCache(user, identity))}>Force refresh</a
-				>
-			</li>
-		</ul>
-	{/if}
-
-	<ul>
-		{#each cleanedMedia as anime}
-			<li>
-				<a
-					href={$settings.linkToAniList
-						? `https://anilist.co/anime/${anime.id}`
-						: `https://www.livechart.me/search?q=${
-								anime.title.native || anime.title.english || anime.title.romaji
-						  }`}
-					target="_blank"
-				>
-					{anime.title.english || anime.title.romaji || anime.title.native}
-				</a>
-				<span style="opacity: 50%;">|</span>
-				{@html airingTime(anime, true)}
-			</li>
-		{/each}
-	</ul>
-{:catch}
-	<ListTitle count="?" time="0" custom="Upcoming Episodes" />
-
-	<Error />
-{/await}
+<AnimeList
+	{endTime}
+	{cleanMedia}
+	{animeLists}
+	{user}
+	{identity}
+	{displayUnresolved}
+	title="Upcoming Episodes"
+/>