refactor(list): use interface for key

2 files changed, 18 insertions, 20 deletions

diff --git a/src/lib/List/Due/AnimeList.svelte b/src/lib/List/Due/AnimeList.svelte
index 6569d76f..17c516e1 100644
--- a/src/lib/List/Due/AnimeList.svelte
+++ b/src/lib/List/Due/AnimeList.svelte
@@ -28,19 +28,19 @@
 		const flattenedLists = flattenLists(media);
 		const releasingMedia = flattenedLists.filter(
 			(media: Media) =>
-				media['status'] == 'RELEASING' &&
-				(media['mediaListEntry'] || { progress: 0 })['progress'] >=
+				media.status == 'RELEASING' &&
+				(media.mediaListEntry || { progress: 0 }).progress >=
 					($displayNotStarted === 'true' ? 0 : 1)
 		);
 		const outdatedMedia = releasingMedia.filter((media: Media) => {
 			return (
-				(media['nextAiringEpisode'] || { episode: 0 })['episode'] - 1 !=
-				(media['mediaListEntry'] || { progress: 0 })['progress']
+				(media.nextAiringEpisode || { episode: 0 }).episode - 1 !=
+				(media.mediaListEntry || { progress: 0 }).progress
 			);
 		});
 		let finalMedia = outdatedMedia.map((media: Media) => {
-			if ((media['nextAiringEpisode'] || { episode: 0 })['episode'] - 1 <= 0) {
-				media['nextAiringEpisode'] = { episode: -1 };
+			if ((media.nextAiringEpisode || { episode: 0 }).episode - 1 <= 0) {
+				media.nextAiringEpisode = { episode: -1 };
 			}
 
 			return media;
@@ -57,7 +57,7 @@
 						(anime.nextAiringEpisode?.episode === -1
 							? 99999
 							: anime.nextAiringEpisode?.episode || -1) -
-						(anime['mediaListEntry'] || { progress: 0 })['progress']
+						(anime.mediaListEntry || { progress: 0 }).progress
 					);
 				};
 
@@ -114,9 +114,7 @@
 	};
 
 	const totalEpisodes = (anime: Media) => {
-		return anime['episodes'] === null
-			? ''
-			: `<span style="opacity: 50%">/${anime['episodes']}</span>`;
+		return anime.episodes === null ? '' : `<span style="opacity: 50%">/${anime.episodes}</span>`;
 	};
 
 	const updateMedia = async (id: number, progress: number | undefined) => {
@@ -144,11 +142,11 @@
 	<ul>
 		{#each cleanedMedia as anime}
 			<li>
-				<a href={`https://anilist.co/anime/${anime['id']}`} target="_blank">
-					{anime['title']['english'] || anime['title']['romaji']}
+				<a href={`https://anilist.co/anime/${anime.id}`} target="_blank">
+					{anime.title.english || anime.title.romaji}
 				</a>
 				<span style="opacity: 50%;">|</span>
-				{(anime['mediaListEntry'] || { progress: 0 })['progress']}{@html totalEpisodes(anime)}
+				{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
 				<a href="#" on:click={() => updateMedia(anime.id, anime.mediaListEntry?.progress)}>+</a>
 				[{anime.nextAiringEpisode?.episode === -1
 					? '?'
diff --git a/src/lib/List/Due/MangaList.svelte b/src/lib/List/Due/MangaList.svelte
index f6e1323d..022c8b97 100644
--- a/src/lib/List/Due/MangaList.svelte
+++ b/src/lib/List/Due/MangaList.svelte
@@ -47,9 +47,9 @@
 		const flattenedLists = flattenLists(media);
 		const releasingMedia = flattenedLists.filter(
 			(media: Media) =>
-				media['status'] == 'RELEASING' &&
-				media['format'] != 'NOVEL' &&
-				(media['mediaListEntry'] || { progress: 0 })['progress'] >=
+				media.status == 'RELEASING' &&
+				media.format != 'NOVEL' &&
+				(media.mediaListEntry || { progress: 0 }).progress >=
 					($displayNotStarted === 'true' ? 0 : 1)
 		);
 		let finalMedia = releasingMedia;
@@ -117,13 +117,13 @@
 		<ul>
 			{#each cleanedMedia as manga}
 				<li>
-					<a href={`https://anilist.co/manga/${manga['id']}`} target="_blank">
-						{manga['title']['english'] || manga['title']['romaji'] || manga['title']['native']}
+					<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+						{manga.title.english || manga.title.romaji || manga.title.native}
 					</a>
 					<span style="opacity: 50%;">|</span>
-					{(manga['mediaListEntry'] || { progress: 0 })['progress']}
+					{(manga.mediaListEntry || { progress: 0 }).progress}
 					<a href="#" on:click={() => updateMedia(manga.id, manga.mediaListEntry?.progress)}>+</a>
-					[{manga['episodes'] || '?'}]
+					[{manga.episodes || '?'}]
 				</li>
 			{/each}
 		</ul>