refactor

pages/articles/[categoryName]/[articleName]/index.tsx

@@ -5,7 +5,9 @@ import Image from "next/image";
 import Markdown from "@/components/Markdown";
 import { formatTextToUrlName } from "@/utils";
 import prisma, { ArticleWithIncludes, CategoryWithIncludes } from "@/lib/prisma";
-import articles from "../..";
+import ArticleControl from "../../../../components/ArticleControl";
+import { IContentTableEntry } from "@/types/contentTable";
+import { Prisma } from "@prisma/client";
 
 //* MAIN
 export default function ArticlePage({ article }: { article: ArticleWithIncludes }) {
@@ -14,27 +16,32 @@ export default function ArticlePage({ article }: { article: ArticleWithIncludes
   const dateOptions: Intl.DateTimeFormatOptions = { month: "long", day: "numeric", year: "numeric" };
 
   return (
-    <div className={styles.article}>
-      <ContentTable contentTableData={article?.contentTable ? article?.contentTable : []} />
-      <div className={styles.tutorialContent}>
-        <div className={styles.header}>
-          <p className={`${styles.dates} text-muted`}>
-            {`Published on ${dateCreated.toLocaleDateString("en-US", dateOptions)}`}
-            <br />
-            {dateUpdated > dateCreated ? `Updated on ${dateUpdated.toLocaleDateString("en-US", dateOptions)}` : ""}
-          </p>
+    <>
+      <ArticleControl articleId={article.id} />
+      <div className={styles.article}>
+        <ContentTable
+          contentTableData={article?.contentTable ? Array.from(article.contentTable as Prisma.JsonArray).map((c: any) => ({ anchor: c.anchor, title: c.title })) : []}
+        />
+        <div className={styles.tutorialContent}>
+          <div className={styles.header}>
+            <p className={`${styles.dates} text-muted`}>
+              {`Published on ${dateCreated.toLocaleDateString("en-US", dateOptions)}`}
+              <br />
+              {dateUpdated > dateCreated ? `Updated on ${dateUpdated.toLocaleDateString("en-US", dateOptions)}` : ""}
+            </p>
 
-          <h1>{article?.title}</h1>
-          <div className={styles.tags}>
-            <a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
+            <h1>{article?.title}</h1>
+            <div className={styles.tags}>
+              <a href="#">Docker</a> <a href="#">Setup</a> <a href="#">Ubuntu</a>
+            </div>
+            <Image src={""} height={350} width={750} alt={""} quality={100} placeholder="blur" blurDataURL="/images/blur.png" loading="lazy" />
+            <p>{article?.introduction}</p>
           </div>
-          <Image src={""} height={350} width={750} alt={""} quality={100} placeholder="blur" blurDataURL="/images/blur.png" loading="lazy" />
-          <p>{article?.introduction}</p>
+          <Markdown value={article?.markdown ?? ""} />
         </div>
-        <Markdown value={article?.markdown ?? ""} />
+        <Sidebar />
       </div>
-      <Sidebar />
-    </div>
+    </>
   );
 }
 

pages/articles/[categoryName]/index.tsx

@@ -3,15 +3,18 @@ import Link from "next/link";
 import { formatTextToUrlName } from "@/utils";
 import { Article, Category } from "@prisma/client";
 import prisma, { CategoryWithIncludes } from "@/lib/prisma";
+import CategoryControl from "../../../components/CategoryControl";
 
-export default function CategoryPage({ category }: { category: CategoryWithIncludes | null }) {
+export default function CategoryPage({ category }: { category: CategoryWithIncludes }) {
   return (
-    <div className={styles.category}>
-      <h1>{category?.title}</h1>
-      <div className={styles.content}>
-        <div className={`${styles.showcase} ${styles.smallShowcase}`}>
-          <h2>Most popular articles</h2>
-          {/* {popularArticles?.map((a, i) => {
+    <>
+      <CategoryControl categoryId={category.id} />
+      <div className={styles.category}>
+        <h1>{category?.title}</h1>
+        <div className={styles.content}>
+          <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+            <h2>Most popular articles</h2>
+            {/* {popularArticles?.map((a, i) => {
             {
               return (
                 <Link key={i} href={`/articles/${category.name}/${a.name}`}>
@@ -20,9 +23,9 @@ export default function CategoryPage({ category }: { category: CategoryWithInclu
               );
             }
           })} */}
-        </div>
+          </div>
 
-        {/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+          {/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
 					<h2>Most recent articles</h2>
 					{recentArticles?.map((a, i) => {
 						{
@@ -35,22 +38,23 @@ export default function CategoryPage({ category }: { category: CategoryWithInclu
 					})}
 				</div> */}
 
-        <div className={styles.showcase}>
-          <h2>All articles</h2>
-          {category?.articles
-            ? Array.from(category?.articles).map((a: Article, i: number) => {
-                {
-                  return (
-                    <Link key={i} href={`/articles/${category.name}/${a.name}`}>
-                      {a.title}
-                    </Link>
-                  );
-                }
-              })
-            : ""}
+          <div className={styles.showcase}>
+            <h2>All articles</h2>
+            {category?.articles
+              ? Array.from(category?.articles).map((a: Article, i: number) => {
+                  {
+                    return (
+                      <Link key={i} href={`/articles/${category.name}/${a.name}`}>
+                        {a.title}
+                      </Link>
+                    );
+                  }
+                })
+              : ""}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 export async function getServerSideProps(context: any) {