More code refactoring

Repeat the same process for editing posts as done with create new post in previous chapter.

To render the list of posts, move the List component to it's own component so that it can later be used to show a list of posts for both admin and author.

// components/posts/PostsList
import { List } from "antd";
import Link from "next/link";

const PostsList = ({ posts, handleDelete }) => {
  return (
    <List
      itemLayout="horizontal"
      dataSource={posts}
      renderItem={(item) => (
        <List.Item
          actions={[
            <Link href={`/admin/posts/${item.slug}`}>
              <a onClick={() => handleEdit(item)}>edit</a>
            </Link>,
            <a onClick={() => handleDelete(item)}>delete</a>,
          ]}
        >
          <List.Item.Meta title={item.title} />
        </List.Item>
      )}
    />
  );
};

export default PostsList;

Now import and use in admin/posts/index.s

<PostsList posts={posts} handleDelete={handleDelete} />

Do the same for categories too.