From 65eab1f95e0fe37cdb9246cb636387337a3ba403 Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 15 Jan 2023 17:27:00 +0100 Subject: [PATCH] admin page --- app/admin/articles/create/layout.tsx | 3 + app/admin/articles/create/page.tsx | 107 +++++++++++++----- app/utils.tsx | 3 + styles/inputs.scss | 4 +- .../modules/AdminArticlesCreate.module.scss | 57 +++++++--- styles/typography.scss | 6 + 6 files changed, 135 insertions(+), 45 deletions(-) create mode 100644 app/admin/articles/create/layout.tsx create mode 100644 app/utils.tsx diff --git a/app/admin/articles/create/layout.tsx b/app/admin/articles/create/layout.tsx new file mode 100644 index 0000000..6eb6e0a --- /dev/null +++ b/app/admin/articles/create/layout.tsx @@ -0,0 +1,3 @@ +export default async function Layout({ children }) { + return
{children}
; +} diff --git a/app/admin/articles/create/page.tsx b/app/admin/articles/create/page.tsx index 22c9f2d..63d303d 100644 --- a/app/admin/articles/create/page.tsx +++ b/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(null); + const [title, setTitle] = useState(""); const [markdown, setMarkdown] = useState(""); - const [selectedCategory, setSelectedCategory] = useState(); + const [selectCategoriesOptions, setSelectCategoriesOptions] = useState([]); + const titleRef = useRef(null); + const categorySelectRef = useRef(null); + const introductionRef = useRef(null); const markdownTextAreaRef = useRef(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 (

Create a new article

@@ -62,25 +84,56 @@ export default function AdminArticlesCreate() {
contenttable
- +
+ +
+ + +
+
+
+ + +
- - + +
+ + +
diff --git a/app/utils.tsx b/app/utils.tsx new file mode 100644 index 0000000..66f1e84 --- /dev/null +++ b/app/utils.tsx @@ -0,0 +1,3 @@ +export function getUrlSafeString(value: string): string { + return encodeURIComponent(value.toLowerCase().replace(/[^a-z0-9 _-]+/gi, "-")); +} diff --git a/styles/inputs.scss b/styles/inputs.scss index 77f9afd..be859c4 100644 --- a/styles/inputs.scss +++ b/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); } } diff --git a/styles/modules/AdminArticlesCreate.module.scss b/styles/modules/AdminArticlesCreate.module.scss index fd167ec..e810959 100644 --- a/styles/modules/AdminArticlesCreate.module.scss +++ b/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; + } } } } diff --git a/styles/typography.scss b/styles/typography.scss index e55cec1..21a85d3 100644 --- a/styles/typography.scss +++ b/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; +}