Use ant design's List
component to render list of categories
Server
// route
router.get("/categories", read);
// controller
exports.read = async (req, res) => {
try {
const categories = await Category.find().sort({ createdAt: -1 });
res.json(categories);
} catch (err) {
console.log(err);
}
};
Client
// pages/admin/categories/index
import { useState, useEffect } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Typography, Form, Input, Button, List } from "antd";
import { EditOutlined } from "@ant-design/icons";
import axios from "axios";
import toast from "react-hot-toast";
const Categories = () => {
// state
const [loading, setLoading] = useState(false);
const [categories, setCategories] = useState([]);
// hooks
const [form] = Form.useForm();
useEffect(() => {
const getCategories = async () => {
try {
const { data } = await axios.get("/categories");
console.log(data);
setCategories(data);
} catch (err) {
console.log(err);
}
};
// execute
getCategories();
}, []);
const onFinish = async (values) => {
try {
console.log(values);
setLoading(true);
const { data } = await axios.post("/category", values);
setCategories([...categories, data]);
form.resetFields(["name"]);
setLoading(false);
toast.success("Category created successfully");
} catch (err) {
toast.error("Duplicate error. Try different name.");
console.log(err);
setLoading(false);
}
};
const handleEdit = (item) => {
console.log("edit", item);
};
const handleDelete = (item) => {
console.log("delete", item);
};
return (
<AdminLayout>
<Row>
<Col sm={22} lg={10} offset={1}>
<h2>Categories</h2>
<p>Add New Category</p>
<Form onFinish={onFinish} form={form}>
<Form.Item
name="name"
rules={[
{
required: true,
message: "Please give it a name!",
},
]}
hasFeedback
>
<Input prefix={<EditOutlined />} placeholder="Name" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading}>
Create
</Button>
</Form.Item>
</Form>
</Col>
<Col sm={22} lg={10} offset={1}>
<List
itemLayout="horizontal"
dataSource={categories}
renderItem={(item) => (
<List.Item
actions={[
<a onClick={() => handleEdit(item)}>edit</a>,
<a onClick={() => handleDelete(item)}>delete</a>,
]}
>
<List.Item.Meta title={item.name} />
</List.Item>
)}
/>
List {JSON.stringify(categories, null, 4)}
</Col>
</Row>
</AdminLayout>
);
};
export default Categories;