107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
import { useSuspenseQuery } from "@tanstack/react-query";
|
|
import axios from "axios";
|
|
import { toast } from "sonner";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../../components/ui/card";
|
|
import { useAppForm } from "../../../lib/formSutff";
|
|
import { notificationSubs } from "../../../lib/queries/notificationSubs";
|
|
import { notifications } from "../../../lib/queries/notifications";
|
|
|
|
export default function NotificationsSubCard({ user }: any) {
|
|
const { data } = useSuspenseQuery(notifications());
|
|
const { 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 };
|
|
|
|
try {
|
|
const res = await axios.post("/lst/api/notification/sub", postD, {
|
|
withCredentials: true,
|
|
});
|
|
|
|
if (res.status === 200) {
|
|
toast.success("Notification Subbed");
|
|
refetch();
|
|
form.reset();
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
});
|
|
|
|
let n: any = [];
|
|
if (data) {
|
|
n = data
|
|
.filter((n: any) => n.active)
|
|
.map((i: any) => ({
|
|
label: i.name,
|
|
value: i.id,
|
|
}));
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Card className="p-3 w-lg">
|
|
<CardHeader>
|
|
<CardTitle>Notifications</CardTitle>
|
|
<CardDescription>
|
|
All currently active notifications you can subscribe to. selecting a
|
|
notification will give you a brief description on how it works
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
form.handleSubmit();
|
|
}}
|
|
>
|
|
<div>
|
|
<form.AppField name="notificationId">
|
|
{(field) => (
|
|
<field.SelectField
|
|
label="Notifications"
|
|
placeholder="Select Notification"
|
|
options={n}
|
|
/>
|
|
)}
|
|
</form.AppField>
|
|
</div>
|
|
|
|
<form.AppField name="emails" mode="array">
|
|
{(field) => (
|
|
<field.DynamicInputField
|
|
label="Notification Emails"
|
|
description="Add more email addresses for notification delivery."
|
|
inputType="email"
|
|
addLabel="Add Email"
|
|
//initialValue={session?.user.email}
|
|
/>
|
|
)}
|
|
</form.AppField>
|
|
<div className="flex justify-end mt-6">
|
|
<form.AppForm>
|
|
<form.SubmitButton>Subscribe</form.SubmitButton>
|
|
</form.AppForm>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|