From 981d63c6df338447bd655125f107f2cb473b61a9 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Fri, 13 May 2022 15:01:33 +0200
Subject: [PATCH] added 404 page

---
 web/App.svelte      | 36 ++++++++++++++++++++++++++----------
 web/NotFound.svelte | 12 ++++++++++++
 2 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 web/NotFound.svelte

diff --git a/web/App.svelte b/web/App.svelte
index 61c5b7b..025af72 100644
--- a/web/App.svelte
+++ b/web/App.svelte
@@ -1,16 +1,23 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import getComponentForShare from "./contentType";
+	import NotFound from "./NotFound.svelte";
 
 	const regex = /filename="(.*)"/gm;
 	const slug = window.location.pathname.split("/").pop();
 
+	let notFound = false;
 	let component = null;
 	let contentType: string;
 	let filename: string;
 
-	async function getFileHeadAndComponent() {
+	async function getFileHead() {
 		const res = await fetch(`/s/${slug}`,{method:"HEAD"});
+
+		if (res.status === 404){
+			notFound = true;
+			return;
+		}
+
 		contentType = res.headers.get("Content-Type");
 
 		let match;
@@ -21,19 +28,28 @@
 			}
 			filename = match[1];
 		}
-		
-		return getComponentForShare(contentType,filename);
 	}
 </script>
 
-<div class="dl">
-	<a href="/s/{slug}">Download</a>
-</div>
+{#if !notFound}
+	<div class="dl">
+		<a href="/s/{slug}">Download</a>
+	</div>
+{/if}
 <main>
-	{#await getFileHeadAndComponent()}
+	{#await getFileHead()}
 		Loading data...
-	{:then v } 
-		<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
+	{:then}
+
+		{#if notFound}
+			<NotFound />
+		{:else}
+			{#await getComponentForShare(contentType, filename)}
+				Loading component...
+			{:then v} 
+				<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
+			{/await}
+		{/if}
 	{/await}
 </main>
 
diff --git a/web/NotFound.svelte b/web/NotFound.svelte
new file mode 100644
index 0000000..711b45c
--- /dev/null
+++ b/web/NotFound.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+
+</script>
+
+<p>Share not found</p>
+
+<style>
+    p{
+        color: var(--color-secondary);
+        font-size: 3rem;
+    }
+</style>
\ No newline at end of file