admin page

app/admin/articles/create/layout.tsx

@@ -0,0 +1,3 @@
+export default async function Layout({ children }) {
+  return <div>{children}</div>;
+}

app/admin/articles/create/page.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import styles from "../../../../styles/modules/AdminArticlesCreate.module.scss";
 import { PostArticle } from "../../../../types/postData";
 import Markdown from "../../../Markdown";
@@ -11,27 +11,28 @@ import "../../../../styles/inputs.scss";
 import Select, { GroupBase, OptionsOrGroups } from "react-select";
 import { apiUrl } from "../../../global";
 import urlJoin from "url-join";
+import { getUrlSafeString } from "../../../utils";
 
 export default function AdminArticlesCreate() {
   const [formData, setFormData] = useState<PostArticle>(null);
+  const [title, setTitle] = useState<string>("");
   const [markdown, setMarkdown] = useState<string>("");
-  const [selectedCategory, setSelectedCategory] = useState<string>();
+  const [selectCategoriesOptions, setSelectCategoriesOptions] = useState<any>([]);
+
   const titleRef = useRef<HTMLInputElement>(null);
+  const categorySelectRef = useRef(null);
+  const introductionRef = useRef<HTMLInputElement>(null);
   const markdownTextAreaRef = useRef<HTMLTextAreaElement>(null);
 
-  const selectCategoriesOptions: any = [
-    { value: "chocolate", label: "Chocolate" },
-    { value: "strawberry", label: "Strawberry" },
-    { value: "vanilla", label: "Vanilla" },
-  ];
   function handleFormChange() {
     setMarkdown(markdownTextAreaRef.current.value);
+    setTitle(titleRef.current.value);
     setFormData({
-      name: titleRef.current.value.replaceAll(" ", "%20"),
+      name: getUrlSafeString(titleRef.current.value),
       title: titleRef.current.value,
-      introduction: "test intro",
+      introduction: introductionRef.current.value,
       markdown: markdown,
-      categoryId: 2,
+      categoryId: Number(categorySelectRef?.current?.getValue()[0]?.value),
     });
   }
 
@@ -47,6 +48,27 @@ export default function AdminArticlesCreate() {
     });
   }
 
+  useEffect(() => {
+    const fetchCategoryOptions = async () => {
+      const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
+        cache: "force-cache",
+        next: { revalidate: 60 * 1 },
+      });
+      console.log();
+
+      const categories = await result.json();
+      let newSelectCategoriesOptions = [];
+
+      categories?.forEach((c) => {
+        newSelectCategoriesOptions.push({ value: c.id, label: c.title });
+      });
+      setSelectCategoriesOptions(newSelectCategoriesOptions);
+    };
+    fetchCategoryOptions().catch((err) => {
+      console.log(err);
+    });
+  }, []);
+
   return (
     <div className={styles.adminArticlesCreate}>
       <h1>Create a new article</h1>
@@ -62,25 +84,56 @@ export default function AdminArticlesCreate() {
         <div className={styles.contentTableEditor}>contenttable</div>
 
         <div className={styles.articleEditor}>
-          <Select
-            className="react-select-container"
-            classNamePrefix="react-select"
-            value={selectedCategory}
-            onChange={handleFormChange}
-            options={selectCategoriesOptions}
-          />
-          <input
-            onChange={handleFormChange}
-            className={""}
-            type="text"
-            name="title"
-            placeholder="title"
-            ref={titleRef}
-          />
+          <div className={styles.title}>
+            <label htmlFor="title">Title</label>
 
+            <div className={styles.titleInputs}>
+              <input
+                onChange={handleFormChange}
+                className={""}
+                type="text"
+                name="title"
+                placeholder="title"
+                ref={titleRef}
+              />
+              <input
+                readOnly={true}
+                onChange={handleFormChange}
+                className={""}
+                type="text"
+                name="name"
+                value={getUrlSafeString(title)}
+              />
+            </div>
+          </div>
+          <div className={styles.category}>
+            <label htmlFor="title">Category</label>
+            <Select
+              ref={categorySelectRef}
+              className="react-select-container"
+              classNamePrefix="react-select"
+              onChange={handleFormChange}
+              options={selectCategoriesOptions}
+            />
+          </div>
+          <div className={styles.introduction}>
+            {" "}
+            <label htmlFor="title">Introduction</label>
+            <input
+              onChange={handleFormChange}
+              className={""}
+              type="text"
+              name="introduction"
+              placeholder="Introduction"
+              ref={introductionRef}
+            />
+          </div>
           <div className={styles.markdown}>
-            <textarea ref={markdownTextAreaRef} onChange={handleFormChange}></textarea>
-            <Markdown value={markdown} />
+            <label htmlFor="">Markdown Editor</label>
+            <div className={styles.markdownEditor}>
+              <textarea ref={markdownTextAreaRef} onChange={handleFormChange}></textarea>
+              <Markdown value={markdown} />
+            </div>
           </div>
         </div>
       </div>

app/utils.tsx

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

styles/inputs.scss

@@ -45,7 +45,7 @@ input {
     transition: none;
 
     &:hover {
-      border-color: rgba(95, 95, 95, 0.5);
+      border-color: rgba(116, 116, 116, 0.587);
     }
   }
 
@@ -58,7 +58,7 @@ input {
     background-color: var(--color-background-secondary);
 
     &:hover {
-      background-color: var(--bg-primary);
+      background-color: rgba(116, 116, 116, 0.587);
     }
   }
 

styles/modules/AdminArticlesCreate.module.scss

@@ -8,26 +8,51 @@
     margin: 0px auto;
     max-width: 1800px;
     padding: 0px 24px;
-
     .articleEditor {
       display: flex;
       flex-direction: column;
+      row-gap: 25px;
+
+      & > div {
+        display: flex;
+        flex-direction: column;
+
+        label {
+          padding: 5px;
+        }
+      }
+
+      .title {
+        .titleInputs {
+          display: grid;
+          grid-template-columns: 1fr 0.5fr;
+          gap: 0px 5px;
+        }
+      }
+
+      .category {
+      }
+
+      .introduction {
+      }
       .markdown {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 10px 10px;
-        textarea {
-          color: var(--font-color);
-          border: 2px solid rgba(59, 59, 59, 0.434);
-          background-color: transparent;
-          min-height: 700px;
-          resize: none;
-          display: block;
-          border-radius: 0px;
-          outline: 0;
-          resize: vertical;
-          font-family: inherit;
-          font-size: inherit;
+        .markdownEditor {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 10px 10px;
+          textarea {
+            color: var(--font-color);
+            border: 2px solid rgba(59, 59, 59, 0.434);
+            background-color: transparent;
+            min-height: 700px;
+            resize: none;
+            display: block;
+            border-radius: 0px;
+            outline: 0;
+            resize: vertical;
+            font-family: inherit;
+            font-size: inherit;
+          }
         }
       }
     }

styles/typography.scss

@@ -76,3 +76,9 @@ a {
   font-weight: bold;
   font-size: 0.8em;
 }
+
+label {
+  font-weight: bold;
+  font-size: 0.9em;
+  letter-spacing: 2px;
+}