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

422 lines
10 KiB
TypeScript
Raw Normal View History

2024-06-22 10:30:51 +02:00
"use client";
import React, { useEffect, useState } from "react";
2024-07-10 08:10:55 +02:00
import { useForm, SubmitHandler, useFieldArray } from "react-hook-form";
2024-06-22 10:30:51 +02:00
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import {
2024-07-10 08:10:55 +02:00
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
2024-06-22 10:30:51 +02:00
} from "@/components/ui/form";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
2024-06-22 10:30:51 +02:00
import { Input } from "@/components/ui/input";
import { logsSchema } from "@/lib/validations/validation";
2024-07-10 08:10:55 +02:00
import { z } from "zod";
import { useRouter } from "next/navigation";
import { useToast } from "@/components/ui/use-toast";
import dynamic from "next/dynamic";
import {
Dialog,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
} from "@/components/ui/dialog";
const MarkdownEditor = dynamic(() => import("@uiw/react-md-editor"), {
ssr: false,
});
interface LogEntry {
_id: string;
version: string;
date: string;
bullets: { point: string }[];
}
2024-07-10 08:10:55 +02:00
interface PageEntry {
title: string;
slug: string;
content: string; // Add content to the PageEntry interface
}
2024-07-10 08:10:55 +02:00
type LogsFormValues = z.infer<typeof logsSchema>;
const AdminLogPage = () => {
const [logs, setLogs] = useState<LogEntry[]>([]);
const [pages, setPages] = useState<PageEntry[]>([]);
const [error, setError] = useState("");
const { toast } = useToast();
const router = useRouter();
const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);
const [pageTitle, setPageTitle] = useState("");
const [selectedPage, setSelectedPage] = useState<PageEntry | null>(null);
2024-07-10 08:10:55 +02:00
const form = useForm<LogsFormValues>({
resolver: zodResolver(logsSchema),
defaultValues: {
version: "",
date: "",
2024-07-17 17:45:28 +02:00
bullets: [{ point: "" }],
2024-07-10 08:10:55 +02:00
},
});
2024-06-22 10:30:51 +02:00
2024-07-10 08:10:55 +02:00
const { fields, append, remove } = useFieldArray({
control: form.control,
2024-07-17 17:45:28 +02:00
name: "bullets",
2024-07-10 08:10:55 +02:00
});
2024-06-22 10:30:51 +02:00
const fetchLogs = async () => {
try {
const response = await fetch("/api/logs", { method: "GET" });
if (response.ok) {
const data: LogEntry[] = await response.json();
setLogs(data);
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error: any) {
setError(error.message || "Failed to fetch logs");
}
};
const fetchPages = async () => {
try {
const response = await fetch("/api/mdx/pages", { method: "GET" });
if (response.ok) {
const data: PageEntry[] = await response.json();
setPages(data);
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error: any) {
setError(error.message || "Failed to fetch pages");
}
};
useEffect(() => {
fetchLogs();
fetchPages();
const interval = setInterval(() => {
fetchLogs();
fetchPages();
}, 10000);
return () => clearInterval(interval);
}, []);
2024-07-10 08:10:55 +02:00
const onSubmit: SubmitHandler<LogsFormValues> = async (data) => {
setLoading(true);
2024-07-10 08:10:55 +02:00
const response = await fetch("/api/uploadlogs", {
method: "POST",
headers: { "Content-Type": "application/json" },
2024-07-10 08:10:55 +02:00
body: JSON.stringify(data),
});
2024-06-22 10:30:51 +02:00
2024-07-10 08:10:55 +02:00
if (response.ok) {
form.reset();
fetchLogs();
setLoading(false);
toast({ description: "Logs successfully added" });
2024-07-10 08:10:55 +02:00
} else {
setLoading(false);
toast({ description: "Upload Failed", variant: "destructive" });
}
};
const deleteLog = async (id: string) => {
try {
2024-07-17 20:33:43 +02:00
const response = await fetch(`/api/delete/logs/${id}`, {
method: "DELETE",
});
if (response.ok) {
fetchLogs();
} else {
throw new Error(`HTTP error! status: ${response.status}`);
}
} catch (error: any) {
setError(error.message || "Failed to delete log");
2024-07-10 08:10:55 +02:00
}
};
2024-06-22 10:30:51 +02:00
const createNewPage = async () => {
setLoading(true);
const response = await fetch(`/api/mdx/pages`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: pageTitle }),
});
if (response.ok) {
fetchPages();
setLoading(false);
toast({ description: "Page successfully created" });
setOpen(false);
setPageTitle("");
} else {
setLoading(false);
toast({ description: "Page creation Failed", variant: "destructive" });
}
};
const handlePageSelect = async (slug: string) => {
try {
const response = await fetch(`/api/mdx/pages/${slug}`);
if (response.ok) {
const data: PageEntry = await response.json();
setSelectedPage(data);
} else {
toast({
description: "Failed to fetch page data",
variant: "destructive",
});
}
} catch (error: any) {
toast({
description: error.message || "Failed to fetch page data",
variant: "destructive",
});
}
};
2024-07-10 08:10:55 +02:00
return (
<section id="logs-page" className="wrapper container">
<h1 className="text-3xl font-bold py-6">Server Logs Form</h1>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="version"
render={({ field }) => (
<FormItem>
<FormLabel>Version Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="date"
render={({ field }) => (
<FormItem>
<FormLabel>Date</FormLabel>
<FormControl>
<Input {...field} placeholder="Released on 24 Nov 2024" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
2024-07-10 08:10:55 +02:00
{fields.map((field, index) => (
<FormField
key={field.id}
control={form.control}
2024-07-17 17:45:28 +02:00
name={`bullets.${index}.point`}
2024-07-10 08:10:55 +02:00
render={({ field }) => (
<FormItem>
<FormLabel>Key Point {index + 1}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
<Button
type="button"
className="mt-2"
variant={"secondary"}
2024-07-17 17:45:28 +02:00
onClick={() => remove(index)}
2024-07-10 08:10:55 +02:00
>
Remove
</Button>
</FormItem>
)}
/>
))}
<Button
type="button"
className="mb-4"
2024-07-17 17:45:28 +02:00
size={"icon"}
2024-07-10 08:10:55 +02:00
variant={"outline"}
2024-07-17 17:45:28 +02:00
onClick={() => append({ point: "" })}
2024-07-10 08:10:55 +02:00
>
2024-07-17 17:45:28 +02:00
+
2024-07-10 08:10:55 +02:00
</Button>
<Button
type="submit"
className="w-full text-lg rounded-full"
disabled={loading}
2024-07-10 08:10:55 +02:00
size={"lg"}
>
Submit
</Button>
</form>
</Form>
{/* Section to create new page */}
<section id="create-page" className="py-16">
<h2 className="text-3xl md:text-4xl font-bold mb-2">Multi Log page</h2>
<Button variant={"secondary"} onClick={() => setOpen(true)}>
Create New Page
</Button>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Enter Page Title</DialogTitle>
</DialogHeader>
<Input
value={pageTitle}
onChange={(e) => setPageTitle(e.target.value)}
placeholder="Page Title"
/>
<DialogFooter>
<Button onClick={createNewPage} disabled={loading}>
Continue
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</section>
{/* Section to list and delete pages */}
<section id="pages-list" className="pb-16">
<h2 className="text-3xl md:text-4xl font-bold">Existing Pages</h2>
<p className="mb-4">Total Pages: {pages.length}</p>
<Table className="w-full mt-4 border-muted">
<TableHeader>
<TableRow>
<TableHead className="border-b px-4 py-2">Slug</TableHead>
<TableHead className="border-b px-4 py-2">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pages.map((page) => (
<TableRow key={page.slug}>
<TableCell className="border-b px-4 py-2">
<a
href={`/changelogs/${page.slug}`}
className="text-blue-500 underline"
>
{page.slug}
</a>
</TableCell>
<TableCell className="border-b px-4 py-2">
<Button
variant={"outline"}
onClick={() =>
router.push(`/admin/changelogs/${page.slug}`)
}
>
Edit
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</section>
{/* Section to list and delete logs */}
<section id="logs-list" className="py-16 md:py-24">
<h2 className="text-3xl md:text-4xl font-bold">Existing Logs</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">Version</TableHead>
<TableHead className="border-b px-4 py-2">Date</TableHead>
<TableHead className="border-b px-4 py-2">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{logs
.slice()
.reverse()
.map((log) => (
<TableRow key={log._id}>
<TableCell className="border-b px-4 py-2">
{log.version}
</TableCell>
<TableCell className="border-b px-4 py-2">
{log.date}
</TableCell>
<TableCell className="border-b px-4 py-2">
<Button
variant={"destructive"}
onClick={() => deleteLog(log._id)}
>
Delete
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</section>
{/* Section to edit selected page */}
{selectedPage && (
<section id="edit-page" className="py-16 md:py-24">
<h2 className="text-3xl md:text-4xl font-bold">Edit Page</h2>
<MarkdownEditor
value={selectedPage.content}
onChange={(value) => {
if (value !== undefined) {
setSelectedPage((prev) => ({
...prev!,
content: value,
}));
}
}}
/>
<Button
className="mt-4"
onClick={async () => {
if (selectedPage) {
const response = await fetch(
`/api/mdx/pages/${selectedPage.slug}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
...selectedPage,
content: selectedPage.content,
}),
}
);
if (response.ok) {
toast({ description: "Page successfully updated" });
} else {
toast({
description: "Page update failed",
variant: "destructive",
});
}
}
}}
>
Save Changes
</Button>
</section>
)}
2024-07-10 08:10:55 +02:00
</section>
);
2024-06-22 10:30:51 +02:00
};
2024-07-10 08:10:55 +02:00
export default AdminLogPage;