From 625d062e0acf32af52c8bf13209f3f32dc4a6eeb Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 21 May 2022 09:23:26 +0200
Subject: [PATCH] implement anilist manga list

---
 src/components/items.svelte | 104 ++++++++++++++++++++++++++++++++++++
 src/pages/index.svelte      |  53 +++++++++---------
 src/util/request.js         |   2 +-
 3 files changed, 129 insertions(+), 30 deletions(-)
 create mode 100644 src/components/items.svelte

diff --git a/src/components/items.svelte b/src/components/items.svelte
new file mode 100644
index 0000000..a755e22
--- /dev/null
+++ b/src/components/items.svelte
@@ -0,0 +1,104 @@
+<script>
+    import request from "../util/request";
+    import { goto } from '@roxi/routify/runtime/helpers';
+
+    export var entries;
+    export var itemsList;
+
+    var isLoading = false;
+    async function find(entry) {
+        isLoading = true;
+        var query = new URLSearchParams();
+        query.set("title", entry.media.title.romaji);
+        query.set("limit", 20);
+        console.log(entry);
+        const result = await request("manga", query);
+        console.log(result.data);
+        const item = result.data.find(t => t.attributes.links.al === entry.media.id.toString());
+        console.log(item);
+        if(!item) {
+            alert(`Couldn't find any mangadex entry`);
+            isLoading = false;
+            return
+        }
+        $goto("./" + item.id);
+    }
+</script>
+
+{#if isLoading}
+    <dialog open>
+        Finding the manga
+    </dialog>
+{/if}
+
+<div class="items" class:items-list={itemsList}>
+    {#each entries.sort((a, b) => a.priority - b.priority) as entry}
+        <div class="item" class:r18={entry.media.isAdult} on:click={() => find(entry)}>
+            <div class="flex">
+                <img src={entry.media.coverImage.large} width=100 height=142 alt="{entry.media.title.userPreferred}">
+                <div class="info">
+                    <h3>{entry.media.title.userPreferred}</h3>
+                    <span>[{entry.progress}/{entry.media.chapters || "?"}]</span> <br>
+                    <span>{entry.score || "?"}/10</span>
+                    {#if entry.notes}
+                        <p>{entry.notes}</p>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    dialog {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+	.items {
+		display: grid;
+  		align-items: center;
+		gap: 1rem;
+		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	}
+	.items-list.items {
+		grid-template-columns: 1fr;
+	}
+    .items-list .item img {
+        height: 10rem;
+    }
+    .r18 img {
+        filter: blur(10px);
+    }
+    .info {
+        display: none;
+        opacity: 0;
+        transition: .2s opacity;
+    }
+    .items-list .info {
+        display: block;
+        opacity: 1;
+    }
+    .flex {
+        display: flex;
+        gap: 1rem;
+    }
+	.item img {
+		border-radius: 5px;
+		height: 15rem;
+		width: auto;
+		box-shadow: 0 0 0 white;
+		transition: .4s box-shadow, .3s height;
+	}
+	@media(prefers-reduced-motion) {
+		.item img, .item:hover img {
+			box-shadow: none;
+		}
+	}
+	.item:hover img {
+		box-shadow: 0 0 10px grey;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/index.svelte b/src/pages/index.svelte
index 0eb74d7..6c7798a 100644
--- a/src/pages/index.svelte
+++ b/src/pages/index.svelte
@@ -2,6 +2,7 @@
 	import request from "../util/request";
     import { goto } from '@roxi/routify/runtime/helpers';
 	import { getUserDetails, getUserManga, isLogedIn } from "../util/anilist";
+	import Items from "../components/items.svelte";
     
 	var name = "";
 
@@ -25,8 +26,11 @@
 
 	const anilistID = "8375";
 
-	let userDetails = getUserDetails();
-	let userManga = getUserManga();
+	let userDetails = isLogedIn() && getUserDetails();
+	let userManga = isLogedIn() && getUserManga();
+	let listStyle = false;
+	
+	$: userManga.then(t => console.log(t));
 </script>
 
 <svelte:head>
@@ -57,20 +61,25 @@
 		<a href="https://mangadex.org">Mangadex.org</a>
 	</div>
 
-	{#if isLogedIn()}
-		{#await userManga then userManga}
-			{#each userManga.data.MediaListCollection.lists as list}
-				<h2>{list.name}</h2>
+	<div>
+		<label for="list-style">Show as list</label>
+		<input type="checkbox" name="list-style" id="list-style" bind:checked={listStyle}>
+	</div>
 
-				<div class="items">
-					{#each list.entries as entry}
-						<div class="item">
-							<img src={entry.media.coverImage.large} width=100 height=142 alt="{entry.media.title}">
-						</div>
-					{/each}
-				</div>
-			{/each}
-		{/await}
+		
+	{#if isLogedIn()}
+		<div>
+			{#await userManga then userManga}
+				{#each userManga.data.MediaListCollection.lists as list}
+					<h2>{list.name}</h2>
+					<Items entries={list.entries} itemsList={listStyle} />
+				{/each}
+			{/await}
+		</div>
+	{:else}
+		<p>
+			Sign in via Anilist to search for manga and view your manga list.
+		</p>
 	{/if}
 	
 	<hr>
@@ -97,20 +106,6 @@
 </main>
 
 <style lang="postcss">
-	.items {
-		display: grid;
-  		align-items: center;
-		gap: 1rem;
-		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-	}
-	.item img {
-		border-radius: 5px;
-		height: 15rem;
-		width: auto;
-	}
-	.item h4 {
-		margin: 0;
-	}
 	.avatar {
 		border-radius: 999px;
 		height: 4rem;
diff --git a/src/util/request.js b/src/util/request.js
index 3a03717..14612b0 100644
--- a/src/util/request.js
+++ b/src/util/request.js
@@ -2,7 +2,7 @@ export const proxy = "https://cors-anywhere.danbulant.workers.dev/?";
 export const base = proxy + "https://api.mangadex.org/";
 
 function request(endpoint, query, type = "GET", body) {
-    return fetch(base + endpoint + (query ? "?" + query.toString() : ""), {
+    return fetch(base + endpoint + encodeURIComponent(encodeURIComponent(query ? "?" + query.toString() : "")), {
         method: type,
         body: body ? JSON.stringify(body) : undefined
     }).then(resp => resp.json());