From 50ea6c49f545d1962ca70e19d7d46085e3ebdf00 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Tue, 3 Oct 2023 11:17:26 +0200
Subject: [PATCH] Cleanup web import

---
 src/lib/components/ConfirmationPopup.svelte |  2 +-
 src/lib/util/modals.ts                      |  6 +++--
 src/routes/upload/+page.svelte              | 27 +++++++++++++--------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/ConfirmationPopup.svelte b/src/lib/components/ConfirmationPopup.svelte
index 9c1ae0e..d4f5643 100644
--- a/src/lib/components/ConfirmationPopup.svelte
+++ b/src/lib/components/ConfirmationPopup.svelte
@@ -22,6 +22,6 @@
       {$confirmationPopupStore?.message}
     </h3>
     <Button color="red" class="mr-2" on:click={$confirmationPopupStore?.onConfirm}>Yes</Button>
-    <Button color="alternative">No</Button>
+    <Button color="alternative" on:click={$confirmationPopupStore?.onCancel}>No</Button>
   </div>
 </Modal>
diff --git a/src/lib/util/modals.ts b/src/lib/util/modals.ts
index 08916e1..9a278fc 100644
--- a/src/lib/util/modals.ts
+++ b/src/lib/util/modals.ts
@@ -4,13 +4,15 @@ type ConfirmationPopup = {
   open: boolean;
   message: string;
   onConfirm?: () => void;
+  onCancel?: () => void;
 };
 export const confirmationPopupStore = writable<ConfirmationPopup | undefined>(undefined);
 
-export function promptConfirmation(message: string, onConfirm?: () => void) {
+export function promptConfirmation(message: string, onConfirm?: () => void, onCancel?: () => void) {
   confirmationPopupStore.set({
     open: true,
     message,
-    onConfirm
+    onConfirm,
+    onCancel
   });
 }
diff --git a/src/routes/upload/+page.svelte b/src/routes/upload/+page.svelte
index da1edd5..1a00320 100644
--- a/src/routes/upload/+page.svelte
+++ b/src/routes/upload/+page.svelte
@@ -3,7 +3,8 @@
   import { page } from '$app/stores';
   import Loader from '$lib/components/Loader.svelte';
   import { getItems, processFiles } from '$lib/upload';
-  import { Button } from 'flowbite-svelte';
+  import { promptConfirmation, showSnackbar } from '$lib/util';
+  import { onMount } from 'svelte';
   export const BASE_URL = 'https://www.mokuro.moe/manga';
 
   const manga = $page.url.searchParams.get('manga');
@@ -11,12 +12,10 @@
   const url = `${BASE_URL}/${manga}/${volume}`;
 
   let message = 'Loading...';
-  let loading = false;
 
   let files: File[] = [];
 
   async function onImport() {
-    loading = true;
     const mokuroRes = await fetch(url + '.mokuro');
     const mokuroBlob = await mokuroRes.blob();
     const mokuroFile = new File([mokuroBlob], volume + '.mokuro', { type: mokuroBlob.type });
@@ -51,14 +50,22 @@
     console.log(files);
 
     processFiles(files).then(() => {
-      goto('/');
+      goto('/', { replaceState: true });
     });
-    loading = true;
   }
+
+  function onCancel() {
+    goto('/', { replaceState: true });
+  }
+
+  onMount(() => {
+    if (!manga || !volume) {
+      showSnackbar('Something went wrong');
+      onCancel();
+    } else {
+      promptConfirmation(`Import ${decodeURI(volume || '')} into catalog?`, onImport, onCancel);
+    }
+  });
 </script>
 
-{#if loading}
-  <Loader>{message}</Loader>
-{:else}
-  <Button on:click={onImport}>Import {decodeURI(volume || '')} into catalog?</Button>
-{/if}
+<Loader>{message}</Loader>