plane/web/components/pages/pages-list/recent-pages-list.tsx
2024-01-29 20:38:32 +05:30

81 lines
2.8 KiB
TypeScript

import React, { FC } from "react";
import { observer } from "mobx-react-lite";
import { useTheme } from "next-themes";
// hooks
import { useApplication, useUser } from "hooks/store";
import { useProjectPages } from "hooks/store/use-project-specific-pages";
// components
import { PagesListView } from "components/pages/pages-list";
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
// ui
import { Loader } from "@plane/ui";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// constants
import { EUserProjectRoles } from "constants/project";
export const RecentPagesList: FC = observer(() => {
// theme
const { resolvedTheme } = useTheme();
// store hooks
const { commandPalette: commandPaletteStore } = useApplication();
const {
membership: { currentProjectRole },
currentUser,
} = useUser();
const { recentProjectPages } = useProjectPages();
const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
const EmptyStateImagePath = getEmptyStateImagePath("pages", "recent", isLightMode);
// FIXME: replace any with proper type
const isEmpty = recentProjectPages && Object.values(recentProjectPages).every((value: any) => value.length === 0);
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
if (!recentProjectPages) {
return (
<Loader className="space-y-4">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />
</Loader>
);
}
return (
<>
{Object.keys(recentProjectPages).length > 0 && !isEmpty ? (
<>
{Object.keys(recentProjectPages).map((key) => {
if (recentProjectPages[key]?.length === 0) return null;
return (
<div key={key}>
<h2 className="sticky top-0 z-[1] mb-2 bg-custom-background-100 text-xl font-semibold capitalize">
{replaceUnderscoreIfSnakeCase(key)}
</h2>
<PagesListView pageIds={recentProjectPages[key]} />
</div>
);
})}
</>
) : (
<>
<EmptyState
title="Write a note, a doc, or a full knowledge base"
description="Pages help you organise your thoughts to create wikis, discussions or even document heated takes for your project. Use it wisely! Pages will be sorted and grouped by last updated."
image={EmptyStateImagePath}
primaryButton={{
text: "Create new page",
onClick: () => commandPaletteStore.toggleCreatePageModal(true),
}}
size="sm"
disabled={!isEditingAllowed}
/>
</>
)}
</>
);
});