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

"use client";
import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "@/components/ui/table";
import { Input } from "@/components/ui/input";
import { useRouter } from "next/navigation";
import { useToast } from "@/components/ui/use-toast";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle
} from "@/components/ui/dialog";

interface PageEntry {
  title: string;
  slug: string;
  content: string;
}

const MultiLogs = () => {
  const [pages, setPages] = useState<PageEntry[]>([]);
  const { toast } = useToast();
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [pageTitle, setPageTitle] = useState("");

  useEffect(() => {
    fetch("/api/mdx/pages")
      .then((response) => response.json())
      .then((data) => setPages(data))
      .catch((error) => console.error("Failed to load pages", error));
  }, []);

  const createPage = async () => {
    setLoading(true);
    const slug = pageTitle.toLowerCase().replace(/\s+/g, "-");
    const response = await fetch("/api/mdx/pages", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: pageTitle, slug, content: "" })
    });

    if (response.ok) {
      const newPage = await response.json();
      setPages([...pages, newPage]);
      setPageTitle("");
      setOpen(false);
      router.push(`/admin/multi-logs/${slug}`);
      toast({ description: "Page created successfully" });
    } else {
      const errorData = await response.json();
      console.error("Failed to create page:", errorData);
      toast({ description: `Error: ${errorData.message}` });
    }
    setLoading(false);
  };

  const deletePage = async (slug: string) => {
    setLoading(true);
    const response = await fetch(`/api/mdx/pages/${slug}`, {
      method: "DELETE"
    });

    if (response.ok) {
      setPages(pages.filter((page) => page.slug !== slug));
      toast({ description: "Page deleted successfully" });
    } else {
      const errorData = await response.json();
      console.error("Failed to delete page:", errorData);
      toast({ description: `Error: ${errorData.message}` });
    }
    setLoading(false);
  };

  return (
    <section id="logs-page" className="wrapper container">
      <section id="create-page" className="py-16">
        <h2 className="text-3xl md:text-4xl font-bold mb-2">Create New 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 disabled={loading} onClick={createPage}>
                Continue
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </section>
      <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/multi-logs/${page.slug}`)
                    }
                  >
                    Edit
                  </Button>
                  <Button
                    variant={"destructive"}
                    onClick={() => deletePage(page.slug)}
                    className="ml-2"
                    disabled={loading}
                  >
                    Delete
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </section>
    </section>
  );
};

export default MultiLogs;