plane/apps/app/components/pages/pages-list.tsx
Saheb Giri 4a81b988b4
feat: implemented new pages design with bare minimum functionality (#503)
* chore: add page types and page api service

* chore: add create, list, update and delete on pages

* chore: add create, delete and patch page blocks

* feat: add and remove pages to favorite

* fix: made neccessary changes

- used tailwind for hover events
- add error toast alert
- used partial for patch request

* fix: replace absolute positiong with a flex box

* fix: design list page view to match with ui

* feat: add top large textarea for page title and description

* refactor: add page label with types

* feat: add pages grid layout

* feat: add tabs and masonry layout

* fix: build errors

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-03-23 16:12:14 +05:30

66 lines
1.9 KiB
TypeScript

import { useState } from "react";
// components
import { DeletePageModal } from "components/pages";
import { Loader } from "components/ui";
// types
import { IPage } from "types";
import { SinglePageListItem } from "./single-page-list-item";
type TPagesListProps = {
pages: IPage[] | undefined;
setCreateUpdatePageModal: React.Dispatch<React.SetStateAction<boolean>>;
setSelectedPage: React.Dispatch<React.SetStateAction<any>>;
};
export const PagesList: React.FC<TPagesListProps> = ({
pages,
setCreateUpdatePageModal,
setSelectedPage,
}) => {
const [pageDeleteModal, setPageDeleteModal] = useState(false);
const [selectedPageForDelete, setSelectedPageForDelete] = useState<any>();
const handleDeletePage = (page: IPage) => {
setSelectedPageForDelete({ ...page, actionType: "delete" });
setPageDeleteModal(true);
};
const handleEditPage = (page: IPage) => {
setSelectedPage({ ...page, actionType: "edit" });
setCreateUpdatePageModal(true);
};
return (
<>
<DeletePageModal
isOpen={
pageDeleteModal &&
!!selectedPageForDelete &&
selectedPageForDelete.actionType === "delete"
}
setIsOpen={setPageDeleteModal}
data={selectedPageForDelete}
/>
{pages ? (
pages.length > 0 ? (
<ul role="list" className="divide-y divide-gray-200">
{pages.map((page) => (
<SinglePageListItem
page={page}
key={page.id}
handleDeletePage={() => handleDeletePage(page)}
handleEditPage={() => handleEditPage(page)}
/>
))}
</ul>
) : (
"No Pages found"
)
) : (
<Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
<Loader.Item height="200px" />
</Loader>
)}
</>
);
};