svrjs-nextjs-website/app/(auth)/admin/mods/page.tsx

400 lines
13 KiB
TypeScript

"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<ModEntry[]>([]);
const [editMod, setEditMod] = useState<ModEntry | null>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const mainForm = useForm<z.infer<typeof modsSchema>>({
resolver: zodResolver(modsSchema),
defaultValues: {
fileName: "",
version: "",
downloadLink: "",
fileSize: ""
}
});
const dialogForm = useForm<z.infer<typeof modsSchema>>({
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<z.infer<typeof modsSchema>> = 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 (
<section id="mods-page" className="wrapper container">
<h1 className="text-3xl font-bold py-6">Mods Form</h1>
<Form {...mainForm}>
<form onSubmit={mainForm.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={mainForm.control}
name="fileName"
render={({ field }) => (
<FormItem>
<FormLabel>File Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={mainForm.control}
name="version"
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={mainForm.control}
name="downloadLink"
render={({ field }) => (
<FormItem>
<FormLabel>Download Link</FormLabel>
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
field.onChange(res[0].url);
}}
onUploadError={(error: Error) => {
alert(`ERROR! ${error.message}`);
}}
/>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={mainForm.control}
name="fileSize"
render={({ field }) => (
<FormItem>
<FormLabel>File Size</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full text-lg rounded-full"
size={"lg"}
disabled={loading}
>
{editMod ? "Save Changes" : "Submit"}
</Button>
</form>
</Form>
{/* Section to list and delete mods */}
<section id="mods-list" className="py-16 md:py-24">
<h2 className="text-3xl md:text-4xl font-bold">Existing Mods</h2>
{error && <p className="text-red-500">{error}</p>}
<Table className="w-full mt-4 border-muted">
<TableHeader>
<TableRow>
<TableHead className="border-b px-4 py-2">File Name</TableHead>
<TableHead className="border-b px-4 py-2">Version</TableHead>
<TableHead className="border-b px-4 py-2">
Download Link
</TableHead>
<TableHead className="border-b px-4 py-2">File Size</TableHead>
<TableHead className="border-b px-4 py-2">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mods.map((mod) => (
<TableRow key={mod._id}>
<TableCell className="border-b px-4 py-2">
{mod.fileName}
</TableCell>
<TableCell className="border-b px-4 py-2">
{mod.version}
</TableCell>
<TableCell className="border-b px-4 py-2">
<a
href={mod.downloadLink}
target="_blank"
rel="noopener noreferrer"
>
{mod.downloadLink}
</a>
</TableCell>
<TableCell className="border-b px-4 py-2">
{mod.fileSize}
</TableCell>
<TableCell className="border-b px-4 py-2 gap-2 flex-center">
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogTrigger>
<Button variant="outline" onClick={() => setEditMod(mod)}>
Edit
</Button>
</DialogTrigger>
<DialogContent>
<DialogTitle>Edit Content</DialogTitle>
<Form {...dialogForm}>
<form
onSubmit={dialogForm.handleSubmit(onSubmit)}
className="space-y-4"
>
<FormField
control={dialogForm.control}
name="fileName"
render={({ field }) => (
<FormItem>
<FormLabel>File Name</FormLabel>
<FormControl>
<Input
{...field}
defaultValue={editMod?.fileName}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={dialogForm.control}
name="version"
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<FormControl>
<Input
{...field}
defaultValue={editMod?.version}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={dialogForm.control}
name="downloadLink"
render={({ field }) => (
<FormItem>
<FormLabel>Download Link</FormLabel>
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
field.onChange(res[0].url);
}}
onUploadError={(error: Error) => {
alert(`ERROR! ${error.message}`);
}}
/>
<FormControl>
<Input
{...field}
defaultValue={editMod?.downloadLink}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={dialogForm.control}
name="fileSize"
render={({ field }) => (
<FormItem>
<FormLabel>File Size</FormLabel>
<FormControl>
<Input
{...field}
defaultValue={editMod?.fileSize}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full text-lg rounded-full"
size={"lg"}
disabled={loading}
>
Save Changes
</Button>
</form>
</Form>
</DialogContent>
</Dialog>
<Button
variant={"destructive"}
onClick={() => deleteMod(mod._id)}
>
Delete
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</section>
</section>
);
};
export default SvrjsModsAdminPage;