asd

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>