AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfixing notification

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-05 18:30:35 +01:00
parent bd92a82458
commit 71eaa7b02e
5 changed files with 63 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/lib/components/NotificationBell.svelte
View File

@ -1,36 +1,36 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { numberOfUnreadNotification } from '$lib/store';
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import Bell from "lucide-svelte/icons/bell";
export let data;
export let hasUnreadElement;
async function toggle() {
hasUnreadElement = false;
}
async function toggle() {
hasUnreadElement = false;
}
</script>
<!--Start Notification Bell-->
{#if data?.user}
<a href="/notifications" on:click={toggle} class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1">
<Bell class="h-[20px] w-[20px]" />
<!--Start Notification Bell-->
{#if data?.user}
<a
href="/notifications"
on:click={toggle}
class="text-gray-300 sm:hover:text-white cursor-pointer sm:hover:bg-[#27272A] relative border p-2 rounded-lg border-gray-800 ml-3 -mr-1"
>
<Bell class="h-[20px] w-[20px]" />
{#if hasUnreadElement}
<div class="absolute top-2 -right-2 flex">
<div class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2">
<span class="m-auto">{$numberOfUnreadNotification <= 9 ? $numberOfUnreadNotification : '9+' }</span>
<div class="absolute top-2 -right-2 flex">
<div
class="relative inline-flex text-xs text-black font-bold w-[18px] h-[18px] bg-white border-[1px] border-gray-800 rounded-full -top-2 right-2"
>
<span class="m-auto"
>{$numberOfUnreadNotification <= 9
? $numberOfUnreadNotification
: "9+"}</span
>
</div>
</div>
</div>
{/if}
</a>
{/if}

21
src/lib/workers/notificationWorker.ts
View File

@ -1,28 +1,27 @@
// lib/workers/test.ts
async function loadNotifications(userId: string) {
const postData = { userId: userId };
async function loadNotifications() {
const response = await fetch("/api/get-notifications", {
method: "POST",
method: "GET",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(postData),
});
const output = (await response.json())?.items;
const output = await response.json();
return output;
}
onmessage = async (event: MessageEvent) => {
const data = event.data?.message;
const userId = data?.userId;
try {
const [notificationList] = await Promise.all([loadNotifications(userId)]);
const numberOfUnreadNotification = notificationList?.length;
const hasUnreadElement = notificationList?.length !== 0 ? true : false;
const [notificationList] = await Promise.all([loadNotifications()]);
const numberOfUnreadNotification = notificationList.filter(
(item?) => !item?.readed,
);
const hasUnreadElement =
numberOfUnreadNotification?.length !== 0 ? true : false;
const output = {
notificationList,
hasUnreadElement,

15
src/routes/+layout.svelte
View File

@ -136,7 +136,7 @@
notificationList = output?.notificationList;
hasUnreadElement = output?.hasUnreadElement;
//const unreadNotificationList = output?.unreadNotificationList;
$numberOfUnreadNotification = output?.numberOfUnreadNotification;
$numberOfUnreadNotification = output?.numberOfUnreadNotification?.length;
//pushNotification()
};
@ -163,18 +163,19 @@ const handleTwitchMessage = (event) => {
// Implement fallback logic here, e.g., using timers or other techniques
console.log("Fallback worker activated");
const postData = { userId: data?.user?.id };
const response = await fetch("/api/get-notifications", {
method: "POST",
method: "GET",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(postData),
});
notificationList = (await response.json())?.items;
hasUnreadElement = notificationList?.length !== 0 ? true : false;
$numberOfUnreadNotification = notificationList?.length;
notificationList = await response.json();
const numberOfUnreadNotification = notificationList.filter(
(item?) => !item?.readed,
);
hasUnreadElement = numberOfUnreadNotification?.length !== 0 ? true : false;
$numberOfUnreadNotification = numberOfUnreadNotification?.length;
}
let Cookie;

24
src/routes/api/get-notifications/+server.ts
View File

@ -1,18 +1,20 @@
import type { RequestHandler } from "./$types";
export const POST: RequestHandler = async ({ request, locals }) => {
const data = await request.json();
const { fastifyURL } = locals;
export const GET: RequestHandler = async ({ locals }) => {
const { pb, user } = locals;
const response = await fetch(fastifyURL + "/get-notifications", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
let output;
const output = await response.json();
try {
output = await pb.collection("notifications")?.getFullList({
filter: `opUser="${user?.id}" `,
expand: "user,post,comment",
sort: "-created",
});
} catch (e) {
console.log(e);
output = [];
}
return new Response(JSON.stringify(output));
};

22
src/routes/notifications/+page.server.ts
View File

@ -1,25 +1,21 @@
import { redirect, error } from "@sveltejs/kit";
export const load = async ({ locals }) => {
const { pb, user } = locals;
export const load = async ({ locals, fetch }) => {
const { pb } = locals;
if (!pb.authStore.isValid) {
redirect(303, "/login");
}
async function getNotifications() {
let output;
const response = await fetch("/api/get-notifications", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
try {
output = await pb.collection("notifications")?.getFullList({
filter: `opUser="${user?.id}" `,
expand: "user,post,comment",
sort: "-created",
});
} catch (e) {
console.log(e);
output = [];
}
const output = await response.json();
return output;
}