66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
import { useState } from "react";
|
|
import { MdAddBox } from "react-icons/md";
|
|
import { addCategory } from "../api/admin";
|
|
|
|
export default function CategoryForm({ visible, onAddCategory }) {
|
|
const [category, setCategory] = useState("");
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (!category.trim()) {
|
|
document.getElementById("noti").innerHTML = "Category name is missing!";
|
|
document
|
|
.getElementById("noti")
|
|
.classList.add("bg-red-200", "text-red-500");
|
|
document.getElementById("noti").classList.remove("opacity-0");
|
|
return;
|
|
}
|
|
addCategory(category)
|
|
.then((message) => {
|
|
document
|
|
.getElementById("noti")
|
|
.classList.remove("opacity-0", "bg-red-200", "text-red-500");
|
|
document
|
|
.getElementById("noti")
|
|
.classList.add("bg-emerald-200", "text-emerald-800");
|
|
document.getElementById("noti").innerHTML = `${message.message}`;
|
|
setCategory("");
|
|
onAddCategory();
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
const handleChange = ({ target }) => {
|
|
setCategory(target.value);
|
|
if (target.value.trim())
|
|
document.getElementById("noti").classList.add("opacity-0");
|
|
};
|
|
|
|
if (!visible) return;
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} action="" className="flex p-2 items-center">
|
|
<label htmlFor="category" className="text-emerald-700">
|
|
Category:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="border border-emerald-700 ml-2 rounded-sm focus:bg-emerald-100 text-emerald-900"
|
|
name="category"
|
|
id="category"
|
|
onChange={handleChange}
|
|
value={category}
|
|
/>
|
|
<button type="submit" className="text-2xl pl-1 text-emerald-700">
|
|
<MdAddBox className="text-3xl" />
|
|
</button>
|
|
<p
|
|
id="noti"
|
|
className="text-red-500 bg-red-200 px-2 rounded-sm opacity-0 mx-2"
|
|
></p>
|
|
</form>
|
|
);
|
|
}
|