feat(user notifications): added the ability for users to sub to notifications and add multi email

backend/notification/notificationSub.delete.route.ts

@@ -3,12 +3,12 @@ import { type Response, Router } from "express";
 import z from "zod";
 import { db } from "../db/db.controller.js";
 import { notificationSub } from "../db/schema/notifications.sub.schema.js";
+import { auth } from "../utils/auth.utils.js";
 import { apiReturn } from "../utils/returnHelper.utils.js";
 import { tryCatch } from "../utils/trycatch.utils.js";
 import { modifiedNotification } from "./notification.controller.js";
 
 const newSubscribe = z.object({
-	emails: z.email().array().describe("An array of emails"),
 	userId: z.string().describe("User id."),
 	notificationId: z.string().describe("Notification id"),
 });
@@ -16,14 +16,26 @@ const newSubscribe = z.object({
 const r = Router();
 
 r.delete("/", async (req, res: Response) => {
+	const hasPermissions = await auth.api.userHasPermission({
+		body: {
+			//userId: req?.user?.id,
+			role: req.user?.roles as any,
+			permissions: {
+				notifications: ["readAll"], // This must match the structure in your access control
+			},
+		},
+	});
+
 	try {
 		const validated = newSubscribe.parse(req.body);
+
 		const { data, error } = await tryCatch(
 			db
 				.delete(notificationSub)
 				.where(
 					and(
-						eq(notificationSub.userId, validated.userId),
+						//eq(notificationSub.userId, hasPermissions ? validated.userId : req?.user?.id ?? ""), // allows the admin to delete this
+						eq(notificationSub.userId, req?.user?.id ?? ""),
 						eq(notificationSub.notificationId, validated.notificationId),
 					),
 				)
@@ -44,6 +56,18 @@ r.delete("/", async (req, res: Response) => {
 			});
 		}
 
+		if (data.length <= 0) {
+			return apiReturn(res, {
+				success: false,
+				level: "info",
+				module: "notification",
+				subModule: "post",
+				message: `Subscription was not deleted invalid data sent over`,
+				data: data ?? [],
+				status: 200,
+			});
+		}
+
 		return apiReturn(res, {
 			success: true,
 			level: "info",

backend/notification/notificationSub.get.route.ts

@@ -21,12 +21,16 @@ r.get("/", async (req, res: Response) => {
 		},
 	});
 
+	if (userId !== "") {
+		hasPermissions.success = false;
+	}
+
 	const { data, error } = await tryCatch(
 		db
 			.select()
 			.from(notificationSub)
 			.where(
-				userId || !hasPermissions.success
+				!hasPermissions.success
 					? eq(notificationSub.userId, `${req?.user?.id ?? ""}`)
 					: undefined,
 			),

backend/notification/notificationSub.post.route.ts

@@ -25,8 +25,25 @@ r.post("/", async (req, res: Response) => {
 	try {
 		const validated = newSubscribe.parse(req.body);
 
+		const emails = validated.emails
+			.map((e) => e.trim().toLowerCase())
+			.filter(Boolean);
+
+		const uniqueEmails = [...new Set(emails)];
+
 		const { data, error } = await tryCatch(
-			db.insert(notificationSub).values(validated).returning(),
+			db
+				.insert(notificationSub)
+				.values({
+					userId: req?.user?.id ?? "",
+					notificationId: validated.notificationId,
+					emails: uniqueEmails,
+				})
+				.onConflictDoUpdate({
+					target: [notificationSub.userId, notificationSub.notificationId],
+					set: { emails: uniqueEmails },
+				})
+				.returning(),
 		);
 
 		await modifiedNotification(validated.notificationId);

frontend/src/lib/formSutff/Select.Field.tsx

@@ -42,9 +42,7 @@ export const SelectField = ({
 					>
 						<SelectValue placeholder={placeholder} />
 					</SelectTrigger>
-					<SelectContent
+					<SelectContent position={"popper"}>
-					 position={"popper"}
-					 >
 						{options.map((option) => (
 							<SelectItem key={option.value} value={option.value}>
 								{option.label}

frontend/src/routes/(auth)/-components/NotificationsSubCard.tsx

@@ -1,4 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { toast } from "sonner";
 import {
 	Card,
 	CardContent,
@@ -12,15 +14,29 @@ import { notifications } from "../../../lib/queries/notifications";
 
 export default function NotificationsSubCard({ user }: any) {
 	const { data } = useSuspenseQuery(notifications());
-	const { data: ns } = useSuspenseQuery(notificationSubs(user.id));
+	const { data: ns, refetch } = useSuspenseQuery(notificationSubs(user.id));
 	const form = useAppForm({
 		defaultValues: {
 			notificationId: "",
 			emails: [user.email],
 		},
 		onSubmit: async ({ value }) => {
+			if (value.notificationId === "") {
+				toast.error("Please select a notification before trying to subscribe.");
+				return;
+			}
 			const postD = { ...value, userId: user.id };
-			console.log(postD);
+
+			try {
+				const res = await axios.post("/lst/api/notification/sub", postD, {
+					withCredentials: true,
+				});
+
+				refetch();
+				form.reset();
+			} catch (error) {
+				console.error(error);
+			}
 		},
 	});
 
@@ -32,8 +48,6 @@ export default function NotificationsSubCard({ user }: any) {
 		}));
 	}
 
-	console.log(ns);
-
 	return (
 		<div>
 			<Card className="p-3 w-lg">

frontend/src/routes/(auth)/-components/NotificationsTable.tsx

@@ -0,0 +1,120 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
+import axios from "axios";
+import { Trash } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button";
+import { Card, CardContent, CardHeader } from "../../../components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "../../../components/ui/tooltip";
+import { notificationSubs } from "../../../lib/queries/notificationSubs";
+import { notifications } from "../../../lib/queries/notifications";
+import LstTable from "../../../lib/tableStuff/LstTable";
+import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
+
+type Notifications = {
+	id: string;
+	name: string;
+	emails: string;
+	description: string;
+	remove: unknown;
+};
+
+export default function NotificationsTable({ userId }: any) {
+	const { data: subs, refetch } = useSuspenseQuery(notificationSubs(userId));
+	const { data: note } = useSuspenseQuery(notifications());
+	const columnHelper = createColumnHelper<Notifications>();
+
+	// filter out the current
+	const notificationMap = Object.fromEntries(note.map((n: any) => [n.id, n]));
+
+	const data = subs.map((sub: any) => ({
+		...sub,
+		name: notificationMap[sub.notificationId].name || null,
+		description: notificationMap[sub.notificationId].description || null,
+		emails: sub.emails ? sub.emails.join(",") : null,
+	}));
+
+	const removeNotification = async (ns: any) => {
+		try {
+			const res = await axios.delete(`/lst/api/notification/sub`, {
+				withCredentials: true,
+				data: {
+					userId: ns.userId,
+					notificationId: ns.notificationId,
+				},
+			});
+
+			if (res.data.success) {
+				toast.success(`Subscription removed`);
+				refetch();
+			} else {
+				console.info(res);
+				toast.error(res.data.message);
+			}
+		} catch {
+			toast.error(`There was an error removing subscription.`);
+		}
+	};
+
+	const column = [
+		columnHelper.accessor("name", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Name" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("description", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Description" />
+			),
+			cell: (i) => (
+				<Tooltip>
+					<TooltipTrigger>
+						{i.getValue()?.length > 25 ? (
+							<span>{i.getValue().slice(0, 25)}...</span>
+						) : (
+							<span>{i.getValue()}</span>
+						)}
+					</TooltipTrigger>
+					<TooltipContent>{i.getValue()}</TooltipContent>
+				</Tooltip>
+			),
+		}),
+		columnHelper.accessor("emails", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Emails" searchable={true} />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("remove", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Remove" searchable={false} />
+			),
+			filterFn: "includesString",
+			cell: (i) => {
+				return (
+					<Button
+						size="icon"
+						onClick={() => removeNotification(i.row.original)}
+					>
+						<Trash />
+					</Button>
+				);
+			},
+		}),
+	];
+	return (
+		<Card>
+			<CardHeader className="text-center">Subscriptions</CardHeader>
+			<CardContent>
+				<LstTable data={data} columns={column} />
+			</CardContent>
+		</Card>
+	);
+}

frontend/src/routes/(auth)/user.profile.tsx

@@ -13,6 +13,7 @@ import { useAppForm } from "@/lib/formSutff";
 import { Spinner } from "../../components/ui/spinner";
 import ChangePassword from "./-components/ChangePassword";
 import NotificationsSubCard from "./-components/NotificationsSubCard";
+import NotificationsTable from "./-components/NotificationsTable";
 
 export const Route = createFileRoute("/(auth)/user/profile")({
 	beforeLoad: async () => {
@@ -119,11 +120,24 @@ function RouteComponent() {
 				</div>
 			</div>
 			<div className="w-fill">
-				<Card>
+				<Suspense
-					<CardHeader className="text-center">
+					fallback={
-						You are not subscribed to any notifications.
+						<Card className="p-3">
-					</CardHeader>
+							<CardHeader>
-				</Card>
+								<CardTitle className="text-center">Subscriptions</CardTitle>
+							</CardHeader>
+							<CardContent>
+								<div className="flex justify-center m-auto">
+									<div>
+										<Spinner className="size-32" />
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					}
+				>
+					{session && <NotificationsTable userId={`${session.user.id}`} />}
+				</Suspense>
 			</div>
 		</div>
 	);