Merge pull request #170 from wwi21seb-projekt/final_fixes

fix error handling

src/components/aboutTabs/Architecture.svelte

@@ -13,7 +13,7 @@
 		title="Schnatter"
 		width="720"
 		height="405"
-		src="/schnatter.mp4"
+		src="https://youtu.be/t5PvmXyIYRk"
 		frameborder="0"
 		allow="autoplay"
 		allowfullscreen

src/components/layout/Navbar.svelte

@@ -11,18 +11,12 @@
 	} from '@skeletonlabs/skeleton';
 	import Icon from '@iconify/svelte';
 	import { get } from 'svelte/store';
-	import {
-		globalUsername,
-		notificationCount,
-		notificationList,
-		profilePicture,
-		refreshToken,
-		token
-	} from '$lib/Store';
+	import { notificationCount, notificationList, token } from '$lib/Store';
 	import { t } from '../../i18n';
 	import Settings from '../popups/Settings.svelte';
 	import Notifications from '../popups/Notifications.svelte';
 	import { createNotificationToast } from '$lib/utils/Toasts';
+	import { logout } from '$lib/utils/Logout';
 	const loginToken = get(token);
 
 	const modalStore = getModalStore();
@@ -56,12 +50,7 @@
 	};
 
 	function handleLogout() {
-		token.set('');
-		refreshToken.set('');
-		globalUsername.set('');
-		profilePicture.set('');
-		notificationList.set({ records: [] });
-		location.reload();
+		logout();
 	}
 	function openModalPost() {
 		modalStore.trigger(modalPost);
@@ -79,6 +68,7 @@
 	}
 	// Service Worker Push Notification
 	if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
