refactor

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

@@ -0,0 +1,86 @@
+import ContentTable from "@/components/ContentTable";
+import Sidebar from "@/components/Sidebar";
+import styles from "@/styles/modules/Article.module.scss";
+import Image from "next/image";
+import Markdown from "@/components/Markdown";
+import { formatTextToUrlName } from "@/utils";
+import prisma, { ArticleWithIncludes, CategoryWithIncludes } from "@/lib/prisma";
+import articles from "../..";
+
+//* MAIN
+export default function ArticlePage({ article }: { article: ArticleWithIncludes }) {
+  const dateUpdated: Date = new Date(article?.dateUpdated);
+  const dateCreated: Date = new Date(article?.dateCreated);
+  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>
+
+          <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>
+        <Markdown value={article?.markdown ?? ""} />
+      </div>
+      <Sidebar />
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  let articles: ArticleWithIncludes[] = [];
+
+  await prisma.article.findMany({ include: { category: true } }).then(
+    (result: ArticleWithIncludes[]) => {
+      if (result) {
+        articles = result;
+      }
+    },
+    (reason: any) => {
+      console.log(reason);
+    }
+  );
+
+  return await Promise.all(
+    articles.map(async (article) => ({
+      article: article,
+    }))
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  const articleName = formatTextToUrlName(context.params.articleName);
+
+  let article: ArticleWithIncludes | null = null;
+
+  await prisma.article
+    .findUnique({
+      where: { name: articleName },
+      include: { category: true },
+    })
+    .then(
+      (result: ArticleWithIncludes | null) => {
+        if (result) {
+          article = JSON.parse(JSON.stringify(result));
+        }
+      },
+      (reason: any) => {
+        console.log(reason);
+      }
+    );
+
+  return {
+    props: { article: article }, // will be passed to the page component as props
+  };
+}

pages/articles/[categoryName]/index.tsx

@@ -0,0 +1,80 @@
+import styles from "@/styles/modules/Category.module.scss";
+import Link from "next/link";
+import { formatTextToUrlName } from "@/utils";
+import { Article, Category } from "@prisma/client";
+import prisma, { CategoryWithIncludes } from "@/lib/prisma";
+
+export default function CategoryPage({ category }: { category: CategoryWithIncludes | null }) {
+  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) => {
+            {
+              return (
+                <Link key={i} href={`/articles/${category.name}/${a.name}`}>
+                  {a.title}
+                </Link>
+              );
+            }
+          })} */}
+        </div>
+
+        {/* <div className={`${styles.showcase} ${styles.smallShowcase}`}>
+					<h2>Most recent articles</h2>
+					{recentArticles?.map((a, i) => {
+						{
+							return (
+								<Link key={i} href={`/articles/${category.name}/${a.name}`}>
+									{a.name}
+								</Link>
+							);
+						}
+					})}
+				</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>
+      </div>
+    </div>
+  );
+}
+export async function getServerSideProps(context: any) {
+  const categoryName = formatTextToUrlName(context.params.categoryName);
+
+  let category: CategoryWithIncludes | null = null;
+
+  await prisma.category
+    .findUnique({
+      where: { name: categoryName },
+      include: { articles: true, svg: true },
+    })
+    .then(
+      (result: CategoryWithIncludes | null) => {
+        if (result) {
+          category = JSON.parse(JSON.stringify(result));
+        }
+      },
+      (reason: any) => {
+        console.log(reason);
+      }
+    );
+
+  return {
+    props: { category: category }, // will be passed to the page component as props
+  };
+}