Initial commit: dashboard
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,222 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import CategoryTreeSelect from "@/components/CategoryTreeSelect";
|
||||
import {
|
||||
FeaturedImageField,
|
||||
TagsField,
|
||||
type LocalImage,
|
||||
} from "@/components/catalog/CatalogFormFields";
|
||||
import RichTextArea from "@/components/RichTextArea";
|
||||
import type { MeshkeeCategory } from "@/services/meshkee-categories";
|
||||
import { uploadWebsiteMedia } from "@/services/website-media";
|
||||
import {
|
||||
createWebsiteBlogPost,
|
||||
listWebsiteBlogCategories,
|
||||
type WebsiteBlogCategory,
|
||||
} from "@/services/website-blog";
|
||||
import styles from "@/components/catalog/CatalogForm.module.css";
|
||||
import local from "./WebsiteBlogForm.module.css";
|
||||
|
||||
export default function WebsiteBlogForm() {
|
||||
const router = useRouter();
|
||||
const [categories, setCategories] = useState<WebsiteBlogCategory[]>([]);
|
||||
const [categoryId, setCategoryId] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [abstract, setAbstract] = useState("");
|
||||
const [mainTextHtml, setMainTextHtml] = useState("");
|
||||
const [image, setImage] = useState<LocalImage | null>(null);
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
try {
|
||||
const items = await listWebsiteBlogCategories();
|
||||
if (!cancelled) setCategories(items);
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Could not load categories.",
|
||||
);
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function onSubmit(event?: React.FormEvent) {
|
||||
event?.preventDefault();
|
||||
if (!title.trim()) {
|
||||
setError("Enter a title.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setError("");
|
||||
try {
|
||||
if (!categoryId) {
|
||||
setError("Choose a category.");
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let imageUrl: string | undefined;
|
||||
if (image?.file) {
|
||||
imageUrl = await uploadWebsiteMedia(image.file);
|
||||
}
|
||||
|
||||
await createWebsiteBlogPost({
|
||||
title: title.trim(),
|
||||
categoryId,
|
||||
abstract: abstract.trim() || undefined,
|
||||
mainTextHtml: mainTextHtml || undefined,
|
||||
imageUrl,
|
||||
tags,
|
||||
});
|
||||
router.push("/website/blog");
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Could not create post.");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
const busy = saving;
|
||||
const treeCategories: MeshkeeCategory[] = categories.map((item) => ({
|
||||
id: item.id,
|
||||
parentId: item.parentId,
|
||||
name: item.name,
|
||||
nameFa: null,
|
||||
slug: "",
|
||||
description: null,
|
||||
icon: null,
|
||||
sortOrder: 0,
|
||||
tags: [],
|
||||
}));
|
||||
|
||||
return (
|
||||
<form className={styles.page} onSubmit={onSubmit}>
|
||||
<header className={styles.head}>
|
||||
<div>
|
||||
<nav className={styles.breadcrumb} aria-label="Breadcrumb">
|
||||
<Link href="/">Home</Link>
|
||||
<span className={styles.breadcrumbSep} aria-hidden>
|
||||
/
|
||||
</span>
|
||||
<Link href="/website/blog">Blog</Link>
|
||||
<span className={styles.breadcrumbSep} aria-hidden>
|
||||
/
|
||||
</span>
|
||||
<span className={styles.breadcrumbCurrent}>Add</span>
|
||||
</nav>
|
||||
<h1 className={styles.title}>Add blog post</h1>
|
||||
<p className={styles.lead}>
|
||||
Publish a story on the IranBay website.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.headActions}>
|
||||
<Link href="/website/blog" className={`outline-btn ${styles.ghostBtn}`}>
|
||||
Back
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
className={`outline-btn ${styles.saveBtn}`}
|
||||
disabled={busy}
|
||||
>
|
||||
{saving ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error ? (
|
||||
<div className={styles.errorBox} role="alert">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className={styles.layout}>
|
||||
<section className={styles.card}>
|
||||
<h2 className={styles.sectionTitle}>Post</h2>
|
||||
<div className={local.beside}>
|
||||
<FeaturedImageField
|
||||
label="Image"
|
||||
value={image}
|
||||
aspect={3 / 2}
|
||||
disabled={busy}
|
||||
onChange={setImage}
|
||||
/>
|
||||
<div className={styles.stack}>
|
||||
<CategoryTreeSelect
|
||||
categories={treeCategories}
|
||||
value={categoryId ? [categoryId] : []}
|
||||
selection="single"
|
||||
label="Category"
|
||||
placeholder="Select category"
|
||||
disabled={busy}
|
||||
onChange={(ids) => setCategoryId(ids[0] ?? "")}
|
||||
/>
|
||||
|
||||
<label className={styles.field}>
|
||||
<span>Title</span>
|
||||
<input
|
||||
value={title}
|
||||
disabled={busy}
|
||||
required
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className={styles.field}>
|
||||
<span>Abstract</span>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={abstract}
|
||||
disabled={busy}
|
||||
onChange={(event) => setAbstract(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.card}>
|
||||
<h2 className={styles.sectionTitle}>Content</h2>
|
||||
<div className={styles.stack}>
|
||||
<div className={styles.richField}>
|
||||
<RichTextArea
|
||||
label="Main text"
|
||||
value={mainTextHtml}
|
||||
onChange={setMainTextHtml}
|
||||
disabled={busy}
|
||||
minHeight={280}
|
||||
onUploadImage={uploadWebsiteMedia}
|
||||
/>
|
||||
</div>
|
||||
<TagsField tags={tags} disabled={busy} onChange={setTags} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className={styles.footerActions}>
|
||||
<Link href="/website/blog" className={`outline-btn ${styles.ghostBtn}`}>
|
||||
Cancel
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
className={`outline-btn ${styles.saveBtn}`}
|
||||
disabled={busy}
|
||||
>
|
||||
{saving ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user