From 00fd514da5aeba9cdf9daf617ba314ff99dcf703 Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Mon, 20 Dec 2021 18:22:10 +0100
Subject: [PATCH] feedback on to big error

---
 client/src/lib/api.ts              | 12 ++++++++++--
 client/src/lib/views/Create.svelte | 13 ++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts
index d8647fe..e884bcf 100644
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@@ -12,15 +12,23 @@ type CallOptions = {
 	body?: any
 }
 
+export class PayloadToLargeError extends Error {}
+
 async function call(options: CallOptions) {
-	return fetch('/api/' + options.url, {
+	const response = await fetch('/api/' + options.url, {
 		method: options.method,
 		body: options.body === undefined ? undefined : JSON.stringify(options.body),
 		mode: 'cors',
 		headers: {
 			'Content-Type': 'application/json',
 		},
-	}).then((r) => r.json())
+	})
+
+	if (!response.ok) {
+		if (response.status === 413) throw new PayloadToLargeError()
+		else throw new Error('API call failed')
+	}
+	return response.json()
 }
 
 export async function create(note: Note) {
diff --git a/client/src/lib/views/Create.svelte b/client/src/lib/views/Create.svelte
index 446b6ed..e29d621 100644
--- a/client/src/lib/views/Create.svelte
+++ b/client/src/lib/views/Create.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Note } from '$lib/api'
+	import { Note, PayloadToLargeError } from '$lib/api'
 	import { create } from '$lib/api'
 	import { getKeyFromString, encrypt, Hex, getRandomBytes } from '$lib/crypto'
 
@@ -51,8 +51,11 @@
 				id: response.id,
 			}
 		} catch (e) {
-			console.error(e)
-			error = 'could not create note.'
+			if (e instanceof PayloadToLargeError) {
+				error = 'could not create not. note is to big'
+			} else {
+				error = 'could not create note. please try again.'
+			}
 		} finally {
 			loading = false
 		}
@@ -167,4 +170,8 @@
 	.advanced.hidden {
 		max-height: 0;
 	}
+
+	.error-text {
+		margin-top: 0.5rem;
+	}
 </style>