refactor(anime): move list to component

2 files changed, 67 insertions, 52 deletions

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
new file mode 100644
index 00000000..18700991
--- /dev/null
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import settings from '../../../stores/settings';
+	import type { Media } from '$lib/AniList/media';
+	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
+	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
+	import ListTitle from '../ListTitle.svelte';
+
+	export let media: Media[];
+	export let title: string;
+	export let animeLists: Promise<Media[]>;
+	export let user: AniListAuthorisation;
+	export let identity: UserIdentity;
+	export let endTime: number;
+</script>
+
+<ListTitle time={endTime / 1000} count={media.length} custom={title} />
+
+{#if media.length === 0}
+	<ul>
+		<li>
+			No anime to display. <a href={'#'} on:click={() => (animeLists = cleanCache(user, identity))}
+				>Force refresh</a
+			>
+		</li>
+	</ul>
+{/if}
+
+<ul>
+	{#each media 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>
+			{#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}
+</ul>
diff --git a/src/lib/List/Template/AnimeListTemplate.svelte b/src/lib/List/Template/AnimeListTemplate.svelte
index bca141e3..1c703147 100644
--- a/src/lib/List/Template/AnimeListTemplate.svelte
+++ b/src/lib/List/Template/AnimeListTemplate.svelte
@@ -4,8 +4,8 @@
 	import type { AniListAuthorisation, UserIdentity } from '$lib/AniList/identity';
 	import type { Media } from '$lib/AniList/media';
 	import Error from '$lib/Error.svelte';
-	import { airingTime, cleanCache, totalEpisodes, updateMedia } from '$lib/Media/anime';
 	import settings from '../../../stores/settings';
+	import CleanAnimeList from '../Anime/CleanAnimeList.svelte';
 	import ListTitle from '../ListTitle.svelte';
 
 	export let endTime: number;
@@ -23,57 +23,7 @@
 {:then media}
 	{@const cleanedMedia = cleanMedia(media, $settings.displayUnresolved)}
 
-	<ListTitle time={endTime / 1000} count={cleanedMedia.length} custom={title} />
-
-	{#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>
-				{#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}
-	</ul>
+	<CleanAnimeList media={cleanedMedia} {title} {animeLists} {user} {identity} {endTime} />
 {:catch}
 	<ListTitle time={0} count={'?'} custom={title} />