Cleanup web import

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>

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
   });
 }

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>
-  <Loader>{message}</Loader>
-{:else}
-  <Button on:click={onImport}>Import {decodeURI(volume || '')} into catalog?</Button>
-{/if}