plane/web/components/issues/issue-layouts/empty-states/archived-issues.tsx
Anmol Singh Bhatia a08f401452
[WEB-630] refactor: empty state (#3858)
* refactor: empty state global config file added and empty state component refactor

* refactor: empty state component refactor

* chore: empty state refactor

* chore: empty state config file updated

* chore: empty state action button permission logic updated

* chore: empty state config file updated

* chore: cycle and module empty filter state updated

* chore: empty state asset updated

* chore: empty state config file updated

* chore: empty state config file updated

* chore: empty state component improvement

* chore: empty state action button improvement

* fix: merge conflict
2024-03-06 20:16:54 +05:30

59 lines
2.0 KiB
TypeScript

import size from "lodash/size";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// hooks
import { useIssues } from "hooks/store";
// components
import { EmptyState } from "components/empty-state";
// constants
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
import { EmptyStateType } from "constants/empty-state";
// types
import { IIssueFilterOptions } from "@plane/types";
export const ProjectArchivedEmptyState: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// theme
// store hooks
const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
const userFilters = issuesFilter?.issueFilters?.filters;
const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
const issueFilterCount = size(
Object.fromEntries(
Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
)
);
const handleClearAllFilters = () => {
if (!workspaceSlug || !projectId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters ?? {}).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
...newFilters,
});
};
const emptyStateType =
issueFilterCount > 0 ? EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER : EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES;
const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
return (
<div className="relative h-full w-full overflow-y-auto">
<EmptyState
type={emptyStateType}
additionalPath={additionalPath}
primaryButtonLink={
issueFilterCount > 0 ? undefined : `/${workspaceSlug}/projects/${projectId}/settings/automations`
}
secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
/>
</div>
);
});