github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: project wrapper (#2589)

Browse Source 
* fix: project wrapper

* fix: project wrapper for unjoined project

* chore: update store structure
This commit is contained in:
Aaryan Khandelwal 2023-11-01 17:10:10 +05:30 committed by GitHub
parent 4fcc4b4a01
commit 13ead7c314
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 204 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/components/auth-screens/project/join-project.tsx
View File

@ -1,23 +1,20 @@
import { useState } from "react"; import { useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr"; // mobx store
// services import { useMobxStore } from "lib/mobx/store-provider";
import { ProjectService } from "services/project";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// icons // icons
import { ClipboardList } from "lucide-react"; import { ClipboardList } from "lucide-react";
// images // images
import JoinProjectImg from "public/auth/project-not-authorized.svg"; import JoinProjectImg from "public/auth/project-not-authorized.svg";
// fetch-keys
import { USER_PROJECT_VIEW } from "constants/fetch-keys";
const projectService = new ProjectService();
export const JoinProject: React.FC = () => { export const JoinProject: React.FC = () => {
const [isJoiningProject, setIsJoiningProject] = useState(false); const [isJoiningProject, setIsJoiningProject] = useState(false);
const { project: projectStore } = useMobxStore();
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -25,16 +22,10 @@ export const JoinProject: React.FC = () => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
setIsJoiningProject(true); setIsJoiningProject(true);
projectService
.joinProject(workspaceSlug as string, [projectId as string]) projectStore.joinProject(workspaceSlug.toString(), [projectId.toString()]).finally(() => {
.then(async () => { setIsJoiningProject(false);
await mutate(USER_PROJECT_VIEW(projectId.toString())); });
setIsJoiningProject(false);
})
.catch((err) => {
console.error(err);
setIsJoiningProject(false);
});
}; };
return ( return (

245
web/components/project/card.tsx
View File

@ -1,6 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root"; import { RootStore } from "store/root";
@ -95,136 +94,136 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
)} )}
{/* Card Information */} {/* Card Information */}
<div className="flex flex-col rounded bg-custom-background-100 border border-custom-border-200"> <div
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}> onClick={() => {
<a> if (project.is_member) router.push(`/${workspaceSlug?.toString()}/projects/${project.id}/issues`);
<div className="relative h-[118px] w-full rounded-t "> else setJoinProjectModal(true);
<div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/60 to-transparent" /> }}
className="flex flex-col rounded bg-custom-background-100 border border-custom-border-200 cursor-pointer"
>
<div className="relative h-[118px] w-full rounded-t ">
<div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/60 to-transparent" />
<img <img
src={ src={
project.cover_image ?? project.cover_image ??
"https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
} }
alt={project.name} alt={project.name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-t" className="absolute top-0 left-0 h-full w-full object-cover rounded-t"
/> />
<div className="absolute h-9 w-full bottom-4 z-10 flex items-center justify-between px-4"> <div className="absolute h-9 w-full bottom-4 z-10 flex items-center justify-between px-4">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0"> <div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
<span className="flex items-center justify-center"> <span className="flex items-center justify-center">
{project.emoji {project.emoji
? renderEmoji(project.emoji) ? renderEmoji(project.emoji)
: project.icon_prop : project.icon_prop
? renderEmoji(project.icon_prop) ? renderEmoji(project.icon_prop)
: null} : null}
</span> </span>
</div> </div>
<div className="flex flex-col gap-0.5 justify-center h-9"> <div className="flex flex-col gap-0.5 justify-center h-9">
<h3 className="text-white font-semibold line-clamp-1">{project.name}</h3> <h3 className="text-white font-semibold line-clamp-1">{project.name}</h3>
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<p className="text-xs font-medium text-white">{project.identifier} </p> <p className="text-xs font-medium text-white">{project.identifier} </p>
{project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />} {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
</span> </span>
</div>
</div>
<div className="flex items-center h-full gap-2">
<button
className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleCopyText();
}}
>
<LinkIcon className="h-3 w-3 text-white" />
</button>
<button
className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
onClick={(e) => {
if (project.is_favorite) {
e.preventDefault();
e.stopPropagation();
handleRemoveFromFavorites();
} else {
e.preventDefault();
e.stopPropagation();
handleAddToFavorites();
}
}}
>
<Star
className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
/>
</button>
</div>
</div> </div>
</div> </div>
<div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b"> <div className="flex items-center h-full gap-2">
<p className="text-sm text-custom-text-300 font-medium break-words line-clamp-2">{project.description}</p> <button
<div className="flex item-center justify-between"> className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
<Tooltip onClick={(e) => {
tooltipHeading="Members" e.stopPropagation();
tooltipContent={ e.preventDefault();
project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member" handleCopyText();
}}
>
<LinkIcon className="h-3 w-3 text-white" />
</button>
<button
className="flex items-center justify-center h-6 w-6 rounded bg-white/10"
onClick={(e) => {
if (project.is_favorite) {
e.preventDefault();
e.stopPropagation();
handleRemoveFromFavorites();
} else {
e.preventDefault();
e.stopPropagation();
handleAddToFavorites();
} }
position="top" }}
> >
{projectMembersIds.length > 0 ? ( <Star
<div className="flex items-center cursor-pointer gap-2 text-custom-text-200"> className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
<AvatarGroup showTooltip={false}> />
{projectMembersIds.map((memberId) => { </button>
const member = project.members?.find((m) => m.id === memberId);
if (!member) return null;
return (
<Avatar key={member.id} name={member.member__display_name} src={member.member__avatar} />
);
})}
</AvatarGroup>
</div>
) : (
<span className="text-sm italic text-custom-text-400">No Member Yet</span>
)}
</Tooltip>
{(isOwner || isMember) && (
<button
className="flex items-center justify-center p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200 rounded"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
router.push(`/${workspaceSlug}/projects/${project.id}/settings`);
}}
>
<Pencil className="h-3.5 w-3.5" />
</button>
)}
{!project.is_member ? (
<div className="flex items-center">
<Button
variant="link-primary"
className="!p-0"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setJoinProjectModal(true);
}}
>
Join
</Button>
</div>
) : null}
</div>
</div> </div>
</a> </div>
</Link> </div>
<div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b">
<p className="text-sm text-custom-text-300 font-medium break-words line-clamp-2">{project.description}</p>
<div className="flex item-center justify-between">
<Tooltip
tooltipHeading="Members"
tooltipContent={
project.members && project.members.length > 0 ? `${project.members.length} Members` : "No Member"
}
position="top"
>
{projectMembersIds.length > 0 ? (
<div className="flex items-center cursor-pointer gap-2 text-custom-text-200">
<AvatarGroup showTooltip={false}>
{projectMembersIds.map((memberId) => {
const member = project.members?.find((m) => m.id === memberId);
if (!member) return null;
return <Avatar key={member.id} name={member.member__display_name} src={member.member__avatar} />;
})}
</AvatarGroup>
</div>
) : (
<span className="text-sm italic text-custom-text-400">No Member Yet</span>
)}
</Tooltip>
{(isOwner || isMember) && (
<button
className="flex items-center justify-center p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200 rounded"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
router.push(`/${workspaceSlug}/projects/${project.id}/settings`);
}}
>
<Pencil className="h-3.5 w-3.5" />
</button>
)}
{!project.is_member ? (
<div className="flex items-center">
<Button
variant="link-primary"
className="!p-0"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setJoinProjectModal(true);
}}
>
Join
</Button>
</div>
) : null}
</div>
</div>
</div> </div>
</> </>
); );

