asd

app/Markdown.tsx

@@ -10,6 +10,20 @@ import remarkGemoji from "remark-gemoji";
 import remarkStringify from "remark-stringify";
 import { useState, useEffect } from "react";
 import { useLocalStorage } from "usehooks-ts";
+import React from "react";
+import Head from "./head";
+import { formatTextToUrlName } from "../utils";
+
+function flatten(text, child) {
+  return typeof child === "string" ? text + child : React.Children.toArray(child.props.children).reduce(flatten, text);
+}
+
+function HeadingRenderer({ children, level }) {
+  children = React.Children.toArray(children);
+  const text = children.reduce(flatten, "");
+  return React.createElement("h" + level, { id: formatTextToUrlName(text) }, children);
+}
+
 export default function Markdown({ value }: { value: any }) {
   return (
     <div>
@@ -18,6 +32,12 @@ export default function Markdown({ value }: { value: any }) {
         //@ts-ignore
         remarkPlugins={[remarkGfm, remarkGemoji, remarkStringify]}
         components={{
+          h1: HeadingRenderer,
+          h2: HeadingRenderer,
+          h3: HeadingRenderer,
+          h4: HeadingRenderer,
+          h5: HeadingRenderer,
+          h6: HeadingRenderer,
           code({ node, inline, className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || "");
             return !inline ? (

app/admin/articles/create/page.tsx

@@ -6,39 +6,68 @@ import { useState, useRef, useEffect } from "react";
 import styles from "../../../../styles/modules/AdminArticlesCreate.module.scss";
 import { PostArticle } from "../../../../types/postData";
 import Markdown from "../../../Markdown";
-import { Category } from "@prisma/client";
+import { Article, Category, Prisma } from "@prisma/client";
 import "../../../../styles/inputs.scss";
+import "../../../../styles/buttons.scss";
 import Select, { GroupBase, OptionsOrGroups } from "react-select";
 import { apiUrl } from "../../../global";
 import urlJoin from "url-join";
-import { getUrlSafeString } from "../../../utils";
+import { formatTextToUrlName } from "../../../../utils";
+import { isValidText } from "../../../../validators";
+import { useRouter } from "next/navigation";
+import ContentTable from "../../../articles/[categoryName]/[articleName]/ContentTable";
+import { IContentTableEntry } from "../../../../types/contentTable";
+
+type ArticleWithCategory = Prisma.ArticleGetPayload<{ include: { category: true } }>;
 
 export default function AdminArticlesCreate() {
-  const [formData, setFormData] = useState<PostArticle>(null);
+  const router = useRouter();
+
   const [title, setTitle] = useState<string>("");
-  const [markdown, setMarkdown] = useState<string>("");
   const [selectCategoriesOptions, setSelectCategoriesOptions] = useState<any>([]);
+  const [introduction, setIntroduction] = useState<string>("");
+  const [markdown, setMarkdown] = useState<string>("");
+  const [contentTable, setContentTable] = useState<IContentTableEntry[]>([]);
 
   const titleRef = useRef<HTMLInputElement>(null);
   const categorySelectRef = useRef(null);
   const introductionRef = useRef<HTMLInputElement>(null);
   const markdownTextAreaRef = useRef<HTMLTextAreaElement>(null);
 
+  const errorTextRef = useRef(null);
+
+  function changeContentTableEntryAnchor(index: number, newAnchor: string) {
+    setContentTable((prevArray) => {
+      let newArray = [...prevArray];
+      newArray[index].anchor = newAnchor;
+      return newArray;
+    });
+  }
+
+  function changeContentTableEntryTitle(index: number, newTitle: string) {
+    setContentTable((prevArray) => {
+      let newArray = [...prevArray];
+      newArray[index].anchor = newTitle;
+      return newArray;
+    });
+  }
+
   function handleFormChange() {
     setMarkdown(markdownTextAreaRef.current.value);
     setTitle(titleRef.current.value);
-    setFormData({
-      name: getUrlSafeString(titleRef.current.value),
+    setIntroduction(introductionRef.current.value);
+  }
+
+  async function postData() {
+    const formData: PostArticle = {
       title: titleRef.current.value,
       introduction: introductionRef.current.value,
       markdown: markdown,
       categoryId: Number(categorySelectRef?.current?.getValue()[0]?.value),
-    });
-  }
-
-  async function postData() {
+      contentTable: contentTable,
+    };
     console.log(formData);
-    await fetch("/api/articles/create", {
+    const result = await fetch("/api/articles/create", {
       method: "POST",
       headers: {
         Accept: "application/json",
@@ -46,6 +75,14 @@ export default function AdminArticlesCreate() {
       },
       body: JSON.stringify(formData),
     });
+
+    const response = await result.json();
+    console.log(response);
+    errorTextRef.current.innerText = response.error ?? "";
+    if (response.success) {
+      const newArticle: ArticleWithCategory = response.data;
+      router.push(urlJoin(`/articles/`, newArticle.category.name, newArticle.name));
+    }
   }
 
   useEffect(() => {
@@ -54,7 +91,6 @@ export default function AdminArticlesCreate() {
         cache: "no-cache",
         next: { revalidate: 60 * 1 },
       });
-      console.log();
 
       const categories = await result.json();
       let newSelectCategoriesOptions = [];
@@ -72,17 +108,19 @@ export default function AdminArticlesCreate() {
   return (
     <div className={styles.adminArticlesCreate}>
       <h1>Create a new article</h1>
-      <button
-        type="button"
-        onClick={() => {
-          postData();
-        }}
-      >
-        send
-      </button>
-      <div className={styles.form}>
-        <div className={styles.contentTableEditor}>contenttable</div>
+      <div className={styles.formControl}>
+        <p className="text-error" ref={errorTextRef}></p>
+        <button
+          type="button"
+          onClick={() => {
+            postData();
+          }}
+        >
+          Create Article
+        </button>
+      </div>
 
+      <div className={styles.form}>
         <div className={styles.articleEditor}>
           <div className={styles.title}>
             <label htmlFor="title">Title</label>
@@ -90,7 +128,7 @@ export default function AdminArticlesCreate() {
             <div className={styles.titleInputs}>
               <input
                 onChange={handleFormChange}
-                className={""}
+                className={!isValidText(title) && title ? "error" : ""}
                 type="text"
                 name="title"
                 placeholder="title"
@@ -102,7 +140,7 @@ export default function AdminArticlesCreate() {
                 className={""}
                 type="text"
                 name="name"
-                value={getUrlSafeString(title)}
+                value={title ? formatTextToUrlName(title) : ""}
               />
             </div>
           </div>
@@ -117,11 +155,10 @@ export default function AdminArticlesCreate() {
             />
           </div>
           <div className={styles.introduction}>
-            {" "}
             <label htmlFor="title">Introduction</label>
             <input
               onChange={handleFormChange}
-              className={""}
+              className={!isValidText(introduction) && introduction ? "error" : ""}
               type="text"
               name="introduction"
               placeholder="Introduction"
@@ -135,6 +172,43 @@ export default function AdminArticlesCreate() {
               <Markdown value={markdown} />
             </div>
           </div>
+
+          <div className={styles.contentTable}>
+            <label htmlFor="">Table of contents</label>
+            <div className={styles.contentTableEditor}>
+              <div className={styles.entries}>
+                {contentTable.map((entry: IContentTableEntry, i: number) => {
+                  return (
+                    <div key={i}>
+                      <input
+                        onChange={(e) => {
+                          changeContentTableEntryAnchor(i, e.target.value);
+                        }}
+                        type="text"
+                        placeholder={"Anchor"}
+                      />
+                      <input
+                        onChange={(e) => {
+                          changeContentTableEntryTitle(i, e.target.value);
+                        }}
+                        type="text"
+                        placeholder={"Title"}
+                      />
+                    </div>
+                  );
+                })}
+
+                <button
+                  onClick={() => {
+                    setContentTable([...contentTable, { title: "Title", anchor: "Anchor" }]);
+                  }}
+                >
+                  Add
+                </button>
+              </div>
+              <Markdown value={markdown} />
+            </div>
+          </div>
         </div>
       </div>
     </div>

app/articles/[categoryName]/[articleName]/ContentTable.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import styles from "../../../../styles/modules/ArticleContentTable.module.scss";
-import { Article, ContentTableEntry } from "@prisma/client";
+import { Article } from "@prisma/client";
+import { IContentTableEntry } from "../../../../types/contentTable";
 
-export default function ContentTable({ contentTableEntries }: { contentTableEntries: ContentTableEntry[] }) {
+export default function ContentTable({ contentTableData }: { contentTableData: any }) {
   return (
     <div className={styles.articleContentTable}>
       <div className={styles.stickyContainer}>
         <div className={styles.list}>
           <h2>Contents</h2>
-          {contentTableEntries?.map((e, i) => {
+          {contentTableData?.map((e, i) => {
             return (
               <a key={i} href={"#" + e.anchor}>
                 {e.title}
@@ -16,7 +17,7 @@ export default function ContentTable({ contentTableEntries }: { contentTableEntr
             );
           })}
         </div>
-        {contentTableEntries?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
+        {contentTableData?.length < 15 ? <div className={styles.adContainer}>Future advertisement</div> : ""}
       </div>
     </div>
   );

app/articles/[categoryName]/[articleName]/page.tsx

@@ -2,16 +2,15 @@ import { marked } from "marked";
 import ContentTable from "./ContentTable";
 import Sidebar from "./Sidebar";
 import styles from "../../../../styles/modules/Article.module.scss";
-
-import { Article, Category, ContentTableEntry } from "@prisma/client";
 import Image from "next/image";
 import urlJoin from "url-join";
 import { apiUrl } from "../../../global";
 import { Prisma } from "@prisma/client";
 import Markdown from "../../../Markdown";
+import { IContentTableEntry } from "../../../../types/contentTable";
 
 type ArticleWithIncludes = Prisma.ArticleGetPayload<{
-  include: { contentTableEntries: true; category: true; image: true };
+  include: { category: true; image: true };
 }>;
 
 export async function GetArticle(articleName: string): Promise<any> {
@@ -35,7 +34,7 @@ export default async function ArticlePage({ params }: { params: { articleName: s
 
   return (
     <div className={styles.article}>
-      <ContentTable contentTableEntries={article.contentTableEntries} />
+      <ContentTable contentTableData={article.contentTable ? article.contentTable : []} />
       <div className={styles.tutorialContent}>
         <div className={styles.header}>
           <p className={`${styles.dates} text-muted`}>
@@ -78,7 +77,7 @@ export default async function ArticlePage({ params }: { params: { articleName: s
 export async function generateStaticParams() {
   const articles: ArticleWithIncludes[] = await (
     await fetch(urlJoin(apiUrl, `articles/`), {
-      cache: "force-cache",
+      cache: "no-cache",
       next: { revalidate: 60 * 10 },
     })
   ).json();

app/utils.tsx

@@ -1,3 +0,0 @@
-export function getUrlSafeString(value: string): string {
-  return encodeURIComponent(value.toLowerCase().replace(/[^a-z0-9 _-]+/gi, "-"));
-}