From 305b12f1923bdb6bebc9fc646655670bd4444604 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 31 Oct 2023 16:16:11 +0530
Subject: [PATCH 1/3] fix: project wrapper

---
 .../roots/project-layout-root.tsx             |  2 -
 .../issue-peek-overview/activity/card.tsx     |  2 -
 web/layouts/auth-layout/project-wrapper.tsx   | 48 ++++++++++---------
 web/store/user.store.ts                       |  9 ++--
 4 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
index 1826eb34446..0cd5911a56f 100644
--- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -33,8 +33,6 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
 
   const issueCount = issueStore.getIssuesCount;
 
-  console.log("issueCount", issueCount);
-
   return (
     <div className="relative w-full h-full flex flex-col overflow-hidden">
       <ProjectAppliedFiltersRoot />
diff --git a/web/components/issues/issue-peek-overview/activity/card.tsx b/web/components/issues/issue-peek-overview/activity/card.tsx
index 8fbf8605ad4..16ca0959587 100644
--- a/web/components/issues/issue-peek-overview/activity/card.tsx
+++ b/web/components/issues/issue-peek-overview/activity/card.tsx
@@ -34,8 +34,6 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
     issueCommentReactionRemove,
   } = props;
 
-  console.log("issueComments", issueComments);
-
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
index 91645222eb5..e7bae799372 100644
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -104,8 +104,12 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     }
   );
 
+  console.log("project member info", userStore.projectMemberInfo);
+  console.log("has permission to project", userStore.hasPermissionToProject);
+  console.log("project not found", userStore.projectNotFound);
+
   // check if the project member apis is loading
-  if (!userStore.projectMemberInfo && userStore.hasPermissionToProject === null) {
+  if (!userStore.projectMemberInfo && userStore.hasPermissionToProject === 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 +117,30 @@ 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 (userStore.hasPermissionToProject === false && userStore.projectNotFound !== true) 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 (userStore.hasPermissionToProject === false && userStore.projectNotFound)
+    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}</>;
 });
diff --git a/web/store/user.store.ts b/web/store/user.store.ts
index cbb86128827..b2070e56056 100644
--- a/web/store/user.store.ts
+++ b/web/store/user.store.ts
@@ -147,18 +147,19 @@ class UserStore implements IUserStore {
 
       runInAction(() => {
         this.projectMemberInfo = response;
-        this.hasPermissionToWorkspace = true;
+        this.hasPermissionToProject = true;
       });
       return response;
     } catch (error: any) {
       runInAction(() => {
-        this.hasPermissionToWorkspace = false;
+        this.hasPermissionToProject = false;
       });
-      if (error?.status === 404) {
+
+      if (error?.status === 404)
         runInAction(() => {
           this.projectNotFound = true;
         });
-      }
+
       throw error;
     }
   };

From cae08801dc90447fec1c78fb9bb83fe16cf7d8b1 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 1 Nov 2023 16:38:02 +0530
Subject: [PATCH 2/3] fix: project wrapper for unjoined project

---
 .../auth-screens/project/join-project.tsx     | 25 ++++++-------------
 web/layouts/auth-layout/project-wrapper.tsx   |  9 +++----
 web/store/project/project.store.ts            |  1 +
 web/store/user.store.ts                       |  1 +
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 0f5ccd2974f..5713e2ad85e 100644
--- 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 (
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
index e7bae799372..6c7bf5cafc0 100644
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -104,9 +104,8 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     }
   );
 
-  console.log("project member info", userStore.projectMemberInfo);
-  console.log("has permission to project", userStore.hasPermissionToProject);
-  console.log("project not found", userStore.projectNotFound);
+  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)
@@ -119,10 +118,10 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     );
 
   // check if the user don't have permission to access the project
-  if (userStore.hasPermissionToProject === false && userStore.projectNotFound !== true) return <JoinProject />;
+  if (projectExists && userStore.hasPermissionToProject === false) return <JoinProject />;
 
   // check if the project info is not found.
