From 4cbb423ae3b47999f96e6d6ec39d7138d0ccfea7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Sch=C3=B6ne?= <david.blaa@googlemail.com>
Date: Thu, 11 Jul 2024 12:02:30 +0200
Subject: [PATCH] #91 add notification on page component if a axios call faild

---
 src/lib/components/page/Page.svelte           | 15 ++++++++--
 src/lib/models/Models.ts                      | 16 ++++++++++
 src/lib/services/Api.ts                       | 20 +++++++++++--
 src/lib/stores/apiStores.ts                   |  3 ++
 src/lib/stores/pageStores.ts                  |  2 +-
 src/routes/+layout.js                         |  3 --
 .../{components/core/+page.js => +layout.ts}  |  9 ++++--
 src/routes/components/form/+page.js           | 17 -----------
 src/routes/components/page/+page.js           | 17 -----------
 src/routes/components/page/+page.svelte       | 30 +++++++------------
 10 files changed, 67 insertions(+), 65 deletions(-)
 delete mode 100644 src/routes/+layout.js
 rename src/routes/{components/core/+page.js => +layout.ts} (61%)
 delete mode 100644 src/routes/components/form/+page.js
 delete mode 100644 src/routes/components/page/+page.js

diff --git a/src/lib/components/page/Page.svelte b/src/lib/components/page/Page.svelte
index 10e5d0bf..907a6c0f 100644
--- a/src/lib/components/page/Page.svelte
+++ b/src/lib/components/page/Page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import type { linkType } from '$lib/models/Models';
-	import { pageContentLayoutType } from '$lib/models/Enums';
+	import type { errorType, linkType } from '$lib/models/Models';
+	import { pageContentLayoutType, notificationType } from '$lib/models/Enums';
 
 	// ui components
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
@@ -16,7 +16,8 @@
 	//popup
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
-	import { breadcrumbStore } from '$store/pageStores';
+	import { breadcrumbStore,notificationStore } from '$store/pageStores';
+	import { errorStore } from '$store/apiStores';
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -38,6 +39,14 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
 	export let fixLeft: boolean = true;
 
+	errorStore.subscribe((error:errorType) => {
+			console.log("🚀 ~ errorStore.subscribe ~ value:", error.error)
+			notificationStore.showNotification({
+				notificationType: notificationType.error,
+				message: error.error
+			})
+		})
+
 	onMount(async () => {
 		console.log('page');
 		breadcrumbStore.clean();
diff --git a/src/lib/models/Models.ts b/src/lib/models/Models.ts
index 91965b69..8791c4c2 100644
--- a/src/lib/models/Models.ts
+++ b/src/lib/models/Models.ts
@@ -221,3 +221,19 @@ export class Receive {
 		this.columns = [];
 	}
 }
+
+
+export class errorType {
+	statusText: string;
+	status: number;
+	error:string;
+	stackTrace:string
+
+	constructor() {
+		this.statusText = "";
+		this.status = 0;
+		this.error = "";
+		this.stackTrace = "";
+	}
+
+};
diff --git a/src/lib/services/Api.ts b/src/lib/services/Api.ts
index f14088c9..ce12dd34 100644
--- a/src/lib/services/Api.ts
+++ b/src/lib/services/Api.ts
@@ -1,6 +1,7 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password } from '../stores/apiStores';
+import { host, username, password, errorStore } from '../stores/apiStores';
+import type { errorType } from '$models/Models';
 
 console.log('setup axios');
 
@@ -23,9 +24,24 @@ const apiRequest = (method, url, request) => {
 		headers
 	})
 		.then((res) => {
+			// console.log("res",res);
+			
 			return Promise.resolve(res);
+
 		})
