add admin control

components/AdminControl.tsx

@@ -1,11 +1,97 @@
-import React from "react";
+"use client";
+import { usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
 import styles from "../styles/modules/AdminControl.module.scss";
+import "../styles/buttons.scss";
 
 export default function AdminControl() {
+  const router = useRouter();
+  const [isArticle, setIsArticle] = useState(false);
+  const [isCategory, setIsCategory] = useState(false);
+  const [articleOrCategoryName, setArticleOrCategoryName] = useState("");
+  const [articleOrCategoryId, setArticleOrCategoryId] = useState();
+  const pathname = usePathname();
+
+  async function fetchDelete() {
+    const response = await fetch(
+      `/api/${isArticle ? "articles" : isCategory ? "categories" : ""}/${articleOrCategoryId}`,
+      {
+        method: "DELETE",
+        cache: "no-cache",
+      }
+    );
+    router.push("/articles/");
+  }
+
+  useEffect(() => {
+    function checkArticlePage() {
+      let path = pathname.split("/");
+      if (path.length == 4) {
+        if (path[1] == "articles") {
+          setIsArticle(true);
+          setArticleOrCategoryName(path[3]);
+          return;
+        }
+      }
+
+      setIsArticle(false);
+    }
+
+    function checkCategoryPage() {
+      let path = pathname.split("/");
+      if (path.length == 3) {
+        if (path[1] == "articles") {
+          setIsCategory(true);
+          setArticleOrCategoryName(path[2]);
+          return;
+        }
+      }
+
+      setIsCategory(false);
+    }
+    checkArticlePage();
+    checkCategoryPage();
+  }, [pathname]);
+
+  useEffect(() => {
+    async function getArticleOrCategoryId() {
+      const response = await fetch(
+        `/api/${isArticle ? "articles" : isCategory ? "categories" : ""}/name/${articleOrCategoryName}`,
+        {
+          method: "GET",
+          cache: "no-cache",
+        }
+      );
+      const json = await response.json();
+
+      setArticleOrCategoryId(json.id);
+    }
+    getArticleOrCategoryId();
+  }, [articleOrCategoryName]);
   return (
     <div className={styles.adminControl}>
-      <button className="danger">Delete this article</button>
-      <button className="warning">Edit this article</button>
+      {isArticle || isCategory ? (
+        <>
+          <button
+            className="danger"
+            onClick={() => {
+              fetchDelete();
+            }}
+          >
+            Delete this {isArticle ? "article" : "category"}
+          </button>
+          <button
+            className="warning"
+            onClick={() => {
+              router.push(`/admin/${isArticle ? "articles" : "categories"}/editor/${articleOrCategoryId}`);
+            }}
+          >
+            Edit this {isArticle ? "article" : "category"}
+          </button>
+        </>
+      ) : (
+        ""
+      )}
     </div>
   );
 }

pages/api/articles/name/[articleName].ts

@@ -4,7 +4,7 @@ import { ResponseError } from "../../../../types/responseErrors";
 import { formatTextToUrlName } from "../../../../utils";
 import type { NextApiRequest, NextApiResponse } from 'next'
 
-type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { contentTableEntries: true, category: true, image: true } }>
+type ArticleWithIncludes = Prisma.ArticleGetPayload<{ include: { category: true, image: true } }>
 
 
 
@@ -15,8 +15,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   await prisma.article
     .findUnique({ where: { name: articleName }, include: { category: true, image: true } })
     .then((result: ArticleWithIncludes) => {
+
       if (result !== null) {
-        res.end(JSON.stringify(result));
+        res.json(result);
       } else {
         const error: ResponseError = {
           code: "404",