refactor: enhance workspace and project wrapper modularity (#6207)

This commit is contained in:
Prateek Shourya 2024-12-16 19:01:37 +05:30 committed by GitHub
parent 438cc33046
commit 4507802aba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 62 additions and 30 deletions

View file

@ -120,11 +120,11 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
updateMemberInvitation(workspaceSlug.toString(), invitationDetails.id, {
role: value,
}).catch(() => {
}).catch((error) => {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "An error occurred while updating member role. Please try again.",
message: error?.error || "An error occurred while updating member role. Please try again.",
});
});
}}

View file

@ -34,12 +34,14 @@ import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/u
interface IProjectAuthWrapper {
children: ReactNode;
isLoading?: boolean;
}
export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
const { children } = props;
// store
// const { fetchInboxes } = useInbox();
const { children, isLoading: isParentLoading = false } = props;
// router
const { workspaceSlug, projectId } = useParams();
// store hooks
const { toggleCreateProjectModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();
const { fetchUserProjectInfo, allowPermissions, projectUserInfo } = useUserPermissions();
@ -54,14 +56,20 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
const { fetchProjectStates, fetchProjectStateTransitions } = useProjectState();
const { fetchProjectLabels } = useLabel();
const { getProjectEstimates } = useProjectEstimates();
// router
const { workspaceSlug, projectId } = useParams();
// derived values
const projectExists = projectId ? getProjectById(projectId.toString()) : null;
const projectMemberInfo = projectUserInfo?.[workspaceSlug?.toString()]?.[projectId?.toString()];
const hasPermissionToCurrentProject = allowPermissions(
[EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
EUserPermissionsLevel.PROJECT,
workspaceSlug.toString(),
projectId?.toString()
);
// Initialize module timeline chart
useEffect(() => {
initGantt();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useSWR(
@ -143,17 +151,8 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
{ revalidateIfStale: false, revalidateOnFocus: false }
);
// derived values
const projectExists = projectId ? getProjectById(projectId.toString()) : null;
const hasPermissionToCurrentProject = allowPermissions(
[EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
EUserPermissionsLevel.PROJECT,
workspaceSlug.toString(),
projectId?.toString()
);
// check if the project member apis is loading
if (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null)
if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
return (
<div className="grid h-screen place-items-center bg-custom-background-100 p-4">
<div className="flex flex-col items-center gap-3 text-center">

View file

@ -8,11 +8,12 @@ import { useParams } from "next/navigation";
import { useTheme } from "next-themes";
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
// ui
import { LogOut } from "lucide-react";
// hooks
import { Button, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
// components
import { LogoSpinner } from "@/components/common";
// hooks
import { useMember, useProject, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
import { useFavorite } from "@/hooks/store/use-favorite";
import { usePlatformOS } from "@/hooks/use-platform-os";
@ -25,12 +26,13 @@ import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo
import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
import WorkSpaceNotAvailable from "@/public/workspace/workspace-not-available.png";
export interface IWorkspaceAuthWrapper {
interface IWorkspaceAuthWrapper {
children: ReactNode;
isLoading?: boolean;
}
export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
const { children } = props;
const { children, isLoading: isParentLoading = false } = props;
// router params
const { workspaceSlug } = useParams();
// next themes
@ -51,11 +53,11 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
EUserPermissionsLevel.WORKSPACE
);
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
const allWorkspaces = workspaces ? Object.values(workspaces) : undefined;
const currentWorkspace =
(allWorkspaces && allWorkspaces.find((workspace) => workspace?.slug === workspaceSlug)) || undefined;
const currentWorkspaceInfo = workspaceSlug && workspaceInfoBySlug(workspaceSlug.toString());
// fetching user workspace information
useSWR(
@ -116,11 +118,8 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
);
};
// derived values
const currentWorkspaceInfo = workspaceSlug && workspaceInfoBySlug(workspaceSlug.toString());
// if list of workspaces are not there then we have to render the spinner
if (allWorkspaces === undefined || loader || isDBInitializing) {
if (isParentLoading || allWorkspaces === undefined || loader || isDBInitializing) {
return (
<div className="grid h-screen place-items-center bg-custom-background-100 p-4">
<div className="flex flex-col items-center gap-3 text-center">