Self test bug fixes

src/components/layout/Navbar.svelte

@@ -4,19 +4,29 @@
 	import {
 		AppBar,
 		getModalStore,
+		getToastStore,
 		popup,
 		type ModalSettings,
 		type PopupSettings
 	} from '@skeletonlabs/skeleton';
 	import Icon from '@iconify/svelte';
 	import { get } from 'svelte/store';
-	import { notificationCount, notificationList, refreshToken, token } from '$lib/Store';
+	import {
+		globalUsername,
+		notificationCount,
+		notificationList,
+		profilePicture,
+		refreshToken,
+		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';
 	const loginToken = get(token);
 
 	const modalStore = getModalStore();
+	const toastStore = getToastStore();
 
 	const modalPost: ModalSettings = {
 		type: 'component',
@@ -48,6 +58,9 @@
 	function handleLogout() {
 		token.set('');
 		refreshToken.set('');
+		globalUsername.set('');
+		profilePicture.set('');
+		notificationList.set({ records: [] });
 		location.reload();
 	}
 	function openModalPost() {
@@ -80,9 +93,11 @@
 				} else {
 					notificationList.update((value) => {
 						value.records.push(payload);
+
 						return value;
 					});
 					notificationCount.update((value) => value + 1);
+					toastStore.trigger(createNotificationToast(payload));
 				}
 			}
 		});

src/components/Login.svelte → src/components/login/Login.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import LoginInput from './LoginInput.svelte';
-	import { t } from '../i18n';
+	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 '../../push';
 	import { getModalStore, type ModalComponent, type ModalSettings } from '@skeletonlabs/skeleton';
-	import ModalForgotPwd from './modals/ModalForgotPwd.svelte';
+	import ModalForgotPwd from '../modals/ModalForgotPwd.svelte';
 	import { login } from '$lib/utils/Login';
 
 	const modalStore = getModalStore();

src/components/modals/ModalChangeProfilePicture.svelte

@@ -77,7 +77,7 @@
 	});
 </script>
 
