forked from github/plane
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import Image from "next/image";
|
|
// types
|
|
import { TPageNavigationTabs } from "@plane/types";
|
|
// components
|
|
import { EmptyState } from "@/components/empty-state";
|
|
import { PageLoader } from "@/components/pages";
|
|
// constants
|
|
import { EmptyStateType } from "@/constants/empty-state";
|
|
// hooks
|
|
import { useApplication, useProjectPages } from "@/hooks/store";
|
|
// assets
|
|
import AllFiltersImage from "public/empty-state/pages/all-filters.svg";
|
|
import NameFilterImage from "public/empty-state/pages/name-filter.svg";
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
pageType: TPageNavigationTabs;
|
|
projectId: string;
|
|
};
|
|
|
|
export const PagesListMainContent: React.FC<Props> = observer((props) => {
|
|
const { children, pageType, projectId } = props;
|
|
// store hooks
|
|
const { loader, getCurrentProjectFilteredPageIds, getCurrentProjectPageIds, filters } = useProjectPages(projectId);
|
|
const { commandPalette: commandPaletteStore } = useApplication();
|
|
// derived values
|
|
const pageIds = getCurrentProjectPageIds(pageType);
|
|
const filteredPageIds = getCurrentProjectFilteredPageIds(pageType);
|
|
|
|
if (loader === "init-loader") return <PageLoader />;
|
|
// if no pages exist in the active page type
|
|
if (pageIds?.length === 0) {
|
|
if (pageType === "public")
|
|
return (
|
|
<EmptyState
|
|
type={EmptyStateType.PROJECT_PAGE_PUBLIC}
|
|
primaryButtonOnClick={() => {
|
|
commandPaletteStore.toggleCreatePageModal(true);
|
|
}}
|
|
/>
|
|
);
|
|
if (pageType === "private")
|
|
return (
|
|
<EmptyState
|
|
type={EmptyStateType.PROJECT_PAGE_PRIVATE}
|
|
primaryButtonOnClick={() => {
|
|
commandPaletteStore.toggleCreatePageModal(true);
|
|
}}
|
|
/>
|
|
);
|
|
if (pageType === "archived") return <EmptyState type={EmptyStateType.PROJECT_PAGE_ARCHIVED} />;
|
|
}
|
|
// if no pages match the filter criteria
|
|
if (filteredPageIds?.length === 0)
|
|
return (
|
|
<div className="h-full w-full grid place-items-center">
|
|
<div className="text-center">
|
|
<Image
|
|
src={filters.searchQuery.length > 0 ? NameFilterImage : AllFiltersImage}
|
|
className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
|
|
alt="No matching modules"
|
|
/>
|
|
<h5 className="text-xl font-medium mt-7 mb-1">No matching pages</h5>
|
|
<p className="text-custom-text-400 text-base">
|
|
{filters.searchQuery.length > 0
|
|
? "Remove the search criteria to see all pages"
|
|
: "Remove the filters to see all pages"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return <div className="h-full w-full overflow-hidden">{children}</div>;
|
|
});
|