mirror of
https://github.com/DerTyp7/explainegy-nextjs.git
synced 2025-10-29 21:02:13 +01:00
refactor
This commit is contained in:
Janis
285
pages/admin/editor/article/[articleId].tsx
Normal file
285
pages/admin/editor/article/[articleId].tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import React from "react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import styles from "@/styles/modules/ArticleEditor.module.scss";
|
||||
import { Prisma, Category } from "@prisma/client";
|
||||
import Select from "react-select";
|
||||
import { useRouter } from "next/navigation";
|
||||
import urlJoin from "url-join";
|
||||
import { IContentTableEntry } from "@/types/contentTable";
|
||||
import { CreateArticle, UpdateArticle } from "@/types/api";
|
||||
import { formatTextToUrlName } from "@/utils";
|
||||
import { isValidText } from "@/validators";
|
||||
import { apiUrl } from "@/global";
|
||||
import Markdown from "@/components/Markdown";
|
||||
import prisma, { ArticleWithIncludes, CategoryWithIncludes } from "@/lib/prisma";
|
||||
import { CLIENT_RENEG_LIMIT } from "tls";
|
||||
|
||||
export default function AdminArticlesEditorPage({ article, categories }: { article: ArticleWithIncludes | null; categories: CategoryWithIncludes[] }) {
|
||||
const router = useRouter();
|
||||
|
||||
const [title, setTitle] = useState<string>(article?.title ?? "");
|
||||
const [selectCategoriesOptions, setSelectCategoriesOptions] = useState<{ value: string; label: string }[]>(
|
||||
categories?.map((c: CategoryWithIncludes) => ({ value: c.id, label: c.title }))
|
||||
);
|
||||
|
||||
const [introduction, setIntroduction] = useState<string>(article?.introduction ?? "");
|
||||
const [markdown, setMarkdown] = useState<string>(article?.markdown ?? "");
|
||||
const [contentTable, setContentTable] = useState<any>(article?.contentTable ?? []);
|
||||
|
||||
const titleRef = useRef<HTMLInputElement>(null);
|
||||
const categorySelectRef = useRef<any>(null);
|
||||
const introductionRef = useRef<HTMLInputElement>(null);
|
||||
const markdownTextAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const errorTextRef = useRef<HTMLParagraphElement>(null);
|
||||
|
||||
function changeContentTableEntryAnchor(index: number, newAnchor: string) {
|
||||
setContentTable((prevArray: any) => {
|
||||
let newArray = [...prevArray];
|
||||
newArray[index].anchor = newAnchor;
|
||||
return newArray;
|
||||
});
|
||||
}
|
||||
|
||||
function changeContentTableEntryTitle(index: number, newTitle: string) {
|
||||
setContentTable((prevArray: any) => {
|
||||
let newArray = [...prevArray];
|
||||
newArray[index].anchor = newTitle;
|
||||
return newArray;
|
||||
});
|
||||
}
|
||||
|
||||
function removeEntry(index: number) {
|
||||
let newArray = [...contentTable];
|
||||
newArray.splice(index, 1);
|
||||
setContentTable(newArray);
|
||||
}
|
||||
|
||||
// Create or update article
|
||||
async function handleResponse(res: Response) {
|
||||
const json = await res.json();
|
||||
if (errorTextRef?.current) {
|
||||
errorTextRef.current.innerText = json.error ?? "";
|
||||
}
|
||||
|
||||
if (json.success) {
|
||||
const newArticle: ArticleWithIncludes = json.data;
|
||||
router.push(urlJoin(`/articles/`, newArticle.category.name, newArticle.name));
|
||||
}
|
||||
}
|
||||
|
||||
async function updateArticle() {
|
||||
console.log("Update article");
|
||||
const payload: UpdateArticle = {
|
||||
title: titleRef?.current?.value,
|
||||
introduction: introductionRef?.current?.value,
|
||||
markdown: markdown,
|
||||
categoryId: categorySelectRef?.current?.getValue()[0]?.value,
|
||||
contentTable: contentTable,
|
||||
};
|
||||
console.log(payload);
|
||||
|
||||
await fetch(`/api/articles/${article?.id.toString()}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
cache: "no-cache",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleResponse)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
async function createArticle() {
|
||||
console.log("Create article");
|
||||
const payload: CreateArticle = {
|
||||
title: titleRef?.current?.value ?? "",
|
||||
introduction: introductionRef?.current?.value ?? "",
|
||||
markdown: markdown,
|
||||
categoryId: categorySelectRef?.current?.getValue()[0]?.value,
|
||||
contentTable: contentTable,
|
||||
};
|
||||
console.log(payload);
|
||||
|
||||
await fetch("/api/articles/", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
cache: "no-cache",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleResponse)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.adminArticlesCreate}>
|
||||
<h1>{article ? "Update article" : "Create new article"}</h1>
|
||||
<div className={styles.formControl}>
|
||||
<p className="text-error" ref={errorTextRef}></p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (article) {
|
||||
updateArticle();
|
||||
} else {
|
||||
createArticle();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{article ? "Update article" : "Create article"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={styles.form}>
|
||||
<div className={styles.articleEditor}>
|
||||
<div className={styles.title}>
|
||||
<label htmlFor="title">Title</label>
|
||||
|
||||
<div className={styles.titleInputs}>
|
||||
<input
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setTitle(e.target.value);
|
||||
}}
|
||||
className={!isValidText(title) && title ? "error" : ""}
|
||||
type="text"
|
||||
name="title"
|
||||
placeholder="title"
|
||||
ref={titleRef}
|
||||
defaultValue={title}
|
||||
/>
|
||||
<input readOnly={true} className={""} type="text" name="name" value={title ? formatTextToUrlName(title) : ""} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.category}>
|
||||
<label htmlFor="title">Category</label>
|
||||
<Select
|
||||
ref={categorySelectRef}
|
||||
className="react-select-container"
|
||||
classNamePrefix="react-select"
|
||||
options={selectCategoriesOptions}
|
||||
defaultValue={article ? { value: article.category.id, label: article.category.title } : {}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.introduction}>
|
||||
<label htmlFor="title">Introduction</label>
|
||||
<input
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setIntroduction(e.target.value);
|
||||
}}
|
||||
className={!isValidText(introduction) && introduction ? "error" : ""}
|
||||
type="text"
|
||||
name="introduction"
|
||||
placeholder="Introduction"
|
||||
ref={introductionRef}
|
||||
defaultValue={introduction}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.markdown}>
|
||||
<label htmlFor="">Markdown Editor</label>
|
||||
<div className={styles.markdownEditor}>
|
||||
<textarea
|
||||
ref={markdownTextAreaRef}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setMarkdown(e.target.value);
|
||||
}}
|
||||
defaultValue={markdown}
|
||||
></textarea>
|
||||
<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"}
|
||||
defaultValue={entry.anchor}
|
||||
/>
|
||||
<input
|
||||
onChange={(e) => {
|
||||
changeContentTableEntryTitle(i, e.target.value);
|
||||
}}
|
||||
type="text"
|
||||
placeholder={"Title"}
|
||||
defaultValue={entry.title}
|
||||
/>{" "}
|
||||
<button
|
||||
onClick={() => {
|
||||
removeEntry(i);
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setContentTable([...contentTable, { title: "", anchor: "" }]);
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<Markdown value={markdown} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context: any) {
|
||||
let article: ArticleWithIncludes | null = null;
|
||||
let categories: CategoryWithIncludes[] = [];
|
||||
|
||||
const articleId: string = context.params.articleId.toString();
|
||||
|
||||
if (articleId != "0") {
|
||||
await prisma.article.findUnique({ where: { id: articleId }, include: { category: true } }).then(
|
||||
(result: ArticleWithIncludes | null) => {
|
||||
if (result) {
|
||||
article = JSON.parse(JSON.stringify(result));
|
||||
console.log(article);
|
||||
} else {
|
||||
// TODO redirect to /0
|
||||
}
|
||||
},
|
||||
(reason: any) => {
|
||||
console.log(reason);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
await prisma.category.findMany({ include: { svg: true, articles: true } }).then(
|
||||
(result: CategoryWithIncludes[]) => {
|
||||
if (result) {
|
||||
categories = JSON.parse(JSON.stringify(result));
|
||||
} else {
|
||||
// TODO redirect to /0
|
||||
}
|
||||
},
|
||||
(reason: any) => {
|
||||
console.log(reason);
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
props: { article: article, categories: categories }, // will be passed to the page component as props
|
||||
};
|
||||
}
|
||||
186
pages/admin/editor/category/[categoryId].tsx
Normal file
186
pages/admin/editor/category/[categoryId].tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import styles from "@/styles/modules/CategoryEditor.module.scss";
|
||||
import { Prisma, Category } from "@prisma/client";
|
||||
import { formatTextToUrlName } from "@/utils";
|
||||
import { isValidText } from "@/validators";
|
||||
import { CreateCategory, UpdateCategory } from "@/types/api";
|
||||
import urlJoin from "url-join";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { apiUrl } from "@/global";
|
||||
import prisma, { CategoryWithIncludes } from "@/lib/prisma";
|
||||
|
||||
export default function AdminCategoriesEditor({ category }: { category: CategoryWithIncludes | null }) {
|
||||
const router = useRouter();
|
||||
const [title, setTitle] = useState<string>(category?.title ?? "");
|
||||
const [color, setColor] = useState<string>(category?.color ?? "");
|
||||
const [svgViewbox, setSvgViewbox] = useState<string>(category?.svg?.viewbox ?? "");
|
||||
const [svgPath, setSvgPath] = useState<string>(category?.svg?.path ?? "");
|
||||
|
||||
const titleRef = useRef<HTMLInputElement>(null);
|
||||
const colorRef = useRef<HTMLInputElement>(null);
|
||||
const svgViewboxRef = useRef<HTMLInputElement>(null);
|
||||
const svgPathRef = useRef<HTMLInputElement>(null);
|
||||
const errorTextRef = useRef<HTMLParagraphElement>(null);
|
||||
|
||||
async function handleResponse(res: Response) {
|
||||
const json = await res.json();
|
||||
|
||||
if (errorTextRef?.current) {
|
||||
errorTextRef.current.innerText = json.error ?? "";
|
||||
}
|
||||
|
||||
if (json.success) {
|
||||
router.push(urlJoin(`/articles/`));
|
||||
}
|
||||
}
|
||||
|
||||
async function updateCategory() {
|
||||
console.log("Update category");
|
||||
const payload: UpdateCategory = {
|
||||
title: titleRef?.current?.value,
|
||||
color: colorRef?.current?.value,
|
||||
svg: {
|
||||
path: svgPathRef?.current?.value,
|
||||
viewbox: svgViewboxRef?.current?.value,
|
||||
},
|
||||
};
|
||||
console.log(payload);
|
||||
|
||||
await fetch(`/api/categories/${category?.id.toString()}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
cache: "no-cache",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleResponse)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
async function createCategory() {
|
||||
console.log("Create category");
|
||||
const payload: CreateCategory = {
|
||||
title: titleRef?.current?.value ?? "",
|
||||
color: colorRef?.current?.value ?? "",
|
||||
svg: {
|
||||
path: svgPathRef?.current?.value ?? "",
|
||||
viewbox: svgViewboxRef?.current?.value ?? "",
|
||||
},
|
||||
};
|
||||
console.log(payload);
|
||||
|
||||
await fetch("/api/categories/", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
cache: "no-cache",
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(handleResponse)
|
||||
.catch(console.error);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.categoryEditor}>
|
||||
<h1>{category ? "Update category" : "Create new category"}</h1>
|
||||
<div className={styles.formControl}>
|
||||
<p className="text-error" ref={errorTextRef}></p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (category) {
|
||||
updateCategory();
|
||||
} else {
|
||||
createCategory();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{category ? "Update category" : "Create category"}
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.form}>
|
||||
<div className={styles.title}>
|
||||
<label htmlFor="title">Title</label>
|
||||
<div className={styles.titleInputs}>
|
||||
<input
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setTitle(e.target.value);
|
||||
}}
|
||||
className={!isValidText(title) && title ? "error" : ""}
|
||||
type="text"
|
||||
name="title"
|
||||
placeholder="title"
|
||||
ref={titleRef}
|
||||
defaultValue={title}
|
||||
/>
|
||||
<input readOnly={true} className={""} type="text" name="name" value={title ? formatTextToUrlName(title) : ""} />
|
||||
</div>
|
||||
<div className={styles.svg}>
|
||||
<label>SVG</label>
|
||||
<div className={styles.svgInputs}>
|
||||
<input
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSvgPath(e.target.value);
|
||||
}}
|
||||
type="text"
|
||||
placeholder="svg path"
|
||||
ref={svgPathRef}
|
||||
defaultValue={svgPath}
|
||||
/>
|
||||
<input
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSvgViewbox(e.target.value);
|
||||
}}
|
||||
type="text"
|
||||
placeholder="0 0 512 512"
|
||||
ref={svgViewboxRef}
|
||||
defaultValue={svgViewbox}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.color}>
|
||||
<label>Color</label>
|
||||
<input
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setColor(e.target.value);
|
||||
}}
|
||||
type="color"
|
||||
ref={colorRef}
|
||||
defaultValue={color}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context: any) {
|
||||
let category: CategoryWithIncludes | null = null;
|
||||
const categoryId: string = context.params.categoryId.toString();
|
||||
|
||||
if (categoryId != "0") {
|
||||
await prisma.category.findUnique({ where: { id: categoryId }, include: { articles: true, svg: true } }).then(
|
||||
(result: CategoryWithIncludes | null) => {
|
||||
if (result) {
|
||||
category = JSON.parse(JSON.stringify(result));
|
||||
} else {
|
||||
// TODO redirect to /0
|
||||
}
|
||||
},
|
||||
(reason: any) => {
|
||||
console.log(reason);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
props: { category: category }, // will be passed to the page component as props
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user