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

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

@@ -42,9 +42,7 @@ export const SelectField = ({
 					>
 						<SelectValue placeholder={placeholder} />
 					</SelectTrigger>
-					<SelectContent
-					 position={"popper"}
-					 >
+					<SelectContent 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>
-					<CardHeader className="text-center">
-						You are not subscribed to any notifications.
-					</CardHeader>
-				</Card>
+				<Suspense
+					fallback={
+						<Card className="p-3">
+							<CardHeader>
+								<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>
 	);