[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
This commit is contained in:
parent
4861be2773
commit
a08f401452
32 changed files with 759 additions and 1155 deletions
|
|
@ -1,20 +1,18 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { useTheme } from "next-themes";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
|
||||
import { IssuePeekOverview, ProfileIssuesAppliedFiltersRoot } from "components/issues";
|
||||
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
|
||||
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
|
||||
import { KanbanLayoutLoader, ListLayoutLoader } from "components/ui";
|
||||
import { EmptyState } from "components/empty-state";
|
||||
// hooks
|
||||
import { PROFILE_EMPTY_STATE_DETAILS } from "constants/empty-state";
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
import { useIssues, useUser } from "hooks/store";
|
||||
import { useIssues } from "hooks/store";
|
||||
// constants
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
import { EMPTY_STATE_DETAILS } from "constants/empty-state";
|
||||
|
||||
interface IProfileIssuesPage {
|
||||
type: "assigned" | "subscribed" | "created";
|
||||
|
|
@ -28,13 +26,7 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
|
|||
workspaceSlug: string;
|
||||
userId: string;
|
||||
};
|
||||
// theme
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
currentUser,
|
||||
} = useUser();
|
||||
const {
|
||||
issues: { loader, groupedIssueIds, fetchIssues, setViewId },
|
||||
issuesFilter: { issueFilters, fetchFilters },
|
||||
|
|
@ -55,26 +47,15 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
|
|||
{ revalidateIfStale: false, revalidateOnFocus: false }
|
||||
);
|
||||
|
||||
const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light";
|
||||
const emptyStateImage = getEmptyStateImagePath("profile", type, isLightMode);
|
||||
|
||||
const activeLayout = issueFilters?.displayFilters?.layout || undefined;
|
||||
|
||||
const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
|
||||
const emptyStateType = `profile-${type}`;
|
||||
|
||||
if (!groupedIssueIds || loader === "init-loader")
|
||||
return <>{activeLayout === "list" ? <ListLayoutLoader /> : <KanbanLayoutLoader />}</>;
|
||||
|
||||
if (groupedIssueIds.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
image={emptyStateImage}
|
||||
title={PROFILE_EMPTY_STATE_DETAILS[type].title}
|
||||
description={PROFILE_EMPTY_STATE_DETAILS[type].description}
|
||||
size="sm"
|
||||
disabled={!isEditingAllowed}
|
||||
/>
|
||||
);
|
||||
return <EmptyState type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS} size="sm" />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue