"use client"; import React, { useEffect, useState } from "react"; import { useForm, SubmitHandler } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { UploadButton } from "@/lib/uploadthing"; import { modsSchema } from "@/lib/validations/validation"; import { useToast } from "@/components/ui/use-toast"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; interface ModEntry { _id: string; fileName: string; version: string; downloadLink: string; fileSize: string; } const SvrjsModsAdminPage = () => { const { toast } = useToast(); const [mods, setMods] = useState([]); const [editMod, setEditMod] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [dialogOpen, setDialogOpen] = useState(false); const mainForm = useForm>({ resolver: zodResolver(modsSchema), defaultValues: { fileName: "", version: "", downloadLink: "", fileSize: "" } }); const dialogForm = useForm>({ resolver: zodResolver(modsSchema), defaultValues: { fileName: "", version: "", downloadLink: "", fileSize: "" } }); useEffect(() => { fetchMods(); const interval = setInterval(() => { fetchMods(); }, 10000); return () => clearInterval(interval); }, []); useEffect(() => { if (editMod) { dialogForm.reset({ fileName: editMod.fileName, version: editMod.version, downloadLink: editMod.downloadLink, fileSize: editMod.fileSize }); setDialogOpen(true); // Open dialog when a mod is being edited } }, [editMod, dialogForm]); const fetchMods = async () => { try { const response = await fetch("/api/mods", { method: "GET" }); if (response.ok) { const data: ModEntry[] = await response.json(); setMods(data); } else { throw new Error(`HTTP error! status: ${response.status}`); } } catch (error: any) { setError(error.message || "Failed to fetch mods"); } }; const onSubmit: SubmitHandler> = async (data) => { setLoading(true); try { const response = editMod ? await fetch(`/api/update/mods/${editMod._id}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) : await fetch("/api/uploadmods", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }); if (response.ok) { mainForm.reset(); dialogForm.reset(); fetchMods(); setLoading(false); setEditMod(null); setDialogOpen(false); // Close dialog on successful submission toast({ description: "Successfully Saved Changes" }); } else { console.error("Save failed"); setLoading(false); toast({ description: "Save failed", variant: "destructive" }); } } catch (error) { console.error("Save failed", error); setLoading(false); toast({ description: "Save failed", variant: "destructive" }); } }; const deleteMod = async (id: string) => { try { const response = await fetch(`/api/delete/mods/${id}`, { method: "DELETE" }); if (response.ok) { fetchMods(); } else { throw new Error(`HTTP error! status: ${response.status}`); } } catch (error: any) { setError(error.message || "Failed to delete mod"); } }; return (

Mods Form

( File Name )} /> ( Version )} /> ( Download Link { field.onChange(res[0].url); }} onUploadError={(error: Error) => { alert(`ERROR! ${error.message}`); }} /> )} /> ( File Size )} /> {/* Section to list and delete mods */}

Existing Mods

{error &&

{error}

} File Name Version Download Link File Size Actions {mods.map((mod) => ( {mod.fileName} {mod.version} {mod.downloadLink} {mod.fileSize} Edit Content
( File Name )} /> ( Version )} /> ( Download Link { field.onChange(res[0].url); }} onUploadError={(error: Error) => { alert(`ERROR! ${error.message}`); }} /> )} /> ( File Size )} />
))}
); }; export default SvrjsModsAdminPage;