From 5341b07e9aab68124e51b1ed6e708fecd7dc77e4 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 9 Sep 2024 23:35:38 -0700
Subject: refactor(reader): chapter list component

---
 src/lib/Reader/Chapters.svelte | 22 ++++++++++++++++++++++
 src/routes/reader/+page.svelte | 23 ++++-------------------
 2 files changed, 26 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/Reader/Chapters.svelte

(limited to 'src')

diff --git a/src/lib/Reader/Chapters.svelte b/src/lib/Reader/Chapters.svelte
new file mode 100644
index 00000000..9953036e
--- /dev/null
+++ b/src/lib/Reader/Chapters.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let data;
+</script>
+
+<ul>
+	{#each data.data as chapter}
+		<li>
+			{#if chapter.attributes.volume}
+				Vol. {chapter.attributes.volume}
+			{/if}
+			Ch. {chapter.attributes.chapter}
+			<span class="opaque">|</span>
+			<a
+				href={`https://mangadex.org/chapter/${chapter.id}`}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{chapter.attributes.title || 'Read'}
+			</a>
+		</li>
+	{/each}
+</ul>
diff --git a/src/routes/reader/+page.svelte b/src/routes/reader/+page.svelte
index cbdd3916..05e47274 100644
--- a/src/routes/reader/+page.svelte
+++ b/src/routes/reader/+page.svelte
@@ -1,5 +1,7 @@
 <script>
 	import Notice from '$lib/Error/Notice.svelte';
+	import Message from '$lib/Loading/Message.svelte';
+	import Chapters from '$lib/Reader/Chapters.svelte';
 	import InputTemplate from '$lib/Tools/InputTemplate.svelte';
 
 	let submission = '';
@@ -10,29 +12,12 @@
 <InputTemplate field="MangaDex URL" bind:submission submitText="Read" preserveCase>
 	{#if mangaDexID}
 		{#await fetch(`https://api.mangadex.org/manga/${mangaDexID}/feed?order[chapter]=desc&translatedLanguage[]=en`)}
-			<!--  -->
+			<Message message="Loading chapters ..." />
 		{:then response}
 			{#if response.ok}
 				{#await response.json() then data}
 					{#if data.data}
-						<ul>
-							{#each data.data as chapter}
-								<li>
-									{#if chapter.attributes.volume}
-										Vol. {chapter.attributes.volume}
-									{/if}
-									Ch. {chapter.attributes.chapter}
-									<span class="opaque">|</span>
-									<a
-										href={`https://mangadex.org/chapter/${chapter.id}`}
-										target="_blank"
-										rel="noopener noreferrer"
-									>
-										{chapter.attributes.title}
-									</a>
-								</li>
-							{/each}
-						</ul>
+						<Chapters {data} />
 					{:else}
 						<p class="opaque">(⌣_⌣”)</p>
 					{/if}
-- 
cgit v1.2.3