48
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -104,8 +104,11 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
} }
); );
const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
const projectExists = projectId ? projectsList?.find((project) => project.id === projectId.toString()) : null;
// check if the project member apis is loading // check if the project member apis is loading
if (!userStore.projectMemberInfo && userStore.hasPermissionToProject === null) { if (!userStore.projectMemberInfo && projectId && userStore.hasPermissionToProject[projectId.toString()] === null)
return ( return (
<div className="grid h-screen place-items-center p-4 bg-custom-background-100"> <div className="grid h-screen place-items-center p-4 bg-custom-background-100">
<div className="flex flex-col items-center gap-3 text-center"> <div className="flex flex-col items-center gap-3 text-center">
@ -113,32 +116,31 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
</div> </div>
</div> </div>
); );
}
// check if the user don't have permission to access the project // check if the user don't have permission to access the project
if (userStore.hasPermissionToProject === false && !userStore.projectNotFound) { if (projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
<JoinProject />; return <JoinProject />;
}
// check if the project info is not found. // check if the project info is not found.
if (userStore.hasPermissionToProject === false && userStore.projectNotFound) { if (!projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
<div className="container grid h-screen place-items-center bg-custom-background-100"> return (
<EmptyState <div className="container grid h-screen place-items-center bg-custom-background-100">
title="No such project exists" <EmptyState
description="Try creating a new project" title="No such project exists"
image={emptyProject} description="Try creating a new project"
primaryButton={{ image={emptyProject}
text: "Create Project", primaryButton={{
onClick: () => { text: "Create Project",
const e = new KeyboardEvent("keydown", { onClick: () => {
key: "p", const e = new KeyboardEvent("keydown", {
}); key: "p",
document.dispatchEvent(e); });
}, document.dispatchEvent(e);
}} },
/> }}
</div>; />
} </div>
);
return <>{children}</>; return <>{children}</>;
}); });

