Blake Matthes
5865ac3b99
All checks were successful
Build and Push LST Docker Image / docker (push) Successful in 1m59s
can now sub to a notification and user can remove them selfs plus an admin can remove,updates to add new emails are good as well
115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
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 type { Notifications } from "../../../../types/notifications";
|
|
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";
|
|
|
|
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"
|
|
variant={"destructive"}
|
|
onClick={() => removeNotification(i.row.original)}
|
|
>
|
|
<Trash />
|
|
</Button>
|
|
);
|
|
},
|
|
}),
|
|
];
|
|
return (
|
|
<Card>
|
|
<CardHeader className="text-center">Subscriptions</CardHeader>
|
|
<CardContent>
|
|
<LstTable data={data} columns={column} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|