-  if (userStore.hasPermissionToProject === false && userStore.projectNotFound)
+  if (userStore.projectNotFound && userStore.hasPermissionToProject === false)
     return (
       <div className="container grid h-screen place-items-center bg-custom-background-100">
         <EmptyState
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
index a1716579c6d..e5d548b37f7 100644
--- a/web/store/project/project.store.ts
+++ b/web/store/project/project.store.ts
@@ -530,6 +530,7 @@ export class ProjectStore implements IProjectStore {
       await this.fetchProjects(workspaceSlug);
 
       runInAction(() => {
+        this.rootStore.user.hasPermissionToProject = true;
         this.loader = false;
         this.error = null;
       });
diff --git a/web/store/user.store.ts b/web/store/user.store.ts
index b2070e56056..6a2cf87a00f 100644
--- a/web/store/user.store.ts
+++ b/web/store/user.store.ts
@@ -128,6 +128,7 @@ class UserStore implements IUserStore {
   fetchUserWorkspaceInfo = async (workspaceSlug: string) => {
     try {
       const response = await this.workspaceService.workspaceMemberMe(workspaceSlug.toString());
+
       runInAction(() => {
         this.workspaceMemberInfo = response;
         this.hasPermissionToWorkspace = true;

From 7eeda39561b996ef4c60a70321ff3729e9d603f0 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 1 Nov 2023 17:03:23 +0530
Subject: [PATCH 3/3] chore: update store structure

---
 web/components/project/card.tsx               | 247 +++++++++---------
 web/layouts/auth-layout/project-wrapper.tsx   |   7 +-
 web/layouts/auth-layout/workspace-wrapper.tsx |  12 +-
 web/store/project/project.store.ts            |  10 +-
 web/store/user.store.ts                       |  44 ++--
 5 files changed, 174 insertions(+), 146 deletions(-)

diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
index 550a83383a5..e04ad7efc4a 100644
--- 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" />
-
-              <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="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
+        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"
+          />
+
+          <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 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"
+                }}
+              >
+                <Star
+                  className={`h-3 w-3 ${project.is_favorite ? "fill-amber-400 text-transparent" : "text-white"} `}
+                />
+              </button>
+            </div>
+          </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);
+                  }}
                 >
-                  {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}
+                  Join
+                </Button>
               </div>
-            </div>
-          </a>
-        </Link>
+            ) : null}
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/web/layouts/auth-layout/project-wrapper.tsx b/web/layouts/auth-layout/project-wrapper.tsx
index 6c7bf5cafc0..e3eca37ff12 100644
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@@ -108,7 +108,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   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">
@@ -118,10 +118,11 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     );
 
   // check if the user don't have permission to access the project
-  if (projectExists && userStore.hasPermissionToProject === false) return <JoinProject />;
+  if (projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
+    return <JoinProject />;
 
   // check if the project info is not found.
-  if (userStore.projectNotFound && userStore.hasPermissionToProject === false)
+  if (!projectExists && projectId && userStore.hasPermissionToProject[projectId.toString()] === false)
     return (
       <div className="container grid h-screen place-items-center bg-custom-background-100">
         <EmptyState
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
index e1ae8e4db59..c8b1666ee34 100644
--- 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">
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
index e5d548b37f7..a32906fe65a 100644
--- 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,7 +535,10 @@ export class ProjectStore implements IProjectStore {
       await this.fetchProjects(workspaceSlug);
 
       runInAction(() => {
-        this.rootStore.user.hasPermissionToProject = true;
+        this.rootStore.user.hasPermissionToProject = {
+          ...this.rootStore.user.hasPermissionToProject,
+          ...newPermissions,
+        };
         this.loader = false;
         this.error = null;
       });
diff --git a/web/store/user.store.ts b/web/store/user.store.ts
index 6a2cf87a00f..a9c5ec25ddf 100644
--- 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,
@@ -131,12 +136,18 @@ class UserStore implements IUserStore {
 
       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;
     }
@@ -148,19 +159,20 @@ class UserStore implements IUserStore {
 
       runInAction(() => {
         this.projectMemberInfo = response;
-        this.hasPermissionToProject = true;
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: true,
+        };
       });
       return response;
     } catch (error: any) {
       runInAction(() => {
-        this.hasPermissionToProject = false;
+        this.hasPermissionToProject = {
+          ...this.hasPermissionToProject,
+          [projectId]: false,
+        };
       });
 
-      if (error?.status === 404)
-        runInAction(() => {
-          this.projectNotFound = true;
-        });
-
       throw error;
     }
   };