+		// Listen for messages from service worker
 		navigator.serviceWorker.addEventListener('message', (event) => {
 			if (event.data && event.data.type === 'PUSH_NOTIFICATION') {
 				const payload = event.data.payload;

src/components/login/Login.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 	import LoginInput from './LoginInput.svelte';
 	import { t } from '../../i18n';
-	import { Toast } from '@skeletonlabs/skeleton';
 	import { getToastStore } from '@skeletonlabs/skeleton';
 	import { goto } from '$app/navigation';
 	import { createToast } from '$lib/utils/Toasts';
 	import { globalUsername, refreshToken, registerUsername, token } from '$lib/Store';
 	import type { Login } from '$lib/types/Login';
-	import type { CustomError } from '$lib/types/CustomError';
-	import { subscribeUserToPush } from '../../push';
+	import { subscribeUserToPush } from '$lib/utils/Push';
 	import { getModalStore, type ModalComponent, type ModalSettings } from '@skeletonlabs/skeleton';
 	import ModalForgotPwd from '../modals/ModalForgotPwd.svelte';
 	import { login } from '$lib/utils/Login';
@@ -42,19 +40,14 @@
 	$: allInputFieldsFilled = password.length != 0 && username.length != 0;
 	async function handleSubmit() {
 		try {
-			const response = await login(username, password);
+			const response = await login(username, password, toastStore);
 			const statusCode = response.status;
-			if (statusCode !== 200) {
-				const body = await response.json();
-				const customError: CustomError = body.error;
-				toastStore.clear();
-				toastStore.trigger(createToast(customError.message, 'error'));
-			} else if (statusCode == 200) {
+			if (statusCode == 200) {
 				const requestData: Login = await response.json();
 				token.set(requestData.token);
 				refreshToken.set(requestData.refreshToken);
 				globalUsername.set(username);
-				await subscribeUserToPush();
+				await subscribeUserToPush(toastStore);
 				location.reload();
 			}
 			if (statusCode == 403) {
@@ -67,7 +60,6 @@
 	}
 </script>
 
-<Toast zIndex="1100" />
 <div class="pt-8">
 	<div class="justify-center">
 		<div class=" p-2 h4 text-center font-bold" title="logInHeading">{$t('login.header.title')}</div>
@@ -98,11 +90,8 @@
 				</div>
 
 				<div class="flex flex-row mt-3 justify-center text-center">
-					<button
-						on:click={handleSubmit}
-						disabled={!allInputFieldsFilled}
-						class="btn variant-filled-primary"
-						type="submit">{$t('login.submit.btn')}</button
+					<button disabled={!allInputFieldsFilled} class="btn variant-filled-primary" type="submit"
+						>{$t('login.submit.btn')}</button
 					>
 				</div>
 			</form>

src/components/modals/ModalChangePwd.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import RegisterInput from '../RegisterInput.svelte';
 	import { t } from '../../i18n';
-	import { Toast, getModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
 	import { type PasswordChange } from '$lib/types/PasswordChecks';
 	import {
 		handlePasswordInput,
@@ -10,6 +10,7 @@
 	} from '$lib/utils/ChangePassword';
 
 	const modalStore = getModalStore();
+	const toastStore = getToastStore();
 	let oldPassword = '';
 
 	var passwordChange: PasswordChange = {
@@ -52,7 +53,7 @@
 		oldPassword.length != 0;
 
 	async function callHandleSubmit() {
-		const statusCode = await handleChangeSubmit(passwordChange, oldPassword);
+		const statusCode = await handleChangeSubmit(passwordChange, oldPassword, toastStore);
 		if (statusCode == 204) {
 			// @ts-expect-error  | skeleton error (https://www.skeleton.dev/utilities/modals)
 			$modalStore[0].response(statusCode);
@@ -61,7 +62,6 @@
 	}
 </script>
 
-<Toast zIndex="1100" />
 <main class="card p-4 md:w-[25vw] w-[98vw]">
 	<h3 class="h3 mb-2">{$t('modalChangePassword.header')}</h3>
 	<RegisterInput

src/components/modals/ModalChat.svelte

@@ -1,6 +1,6 @@
 <!-- Chat model in NavBar -->
 <script lang="ts">
-	import { Avatar, getModalStore, type ModalSettings } from '@skeletonlabs/skeleton';
+	import { Avatar, getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import { t } from '../../i18n';
 	import Icon from '@iconify/svelte';
 	import type { ChatMessage, ChatMessages, ChatStructure } from '$lib/types/Chat';
@@ -12,6 +12,7 @@
 	import { convertDateTime } from '$lib/utils/Time';
 
 	const modalStore = getModalStore();
+	const toastStore = getToastStore();
 	let userSearch: string = '';
 
 	const modalBeginChat: ModalSettings = {
@@ -50,7 +51,7 @@
 
 	onMount(async () => {
 		//all existing chats are loaded when the modal is opened
-		dataChats = await getChats();
+		dataChats = await getChats(toastStore);
 		chats.set(dataChats);
 		copieChats = Object.assign({}, dataChats);
 		//Last open chat is displayed
@@ -66,7 +67,7 @@
 		);
 	}
 
-	async function openChat(chatId: UUID) {
+	async function openChat(chatId: UUID | string) {
 		//Existing WebSocket is closed
 		if (socket) {
 			socket.close();
@@ -94,7 +95,7 @@
 		});
 
 		messageDisabeled = false;
-		dataMessages = await getMessages(chatId, 10, 0);
+		dataMessages = await getMessages(chatId, 10, 0, toastStore);
 		// sort messages by date
 		dataMessages.records.sort((a, b) => b.creationDate.localeCompare(a.creationDate));
 		messages = dataMessages.records;
@@ -121,9 +122,11 @@
 	}
 
 	async function loadMoreMessages() {
-		dataMessages = await getMessages($chatIdNewChat, 10, messages.length);
-		dataMessages.records.sort((a, b) => b.creationDate.localeCompare(a.creationDate));
-		messages = [...messages, ...dataMessages.records];
+		if ($chatIdNewChat) {
+			dataMessages = await getMessages($chatIdNewChat, 10, messages.length, toastStore);
+			dataMessages.records.sort((a, b) => b.creationDate.localeCompare(a.creationDate));
+			messages = [...messages, ...dataMessages.records];
+		}
 	}
 
 	onDestroy(() => {

src/components/modals/ModalCreatePost.svelte

@@ -2,7 +2,6 @@
 	import Icon from '@iconify/svelte';
 	import { FileDropzone, getModalStore } from '@skeletonlabs/skeleton';
 	import { getToastStore } from '@skeletonlabs/skeleton';
-	import { createToast } from '$lib/utils/Toasts';
 	import { t } from '../../i18n';
 	import { onMount } from 'svelte';
 	import { sendPost } from '$lib/utils/Posts';
@@ -57,12 +56,10 @@
 	}
 
 	async function handleSubmitPost() {
-		let response = await sendPost(text, repostId, selectedImage);
+		let response = await sendPost(text, repostId, selectedImage, toastStore);
 		if (response == 201) {
 			modalStore.close();
 			window.location.reload();
-		} else {
-			toastStore.trigger(createToast('We were running into a problem! Sorry', 'error'));
 		}
 	}
 

src/components/modals/ModalForgotPwd.svelte

@@ -62,26 +62,18 @@
 	$: tokenSent = tokenSent;
 
 	async function callHandleSubmit() {
-		const statusCode = await handleForgotSubmit(username, tokenString, passwordChange);
+		const statusCode = await handleForgotSubmit(username, tokenString, passwordChange, toastStore);
 		if (statusCode == 204) {
 			toastStore.trigger(createToast($t('toast.pwdReset'), 'success'));
 			modalStore.close();
-		} else if (statusCode == 400) {
-			toastStore.trigger(createToast($t('toast.userNotFound'), 'error'));
-		} else if (statusCode == 403) {
-			toastStore.trigger(createToast($t('toast.tokenInvalid'), 'error'));
-		} else {
-			toastStore.trigger(createToast($t('toast.sometingWrong'), 'error'));
 		}
 	}
 
 	async function handleSendToken() {
-		const statusCode = await sendToken(username);
+		const statusCode = await sendToken(username, toastStore);
 		if (statusCode == 200) {
 			toastStore.trigger(createToast($t('toast.tokenSent'), 'success'));
 			tokenSent = true;
-		} else if (statusCode == 404) {
-			toastStore.trigger(createToast($t('toast.userNotFound'), 'error'));
 		}
 	}
 </script>

src/components/modals/ModalNewChat.svelte

@@ -49,7 +49,7 @@
 	}
 	async function startChat() {
 		//when a new chat is created, the new modal is closed and the normal chat modal is displayed again
-		await createChat(userNewChat, initialMessage);
+		await createChat(userNewChat, initialMessage, toastStore);
 		modalStore.close();
 		modalStore.trigger(modalChat);
 	}

src/components/popups/Notifications.svelte

@@ -1,17 +1,18 @@
 <!-- Notification popup Navbar -->
 <script lang="ts">
-	import { Avatar } from '@skeletonlabs/skeleton';
+	import { Avatar, getToastStore } from '@skeletonlabs/skeleton';
 	import { t } from '../../i18n';
 	import { get } from 'svelte/store';
 	import type { Notifications } from '$lib/types/Notifications';
 	import { deleteNotificationRequest, getNotificationsRequest } from '$lib/utils/Notifications';
 	import { notificationCount, notificationList, token } from '$lib/Store';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
+	const toastStore = getToastStore();
 	onMount(async () => {
 		let notificationListUpdate: Notifications = { records: [] };
 		if (get(token)) {
-			notificationListUpdate = (await getNotificationsRequest()) ?? {
+			notificationListUpdate = (await getNotificationsRequest(toastStore)) ?? {
 				records: []
 			};
 		}
@@ -32,7 +33,7 @@
 		}
 	}
 	async function deleteNotification(notificationId: string) {
-		const response = await deleteNotificationRequest(notificationId);
+		const response = await deleteNotificationRequest(notificationId, toastStore);
 
 		if (response) {
 			notificationList.set(deleteNotificationById(get(notificationList), notificationId));

src/components/posts/Commentsection.svelte

@@ -7,7 +7,6 @@
 	import ProfilePicture from '../ProfilePicture.svelte';
 	import { getInitalsFromUsername } from '$lib/utils/Pictures';
 	import { getToastStore } from '@skeletonlabs/skeleton';
-	import { createToast } from '$lib/utils/Toasts';
 
 	let limit: number = 10;
 	let offset: number = 0;
@@ -17,16 +16,8 @@
 	const toastStore = getToastStore();
 
 	onMount(async () => {
-		const response = await fetchComments(limit, postId, offset);
-		if (typeof response === 'number') {
-			if (response == 401) {
-				toastStore.trigger(createToast($t('post.comments.error.unauthorized'), 'error'));
-			} else if (response == 404) {
-				toastStore.trigger(createToast($t('post.comments.error.notFound'), 'error'));
-			} else {
-				toastStore.trigger(createToast($t('post.comments.error.unknown'), 'error'));
-			}
-		} else {
+		const response = await fetchComments(limit, postId, offset, toastStore);
+		if (typeof response !== 'number') {
 			commentData = response as Comments;
 		}
 	});

src/components/posts/Content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { TextColorPost } from '$lib/types/Post';
+
+	export let postPicture: string | undefined;
+	export let contentText: TextColorPost[];
+</script>
+
+<!--Content Section for Posts and reposts-->
+<section class="p-4">
+	{#if postPicture}
+		<div class="flex justify-center">
+			<img class="max-h-[375px] rounded-md object-contain" src={postPicture} alt="" />
+		</div>
+	{/if}
+	<p class="h-[10vh] p-1 text-lg" title="repostPostcontent">
+		{#each contentText as { hashtagClass, text, wordID } (wordID)}
+			<span class={hashtagClass}>{text} </span>
+		{/each}
+	</p>
+</section>

src/components/posts/Header.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Author } from '$lib/types/Author';
+	import ProfilePicture from '../ProfilePicture.svelte';
+	export let author: Author;
+	export let repostLocationString: string;
+	export let repostDate: string;
+</script>
+
+<!-- Header Section for Posts and reposts without the delete option on profile page-->
+<div class="flex flex-row items-center">
+	<ProfilePicture
+		cssClass="h-[5vh] w-[5vh] rounded-full mr-3 isolation-auto"
+		src={author.picture?.url ?? ''}
+		username={author.username}
+	/>
+	<div class="flex flex-col">
+		<a
+			class="text-[0.75rem]"
+			title="repostAuthorUsername"
+			href="/profile?username={author.username}"
+			data-sveltekit-preload-data="hover">@{author.username}</a
+		>
+
+		<p class="font-light text-xs text-[0.75rem]" title="repostAuthorNickname">
+			{author.nickname}
+		</p>
+	</div>
+</div>
+<div class="flex flex-col items-end">
+	<p class="text-xs text-[0.75rem]">{repostLocationString}</p>
+	<p class="text-xs text-[0.75rem]" title="repostPostdate">{repostDate}</p>
+</div>