"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"; interface ModEntry { _id: string; fileName: string; version: string; downloadLink: string; fileSize: string; } const SvrjsModsAdminPage = () => { const { toast } = useToast(); const [mods, setMods] = useState([]); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const form = useForm>({ resolver: zodResolver(modsSchema), defaultValues: { fileName: "", version: "", downloadLink: "", fileSize: "", }, }); 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"); } }; useEffect(() => { fetchMods(); const interval = setInterval(() => { fetchMods(); }, 10000); return () => clearInterval(interval); }, []); const onSubmit: SubmitHandler> = async (data) => { setLoading(true); const response = await fetch("/api/uploadmods", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(data), }); if (response.ok) { form.reset(); fetchMods(); setLoading(false); toast({ description: "Successfully Uploaded Mods", }); } else { console.error("Upload failed"); setLoading(false); toast({ description: "Upload 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 .slice() .reverse() .map((mod) => ( {mod.fileName} {mod.version} {mod.downloadLink} {mod.fileSize} ))}
); }; export default SvrjsModsAdminPage;