12
web/layouts/auth-layout/workspace-wrapper.tsx
View File

@ -43,7 +43,11 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
); );
// while data is being loaded // while data is being loaded
if (!userStore.workspaceMemberInfo && userStore.hasPermissionToWorkspace === null) { if (
!userStore.workspaceMemberInfo &&
workspaceSlug &&
userStore.hasPermissionToWorkspace[workspaceSlug.toString()] === null
) {
return ( return (
<div className="grid h-screen place-items-center p-4 bg-custom-background-100"> <div className="grid h-screen place-items-center p-4 bg-custom-background-100">
<div className="flex flex-col items-center gap-3 text-center"> <div className="flex flex-col items-center gap-3 text-center">
@ -53,7 +57,11 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
); );
} }
// while user does not have access to view that workspace // while user does not have access to view that workspace
if (userStore.hasPermissionToWorkspace !== null && userStore.hasPermissionToWorkspace === false) { if (
userStore.hasPermissionToWorkspace !== null &&
workspaceSlug &&
userStore.hasPermissionToWorkspace[workspaceSlug.toString()] === false
) {
return ( return (
<div className={`h-screen w-full overflow-hidden bg-custom-background-100`}> <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
<div className="grid h-full place-items-center p-4"> <div className="grid h-full place-items-center p-4">

9
web/store/project/project.store.ts
View File

@ -522,6 +522,11 @@ export class ProjectStore implements IProjectStore {
}; };
joinProject = async (workspaceSlug: string, projectIds: string[]) => { joinProject = async (workspaceSlug: string, projectIds: string[]) => {
const newPermissions: { [projectId: string]: boolean } = {};
projectIds.forEach((projectId) => {
newPermissions[projectId] = true;
});
try { try {
this.loader = true; this.loader = true;
this.error = null; this.error = null;
@ -530,6 +535,10 @@ export class ProjectStore implements IProjectStore {
await this.fetchProjects(workspaceSlug); await this.fetchProjects(workspaceSlug);
runInAction(() => { runInAction(() => {
this.rootStore.user.hasPermissionToProject = {
...this.rootStore.user.hasPermissionToProject,
...newPermissions,
};
this.loader = false; this.loader = false;
this.error = null; this.error = null;
}); });

46
web/store/user.store.ts
View File

@ -18,11 +18,14 @@ export interface IUserStore {
dashboardInfo: any; dashboardInfo: any;
workspaceMemberInfo: IWorkspaceMemberMe | null; workspaceMemberInfo: IWorkspaceMemberMe | null;
hasPermissionToWorkspace: boolean | null; hasPermissionToWorkspace: {
[workspaceSlug: string]: boolean | null;
};
projectMemberInfo: IProjectMember | null; projectMemberInfo: IProjectMember | null;
projectNotFound: boolean; hasPermissionToProject: {
hasPermissionToProject: boolean | null; [projectId: string]: boolean | null;
};
fetchCurrentUser: () => Promise<IUser>; fetchCurrentUser: () => Promise<IUser>;
fetchCurrentUserSettings: () => Promise<IUserSettings>; fetchCurrentUserSettings: () => Promise<IUserSettings>;
@ -46,11 +49,14 @@ class UserStore implements IUserStore {
dashboardInfo: any = null; dashboardInfo: any = null;
workspaceMemberInfo: IWorkspaceMemberMe | null = null; workspaceMemberInfo: IWorkspaceMemberMe | null = null;
hasPermissionToWorkspace: boolean | null = null; hasPermissionToWorkspace: {
[workspaceSlug: string]: boolean | null;
} = {};
projectMemberInfo: IProjectMember | null = null; projectMemberInfo: IProjectMember | null = null;
projectNotFound: boolean = false; hasPermissionToProject: {
hasPermissionToProject: boolean | null = null; [projectId: string]: boolean | null;
} = {};
// root store // root store
rootStore; rootStore;
// services // services
@ -68,7 +74,6 @@ class UserStore implements IUserStore {
workspaceMemberInfo: observable.ref, workspaceMemberInfo: observable.ref,
hasPermissionToWorkspace: observable.ref, hasPermissionToWorkspace: observable.ref,
projectMemberInfo: observable.ref, projectMemberInfo: observable.ref,
projectNotFound: observable.ref,
hasPermissionToProject: observable.ref, hasPermissionToProject: observable.ref,
// action // action
fetchCurrentUser: action, fetchCurrentUser: action,
@ -128,14 +133,21 @@ class UserStore implements IUserStore {
fetchUserWorkspaceInfo = async (workspaceSlug: string) => { fetchUserWorkspaceInfo = async (workspaceSlug: string) => {
try { try {
const response = await this.workspaceService.workspaceMemberMe(workspaceSlug.toString()); const response = await this.workspaceService.workspaceMemberMe(workspaceSlug.toString());
runInAction(() => { runInAction(() => {
this.workspaceMemberInfo = response; this.workspaceMemberInfo = response;
this.hasPermissionToWorkspace = true; this.hasPermissionToWorkspace = {
...this.hasPermissionToWorkspace,
[workspaceSlug]: true,
};
}); });
return response; return response;
} catch (error) { } catch (error) {
runInAction(() => { runInAction(() => {
this.hasPermissionToWorkspace = false; this.hasPermissionToWorkspace = {
...this.hasPermissionToWorkspace,
[workspaceSlug]: false,
};
}); });
throw error; throw error;
} }
@ -147,18 +159,20 @@ class UserStore implements IUserStore {
runInAction(() => { runInAction(() => {
this.projectMemberInfo = response; this.projectMemberInfo = response;
this.hasPermissionToWorkspace = true; this.hasPermissionToProject = {
...this.hasPermissionToProject,
[projectId]: true,
};
}); });
return response; return response;
} catch (error: any) { } catch (error: any) {
runInAction(() => { runInAction(() => {
this.hasPermissionToWorkspace = false; this.hasPermissionToProject = {
...this.hasPermissionToProject,
[projectId]: false,
};
}); });
if (error?.status === 404) {
runInAction(() => {
this.projectNotFound = true;
});
}
throw error; throw error;
} }
}; };