109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import axios from "axios"
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
|
||
|
|
import * as z from "zod";
|
||
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||
|
|
import { useForm } from "react-hook-form";
|
||
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { Info } from "lucide-react";
|
||
|
|
import { Toggle } from "../ui/toggle";
|
||
|
|
import { TtsBadgeFilter, TwitchConnection } from "@prisma/client";
|
||
|
|
|
||
|
|
const formSchema = z.object({
|
||
|
|
whitelist: z.string().trim().array(),
|
||
|
|
blacklist: z.string().trim().array()
|
||
|
|
});
|
||
|
|
|
||
|
|
export const TTSBadgeFilterModal = () => {
|
||
|
|
const [isMounted, setIsMounted] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setIsMounted(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
const form = useForm({
|
||
|
|
resolver: zodResolver(formSchema),
|
||
|
|
defaultValues: {
|
||
|
|
whitelist: z.string().trim().array(),
|
||
|
|
blacklist: z.string().trim().array()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const isLoading = form.formState.isSubmitting;
|
||
|
|
|
||
|
|
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||
|
|
let response = null;
|
||
|
|
|
||
|
|
// try {
|
||
|
|
// response = await axios.post("/api/settings/tts/filter/badges", values);
|
||
|
|
// } catch (error) {
|
||
|
|
// console.log("[CONNECTIONS/TWITCH/POST]", error);
|
||
|
|
// return;
|
||
|
|
// }
|
||
|
|
|
||
|
|
form.reset();
|
||
|
|
router.refresh();
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isMounted) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const badges: TtsBadgeFilter[] = [] //(await axios.get("/api/settings/tts/filter/badges")).data
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog>
|
||
|
|
<DialogTrigger>
|
||
|
|
<Button aria-label="Badge" variant="ttsmessagefilter" className="my-2">
|
||
|
|
<Info className="h-4 w-4 mx-1" />
|
||
|
|
Badge
|
||
|
|
</Button>
|
||
|
|
</DialogTrigger>
|
||
|
|
<DialogContent className="bg-white text-black p-0 overflow-hidden">
|
||
|
|
<DialogHeader className="pt-8 px-6">
|
||
|
|
<DialogTitle className="text-2xl text-center">TTS Badge Filter</DialogTitle>
|
||
|
|
<DialogDescription className="text-center">Limit messages spoken by TTS by badges.</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<Form {...form}>
|
||
|
|
<form onSubmit={form.handleSubmit(onSubmit)}
|
||
|
|
className="space-y-10">
|
||
|
|
{badges.map((badge) => (
|
||
|
|
<div className="space-y-8 px-6">
|
||
|
|
<FormField
|
||
|
|
key={badge.badgeId}
|
||
|
|
control={form.control}
|
||
|
|
name={badge.badgeId}
|
||
|
|
render={({ field }) => {
|
||
|
|
return (
|
||
|
|
<FormItem>
|
||
|
|
<Toggle
|
||
|
|
aria-label="Badge"
|
||
|
|
variant="simple"
|
||
|
|
disabled={isLoading}
|
||
|
|
className="my-2"
|
||
|
|
{...field}>
|
||
|
|
{badge.badgeId}
|
||
|
|
</Toggle>
|
||
|
|
</FormItem>
|
||
|
|
)
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<DialogFooter className="bg-gray-100 px-6 py-4">
|
||
|
|
<Button disabled={isLoading}>Save</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|