-		.catch((err) => {
+		.catch((er) => {
+		//console.log("🚀 ~ apiRequest ~ err:", er)
+			const err = er.response;
+			
+			let error:errorType = {
+							status: err.status,
+							statusText: err.statusText,
+							error: err.data.error,
+							stackTrace: err.data.stackTrace,
+			}
+
+			errorStore.set(error);
+
 			return Promise.reject(err);
 		});
 };
diff --git a/src/lib/stores/apiStores.ts b/src/lib/stores/apiStores.ts
index 6cddad83..61c17224 100644
--- a/src/lib/stores/apiStores.ts
+++ b/src/lib/stores/apiStores.ts
@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { errorType } from '$models/Models'
 
 export let host = 'window.location.origin';
 export let username = '';
@@ -8,6 +9,8 @@ const hostStore = writable(''); //writable(window.location.origin);
 const usernameStore = writable('');
 const passwordStore = writable('');
 
+export const errorStore = writable(new errorType());
+
 hostStore.subscribe((value) => {
 	host = value;
 });
diff --git a/src/lib/stores/pageStores.ts b/src/lib/stores/pageStores.ts
index 92a338db..ca60a432 100644
--- a/src/lib/stores/pageStores.ts
+++ b/src/lib/stores/pageStores.ts
@@ -117,7 +117,7 @@ function createBreadcrumbStore() {
 				value = value === undefined ? new BreadcrumbModel() : value;
 
 				let v = value.items.find((i) => i.link === item.link);
-				console.log(value.items, v);
+				//console.log(value.items, v);
 
 				if (v) {
 					const i = value.items.indexOf(v);
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
deleted file mode 100644
index 1e62f0b8..00000000
--- a/src/routes/+layout.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const prerender = true;
-export const ssr = false;
-export const trailingSlash = 'always';
diff --git a/src/routes/components/core/+page.js b/src/routes/+layout.ts
similarity index 61%
rename from src/routes/components/core/+page.js
rename to src/routes/+layout.ts
index 433f97cd..70724770 100644
--- a/src/routes/components/core/+page.js
+++ b/src/routes/+layout.ts
@@ -1,13 +1,18 @@
+export const prerender = true;
+export const ssr = false;
+export const trailingSlash = 'always';
+
 import { setApiConfig } from '$lib/stores/apiStores';
 
 /** @type {import('./$types').PageLoad} */
-export function load() {
+export async function load({ fetch }) {
 	console.log('load and set apiconfig');
 
 	if (import.meta.env.DEV) {
 		console.log('dev');
 
-		setApiConfig('https://dev.bexis2.uni-jena.de/', 'admin', '123456');
+		setApiConfig('http://localhost:44345/', 'davidschoene', '123456');
+
 	} else if (import.meta.env.PROD) {
 		console.log('PROD');
 		setApiConfig('https://dev.bexis2.uni-jena.de/', 'admin', '123456');
diff --git a/src/routes/components/form/+page.js b/src/routes/components/form/+page.js
deleted file mode 100644
index d593e62e..00000000
--- a/src/routes/components/form/+page.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { setApiConfig } from '$lib/stores/apiStores';
-
-/** @type {import('./$types').PageLoad} */
-export function load() {
-	console.log('load and set apiconfig');
-
-	if (import.meta.env.DEV) {
-		console.log('dev');
-
-		setApiConfig('https://localhost:44345', 'davidschoene', '123456');
-	} else if (import.meta.env.PROD) {
-		console.log('PROD');
-		setApiConfig('https://dev.bexis2.uni-jena.de/', 'david', '123456');
-	}
-
-	return {};
-}
diff --git a/src/routes/components/page/+page.js b/src/routes/components/page/+page.js
deleted file mode 100644
index 545cd543..00000000
--- a/src/routes/components/page/+page.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { setApiConfig } from '$lib/stores/apiStores';
-
-/** @type {import('./$types').PageLoad} */
-export function load() {
-	console.log('load and set apiconfig');
-
-	if (import.meta.env.DEV) {
-		console.log('dev');
-
-		setApiConfig('https://localhost:44345/', 'davidschoene', '123456');
-	} else if (import.meta.env.PROD) {
-		console.log('PROD');
-		setApiConfig('https://dev.bexis2.uni-jena.de/', 'admin', '123456');
-	}
-
-	return {};
-}
diff --git a/src/routes/components/page/+page.svelte b/src/routes/components/page/+page.svelte
index 86fa16d9..8120d9ff 100644
--- a/src/routes/components/page/+page.svelte
+++ b/src/routes/components/page/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import Page from '$lib/components/page/Page.svelte';
-	import type { linkType } from '$lib/models/Models';
+	import type { errorType, linkType } from '$lib/models/Models';
 	import { pageContentLayoutType } from '$lib/models/Enums';
 
 	import { helpStore } from '$store/pageStores';
+	import { errorStore } from '$store/apiStores';
 	import type { helpItemType, helpStoreType } from '$models/Models';
-	import TextInput from '$lib/components/form/TextInput.svelte';
-	import ErrorMessage from '$lib/components/page/ErrorMessage.svelte';
 
 	let links: linkType[] = [
 		{
@@ -16,6 +15,9 @@
 	];
 
 	import { HelpExampleData } from './data/help';
+	import { onMount } from 'svelte';
+	import { Api } from '$lib';
+	
 
 	let helpItems: helpItemType[] = HelpExampleData.helpItems;
 	helpStore.setHelpItemList(helpItems);
@@ -32,6 +34,10 @@
 	function updateTitle() {
 		title += Date.now();
 	}
+
+	onMount(async()=>{
+		var res = await Api.get("test/errortest");
+	})
 </script>
 
 <Page
@@ -44,29 +50,13 @@
 	<svelte:fragment slot="left">
 		<button class="btn variant-filled-error" on:click={updateTitle}>change title </button>
 		<div class="w-screen">
-			<h2 class="h2">Content</h2>
-			<TextInput id="name" label="name" help={true} />
-			<p>Lorem ipsum dolor sit amet, con</p>
 
-			{#if e}
-				<ErrorMessage error={e} />
-			{/if}
 		</div>
 	</svelte:fragment>
 	<div>
 		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
 		ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
 		dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-		sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
-		invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
-		justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-		ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-		eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
-		et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
-		est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
-		esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
-		iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
-		nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-		euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+		sit amet. 
 	</div>
 </Page>