fix: project wrapper (#2589)

* fix: project wrapper * fix: project wrapper for unjoined project * chore: update store structure
2024-06-14 14:31:34 +00:00 · 2023-11-01 17:10:10 +05:30 · 2023-11-01 17:10:10 +05:30 · 13ead7c314
commit 13ead7c314
parent 4fcc4b4a01
6 changed files with 204 additions and 181 deletions
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@ -1,23 +1,20 @@
 import { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { mutate } from "swr";
-// services
-import { ProjectService } from "services/project";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { Button } from "@plane/ui";
 // icons
 import { ClipboardList } from "lucide-react";
 // images
 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 = () => {
  const [isJoiningProject, setIsJoiningProject] = useState(false);

+  const { project: projectStore } = useMobxStore();
+
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

@ -25,16 +22,10 @@ export const JoinProject: React.FC = () => {
    if (!workspaceSlug || !projectId) return;

    setIsJoiningProject(true);
-    projectService
-      .joinProject(workspaceSlug as string, [projectId as string])
-      .then(async () => {
-        await mutate(USER_PROJECT_VIEW(projectId.toString()));
-        setIsJoiningProject(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsJoiningProject(false);
-      });
+
+    projectStore.joinProject(workspaceSlug.toString(), [projectId.toString()]).finally(() => {
+      setIsJoiningProject(false);
+    });
  };

  return (
--- a/web/components/project/card.tsx
+++ b/web/components/project/card.tsx
@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@ -95,136 +94,136 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
      )}

      {/* Card Information */}
-      <div className="flex flex-col rounded bg-custom-background-100 border border-custom-border-200">
-        <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
-          <a>
-            <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" />
+      <div
+        onClick={() => {
+          if (project.is_member) router.push(`/${workspaceSlug?.toString()}/projects/${project.id}/issues`);
+          else setJoinProjectModal(true);
+        }}
+        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
-                src={
-                  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"
-                }
-                alt={project.name}
-                className="absolute top-0 left-0 h-full w-full object-cover rounded-t"
-              />
+          <img
+            src={
+              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"
+            }
+            alt={project.name}
+            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="flex items-center gap-2.5">
-                  <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">
-                      {project.emoji
-                        ? renderEmoji(project.emoji)
-                        : project.icon_prop
-                        ? renderEmoji(project.icon_prop)
-                        : null}
-                    </span>
-                  </div>
+          <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="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
+                <span className="flex items-center justify-center">
+                  {project.emoji
+                    ? renderEmoji(project.emoji)
+                    : project.icon_prop
+                    ? renderEmoji(project.icon_prop)
+                    : null}
+                </span>
+              </div>

-                  <div className="flex flex-col gap-0.5 justify-center h-9">
-                    <h3 className="text-white font-semibold line-clamp-1">{project.name}</h3>
-                    <span className="flex items-center gap-1.5">
-                      <p className="text-xs font-medium text-white">{project.identifier} </p>
-                      {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
-                    </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 className="flex flex-col gap-0.5 justify-center h-9">
+                <h3 className="text-white font-semibold line-clamp-1">{project.name}</h3>
+                <span className="flex items-center gap-1.5">
+                  <p className="text-xs font-medium text-white">{project.identifier} </p>
+                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                </span>
              </div>
            </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"
+            <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();
                  }
-                  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>
+                }}
+              >
+                <Star
+                  className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
+                />
+              </button>
            </div>
-          </a>
-        </Link>
+          </div>
+        </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>
    </>
  );
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@ -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
-  if (!userStore.projectMemberInfo && userStore.hasPermissionToProject === null) {
+  if (!userStore.projectMemberInfo && projectId && userStore.hasPermissionToProject[projectId.toString()] === null)
    return (
      <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">
@ -113,32 +116,31 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
        </div>
      </div>
    );
-  }

  // check if the user don't have permission to access the project
-  if (userStore.hasPermissionToProject === false && !userStore.projectNotFound) {
-    <JoinProject />;
-  }
+  if (projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
+    return <JoinProject />;

  // check if the project info is not found.
-  if (userStore.hasPermissionToProject === false && userStore.projectNotFound) {
-    <div className="container grid h-screen place-items-center bg-custom-background-100">
-      <EmptyState
-        title="No such project exists"
-        description="Try creating a new project"
-        image={emptyProject}
-        primaryButton={{
-          text: "Create Project",
-          onClick: () => {
-            const e = new KeyboardEvent("keydown", {
-              key: "p",
-            });
-            document.dispatchEvent(e);
-          },
-        }}
-      />
-    </div>;
-  }
+  if (!projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
+    return (
+      <div className="container grid h-screen place-items-center bg-custom-background-100">
+        <EmptyState
+          title="No such project exists"
+          description="Try creating a new project"
+          image={emptyProject}
+          primaryButton={{
+            text: "Create Project",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "p",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      </div>
+    );

  return <>{children}</>;
 });
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@ -43,7 +43,11 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
  );

  // while data is being loaded
-  if (!userStore.workspaceMemberInfo && userStore.hasPermissionToWorkspace === null) {
+  if (
+    !userStore.workspaceMemberInfo &&
+    workspaceSlug &&
+    userStore.hasPermissionToWorkspace[workspaceSlug.toString()] === null
+  ) {
    return (
      <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">
@ -53,7 +57,11 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
    );
  }
  // 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 (
      <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
        <div className="grid h-full place-items-center p-4">
--- a/web/store/project/project.store.ts
+++ b/web/store/project/project.store.ts
@ -522,6 +522,11 @@ export class ProjectStore implements IProjectStore {
  };

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

      runInAction(() => {
+        this.rootStore.user.hasPermissionToProject = {
+          ...this.rootStore.user.hasPermissionToProject,
+          ...newPermissions,
+        };
        this.loader = false;
        this.error = null;
      });
--- a/web/store/user.store.ts
+++ b/web/store/user.store.ts
@ -18,11 +18,14 @@ export interface IUserStore {
  dashboardInfo: any;

  workspaceMemberInfo: IWorkspaceMemberMe | null;
-  hasPermissionToWorkspace: boolean | null;
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean | null;
+  };

  projectMemberInfo: IProjectMember | null;
-  projectNotFound: boolean;
-  hasPermissionToProject: boolean | null;
+  hasPermissionToProject: {
+    [projectId: string]: boolean | null;
+  };

  fetchCurrentUser: () => Promise<IUser>;
  fetchCurrentUserSettings: () => Promise<IUserSettings>;
@ -46,11 +49,14 @@ class UserStore implements IUserStore {
  dashboardInfo: any = null;

  workspaceMemberInfo: IWorkspaceMemberMe | null = null;
-  hasPermissionToWorkspace: boolean | null = null;
+  hasPermissionToWorkspace: {
+    [workspaceSlug: string]: boolean | null;
+  } = {};

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

      runInAction(() => {
        this.projectMemberInfo = response;
-        this.hasPermissionToWorkspace = true;
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: true,
+        };
      });
      return response;
    } catch (error: any) {
      runInAction(() => {
-        this.hasPermissionToWorkspace = false;
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: false,
+        };
      });
-      if (error?.status === 404) {
-        runInAction(() => {
-          this.projectNotFound = true;
-        });
-      }
+
      throw error;
    }
  };