plane/web/components/pages/pages-list/list-view.tsx
sriram veeraghanta 8d15b9e7de
chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:48:10 +05:30

86 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { PagesListItem } from "./list-item";
import { NewEmptyState } from "components/common/new-empty-state";
// ui
import { Loader } from "@plane/ui";
// images
import emptyPage from "public/empty-state/empty_page.png";
// types
import { IPage } from "types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
type IPagesListView = {
pages: IPage[];
};
export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
// store
const {
user: { currentProjectRole },
commandPalette: { toggleCreatePageModal },
} = useMobxStore();
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const canUserCreatePage =
currentProjectRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentProjectRole);
const emptyStatePrimaryButton = canUserCreatePage
? {
primaryButton: {
icon: <Plus className="h-4 w-4" />,
text: "Create your first page",
onClick: () => toggleCreatePageModal(true),
},
}
: {};
return (
<>
{pages && workspaceSlug && projectId ? (
<div className="h-full space-y-4 overflow-y-auto">
{pages.length > 0 ? (
<ul role="list" className="divide-y divide-custom-border-200">
{pages.map((page) => (
<PagesListItem
key={page.id}
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
page={page}
/>
))}
</ul>
) : (
<NewEmptyState
title="Write a note, a doc, or a full knowledge base. Get Galileo, Planes AI assistant, to help you get started."
description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your projects context. To make short work of any doc, invoke Galileo, Planes AI, with a shortcut or the click of a button."
image={emptyPage}
comicBox={{
title: "A page can be a doc or a doc of docs.",
description:
"We wrote Parth and Meeras love story. You could write your projects mission, goals, and eventual vision.",
direction: "right",
}}
{...emptyStatePrimaryButton}
/>
)}
</div>
) : (
<Loader className="space-y-4">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
)}
</>
);
});