diff --git a/app/admin/articles/page.tsx b/app/admin/articles/page.tsx
index e0726fa..0b1fa07 100644
--- a/app/admin/articles/page.tsx
+++ b/app/admin/articles/page.tsx
@@ -1,10 +1,12 @@
+"use client";
+
import React from "react";
function AdminArticlesPage() {
return (
);
diff --git a/app/admin/categories/create/page.tsx b/app/admin/categories/create/page.tsx
deleted file mode 100644
index ad5db93..0000000
--- a/app/admin/categories/create/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export default function AdminCategoriesCreate() {
- return (
-
-
Create a new category
-
- );
-}
diff --git a/app/admin/categories/editor/[categoryId]/layout.tsx b/app/admin/categories/editor/[categoryId]/layout.tsx
new file mode 100644
index 0000000..6eb6e0a
--- /dev/null
+++ b/app/admin/categories/editor/[categoryId]/layout.tsx
@@ -0,0 +1,3 @@
+export default async function Layout({ children }) {
+ return {children}
;
+}
diff --git a/app/admin/categories/editor/[categoryId]/page.tsx b/app/admin/categories/editor/[categoryId]/page.tsx
new file mode 100644
index 0000000..0233c64
--- /dev/null
+++ b/app/admin/categories/editor/[categoryId]/page.tsx
@@ -0,0 +1,180 @@
+"use client";
+import React, { useRef, useState } from "react";
+import styles from "../../../../../styles/modules/CategoryEditor.module.scss";
+import { Prisma } from "@prisma/client";
+import "../../../../../styles/inputs.scss";
+import "../../../../../styles/buttons.scss";
+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";
+
+type CategoryWithSvg = Prisma.CategoryGetPayload<{ include: { svg: true } }>;
+
+export default function CategoryEditor({ params }: { params: { categoryId: string } }) {
+ const router = useRouter();
+ const [title, setTitle] = useState("");
+ const [color, setColor] = useState("");
+ const [svgViewbox, setSvgViewbox] = useState("");
+ const [svgPath, setSvgPath] = useState("");
+
+ const titleRef = useRef(null);
+ const colorRef = useRef(null);
+ const svgViewboxRef = useRef(null);
+ const svgPathRef = useRef(null);
+ const errorTextRef = useRef(null);
+ function handleFormChange() {
+ setTitle(titleRef.current.value);
+ setColor(colorRef.current.value);
+ setSvgPath(svgPathRef.current.value);
+ setSvgViewbox(svgViewboxRef.current.value);
+ }
+
+ async function handleResponse(res: Response) {
+ const json = await res.json();
+ errorTextRef.current.innerText = json.error ?? "";
+ if (json.success) {
+ router.push(urlJoin(`/articles/`));
+ }
+ }
+
+ async function updateCategory() {
+ console.log("Update category");
+ const payload: UpdateCategory = {
+ id: params.categoryId,
+ 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: "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);
+ }
+
+ useEffect(() => {
+ const fetchExistingCategory = async () => {
+ const result: Response = await fetch(urlJoin(apiUrl, `categories/${params.categoryId}`), {
+ cache: "no-cache",
+ });
+
+ const category = await result.json();
+ console.log(category);
+ if (category.code == "404") {
+ router.push(urlJoin(`/admin/categories/editor/0`));
+ } else {
+ titleRef.current.value = category.title;
+ colorRef.current.value = category.color;
+ svgPathRef.current.value = category.svg.path;
+ svgPathRef.current.value = category.svg.viewbox;
+
+ setTitle(category.title);
+ setColor(category.color);
+ setSvgPath(category.svg.path);
+ setSvgViewbox(category.svg.viewbox);
+ }
+ };
+
+ if (params.categoryId != "0") {
+ fetchExistingCategory().catch((err) => {
+ console.log(err);
+ });
+ }
+ }, []);
+
+ return (
+
+
{params.categoryId == "0" ? "Create new category" : "Update category"}
+
+
+
+
+
+