-<main class="card md:w-[60vw] w-[98vw] min-h-[80vh] h-auto">
+<main class="card md:w-[60vw] w-[98vw] min-h-[70vh] max-h-[75vh] overflow-scroll">
 	<div class="mx-auto">
 		<div class="flex justify-center my-4">
 			{#if imageDataUrl}

src/components/modals/ModalChangePwd.svelte

@@ -127,7 +127,7 @@
 			disabled={!areAllInputsCorrect}
 			on:click={callHandleSubmit}
 			class="btn variant-filled-primary ml-2"
-			type="submit">{$t('register.button.register')}</button
+			type="submit">{$t('modalChangePassword.changeButton')}</button
 		>
 	</div>
 </main>

src/components/modals/ModalChat.svelte

@@ -4,7 +4,7 @@
 	import { t } from '../../i18n';
 	import Icon from '@iconify/svelte';
 	import type { ChatMessage, ChatMessages, ChatStructure } from '$lib/types/Chat';
-	import { chatIdNewChat, globalUsername, serverURL, token } from '$lib/Store';
+	import { chatIdNewChat, chats, globalUsername, serverURL, token } from '$lib/Store';
 	import { get } from 'svelte/store';
 	import { onDestroy, onMount } from 'svelte';
 	import { getChats, getMessages } from '$lib/utils/Chat';
@@ -50,6 +50,7 @@
 
 	onMount(async () => {
 		dataChats = await getChats();
+		chats.set(dataChats);
 		copieChats = Object.assign({}, dataChats);
 		if ($chatIdNewChat) {
 			openChat($chatIdNewChat);
@@ -153,7 +154,7 @@
 					on:input={handleChatSearch}
 				/>
 			</div>
-			<div class="p-4 h-4/6">
+			<div class="p-4 h-5/6 overflow-auto">
 				<ul class="list">
 					{#each dataChats.records as record (record.chatId)}
 						<li class="h-9">

src/components/modals/ModalCreatePost.svelte

@@ -100,7 +100,7 @@
 			</section>
 		{/if}
 		{#if imageClick == true}
-			<section class="p-3 flex flex-col">
+			<section class="p-3 flex flex-col max-h-[65vh] overflow-auto">
 				<FileDropzone
 					name="files"
 					accept="image/*"
@@ -136,7 +136,7 @@
 				</label>
 			</section>
 		{/if}
-		<footer class="card-footer flex flex-row justify-end">
+		<footer class="card-footer flex flex-row justify-end mt-2">
 			<button type="button" class="btn variant-filled-secondary mx-1" on:click={closeModal}
 				>{$t('modalCreatePost.button.close')}</button
 			>

src/components/modals/ModalNewChat.svelte

@@ -6,6 +6,8 @@
 	import { onMount } from 'svelte';
 	import Icon from '@iconify/svelte';
 	import { createChat } from '$lib/utils/Chat';
+	import { get } from 'svelte/store';
+	import { chats } from '$lib/Store';
 
 	const modalStore = getModalStore();
 	let inputField: HTMLInputElement;
@@ -31,6 +33,9 @@
 			const usersRequest: UsersForSearch | undefined = await userSearch(userInput, toastStore);
 			if (usersRequest) {
 				users = usersRequest.records;
+				const usernamesToRemove = new Set(get(chats).records.map((chat) => chat.user.username));
+
+				users = users.filter((user) => !usernamesToRemove.has(user.username));
 			}
 		}
 	}
@@ -117,11 +122,7 @@
 						maxlength="256"
 						disabled={sendDisabled}
 					/>
-					<button
-						class="variant-filled-primary w-1/12"
-						disabled={sendDisabled}
-						on:click={startChat}
-					>
+					<button class="variant-filled-primary w-1/12" disabled={sendDisabled}>
 						<Icon
 							class="w-7 h-7 align-middle justify-center"
 							inline

src/components/popups/Notifications.svelte

@@ -57,8 +57,8 @@
 	}
 </script>
 
-<main class="flex flex-col justify-center p-2 w-[18vw]">
-	<ul class="list">
+<main class="flex flex-col justify-center w-[18vw] max-h-72 overflow-auto">
+	<ul class="list m-2">
 		{#each $notificationList.records as notification}
 			<button
 				title={$t('notifications.tooltip.delete')}

src/components/Commentsection.svelte → src/components/posts/Commentsection.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { fetchComments } from '$lib/utils/Comments';
 	import { onMount } from 'svelte';
-	import { t } from '../i18n';
+	import { t } from '../../i18n';
 	import type { UUID } from 'crypto';
 	import type { Comments } from '$lib/types/Comment';
-	import ProfilePicture from './ProfilePicture.svelte';
+	import ProfilePicture from '../ProfilePicture.svelte';
 	import { getInitalsFromUsername } from '$lib/utils/Pictures';
 	import { getToastStore } from '@skeletonlabs/skeleton';
 	import { createToast } from '$lib/utils/Toasts';
@@ -20,14 +20,14 @@
 		const response = await fetchComments(limit, postId, offset);
 		if (typeof response === 'number') {
 			if (response == 401) {
-				toastStore.trigger(createToast($t('post.comments.error.unauthorized')));
+				toastStore.trigger(createToast($t('post.comments.error.unauthorized'), 'error'));
 			} else if (response == 404) {
-				toastStore.trigger(createToast($t('post.comments.error.notFound')));
+				toastStore.trigger(createToast($t('post.comments.error.notFound'), 'error'));
 			} else {
-				toastStore.trigger(createToast($t('post.comments.error.unknown')));
+				toastStore.trigger(createToast($t('post.comments.error.unknown'), 'error'));
 			}
 		} else {
-			commentData = response;
+			commentData = response as Comments;
 		}
 	});
 </script>

src/components/Feed.svelte → src/components/posts/Feed.svelte

@@ -7,6 +7,6 @@
 
 <main class="flex flex-col items-center">
 	{#each feedData.records as postData (postData.postId)}
-		<Post bind:postData currentUsername={postData.author.username} />
+		<Post bind:postData currentUsername={postData.author?.username} />
 	{/each}
 </main>

src/components/Post.svelte → src/components/posts/Post.svelte

@@ -4,13 +4,13 @@
 	import { getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import { token } from '$lib/Store';
 	import { get } from 'svelte/store';
-	import { t } from '../i18n';
+	import { t } from '../../i18n';
 	import { onMount } from 'svelte';
 	import { getLocationCity } from '$lib/utils/GeoLocationUtils';
 	import { fetchComments, sendComment } from '$lib/utils/Comments';
 	import Commentsection from './Commentsection.svelte';
 	import { deletePost, checkForHashtags, likeCounter } from '$lib/utils/Posts';
-	import ProfilePicture from './ProfilePicture.svelte';
+	import ProfilePicture from '../ProfilePicture.svelte';
 	import type { Comments } from '$lib/types/Comment';
 
 	export let postData: PostStructure;
@@ -156,6 +156,7 @@
 		commentText = '';
 		click++;
 		commentData = (await fetchComments(limit, postData.postId, offset)) as Comments;
+		post.comments = commentData.records.length;
 	}
 </script>
 
@@ -294,12 +295,16 @@
 						on:click={setShowButton}
 						>{showNoComments
 							? $t('post.comments.buttonHideComments')
-							: $t('post.comments.buttonShowComments')}</button
+							: post.comments + ' ' + $t('post.comments.buttonShowComments')}</button
 					>
 				{/if}
 			</div>
 			{#if loginToken != ''}
-				<form class="flex float-right w-[65%]" on:submit={commentSendButton}>
+				<form
+					class="flex float-right w-[65%]"
+					on:submit|preventDefault={commentSendButton}
+					id="formComment"
+				>
 					<label class="label p-2 w-full">
 						<input
 							class="textarea resize-none"

src/components/userLists/UserSearchList.svelte

@@ -7,10 +7,10 @@
 <nav class="list-nav w-full">
 	<ul class="w-full">
 		{#each searchData as searchedUser}
-			<li class="flex flex-row w-full justify-between">
-				<a href="/profile?username={searchedUser.username}" title="userResult" class="w-full">
+			<li class="flex flex-row w-full justify-between h-20">
+				<a href="/profile?username={searchedUser.username}" title="userResult" class="w-full h-20">
 					<ProfilePicture
-						cssClass="w-10 h-10 rounded-full isolation-auto"
+						cssClass="w-10 h-full rounded-full isolation-auto"
 						src={searchedUser.picture?.url ?? ''}
 						username={searchedUser.username}
 					/>

src/lib/Store.ts

@@ -2,6 +2,7 @@ import { persisted } from 'svelte-local-storage-store';
 import { writable } from 'svelte/store';
 import type { Notifications } from './types/Notifications';
 import type { UUID } from 'crypto';
+import type { ChatStructure } from './types/Chat';
 
 //https://server-beta.de/api
 //https://alpha.c930.net/api
@@ -32,3 +33,5 @@ export const newProfilePicture = writable<string | undefined>(undefined);
 //helper
 
 export const modalHiddenCss = writable('');
+
+export const chats = writable({ records: [] } as ChatStructure);

src/lib/types/Post.ts

@@ -14,6 +14,7 @@ export type PostStructure = {
 	liked: boolean;
 	repost: PostStructure | null;
 	location: GeoLocationCoords | undefined;
+	comments: number | undefined;
 };
 
 export type TextColorPost = {

src/lib/utils/Notifications.ts

@@ -24,7 +24,7 @@ export async function getNotificationsRequest(): Promise<Notifications | null> {
 		}
 	});
 	if (response.status === 200) {
-		return await response.json();
+		return (await response.json()) as Notifications;
 	} else {
 		return null;
 	}

src/lib/utils/Posts.ts

@@ -1,9 +1,4 @@
-import type {
-	PostUserProfilStructure,
-	TextColorPost,
-	PostStructure,
-	RequestBodyData
-} from '../types/Post';
+import type { TextColorPost, PostStructure, RequestBodyData } from '../types/Post';
 import { serverURL, token } from '$lib/Store';
 import type { CustomError } from '../types/CustomError';
 import { createToast } from '$lib/utils/Toasts';
@@ -120,7 +115,7 @@ export async function deleteLike(postId: UUID, toastStore: ToastStore) {
 	}
 }
 
-export function likeCounter(post: PostStructure | PostUserProfilStructure, toastStore: ToastStore) {
+export function likeCounter(post: PostStructure, toastStore: ToastStore) {
 	post.likes += post.liked ? -1 : 1;
 	if (post.liked) {
 		deleteLike(post.postId, toastStore);
@@ -131,7 +126,7 @@ export function likeCounter(post: PostStructure | PostUserProfilStructure, toast
 	return post;
 }
 
-export function checkForHashtags(post: PostUserProfilStructure | PostStructure) {
+export function checkForHashtags(post: PostStructure) {
 	const text = post.content;
 	const words = text.split(' ');
 	let wordId: number = 0;
@@ -144,7 +139,7 @@ export function checkForHashtags(post: PostUserProfilStructure | PostStructure)
 	];
 
 	if (words !== null) {
-		newPost = words.map((word) => {
+		newPost = words.map((word: string) => {
 			let hashtagClass: string = '';
 			if (word.startsWith('#')) {
 				hashtagClass = 'text-blue-600';

src/lib/utils/Toasts.ts

@@ -1,4 +1,7 @@
+import type { NotificationEntity } from '$lib/types/Notifications';
 import type { ToastSettings } from '@skeletonlabs/skeleton';
+import { t } from '../../i18n';
+import { get } from 'svelte/store';
 
 export function createToast(message: string, background: string) {
 	const toast: ToastSettings = {
@@ -8,3 +11,32 @@ export function createToast(message: string, background: string) {
 	};
 	return toast;
 }
+
+export function createNotificationToast(payload: unknown) {
+	const notifications = payload as NotificationEntity;
+	let message = '';
+	switch (notifications.notificationType) {
+		case 'message': {
+			message = get(t)('toast.notifications.message') + ' ' + notifications.user.username;
+			break;
+		}
+		case 'repost': {
+			message = notifications.user.username + ' ' + get(t)('toast.notifications.repost');
+			break;
+		}
+		case 'follow': {
+			message = notifications.user.username + ' ' + get(t)('toast.notifications.follow');
+			break;
+		}
+		default: {
+			message = get(t)('');
+			break;
+		}
+	}
+	const toast: ToastSettings = {
+		message: message,
+		timeout: 20000,
+		background: 'bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 text-white'
+	};
+	return toast;
+}

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { get } from 'svelte/store';
-	import Login from '../components/Login.svelte';
-	import Feed from '../components/Feed.svelte';
+	import Login from '../components/login/Login.svelte';
+	import Feed from '../components/posts/Feed.svelte';
 	import { serverURL, token } from '$lib/Store';
 	import { onMount } from 'svelte';
 	import { RadioGroup, RadioItem, getToastStore } from '@skeletonlabs/skeleton';