From f48cd6f50ce8ff53713a73b42115436d16d200fd Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 27 Nov 2023 18:25:16 +0530
Subject: [PATCH] fix: profile layout flicker (#2898)

* fix: user profile layout flicker

* chore: update import statements
---
 web/layouts/user-profile-layout/layout.tsx | 28 +++++++++-------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/web/layouts/user-profile-layout/layout.tsx b/web/layouts/user-profile-layout/layout.tsx
index 4127530da..07c10a4d1 100644
--- a/web/layouts/user-profile-layout/layout.tsx
+++ b/web/layouts/user-profile-layout/layout.tsx
@@ -1,11 +1,8 @@
-import useSWR from "swr";
-import { useRouter } from "next/router";
-// services
-import { WorkspaceService } from "services/workspace.service";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProfileNavbar, ProfileSidebar } from "components/profile";
-// constants
-import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
 type Props = {
   children: React.ReactNode;
@@ -13,21 +10,18 @@ type Props = {
   showProfileIssuesFilter?: boolean;
 };
 
-// services
-const workspaceService = new WorkspaceService();
+const AUTHORIZED_ROLES = [20, 15, 10];
 
-export const ProfileAuthWrapper: React.FC<Props> = (props) => {
+export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
   const { children, className, showProfileIssuesFilter } = props;
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
 
-  const { data: memberDetails } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
-  );
+  if (!currentWorkspaceRole) return null;
 
-  const isAuthorized = memberDetails?.role === 20 || memberDetails?.role === 15 || memberDetails?.role === 10;
+  const isAuthorized = AUTHORIZED_ROLES.includes(currentWorkspaceRole);
 
   return (
     <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
@@ -44,4 +38,4 @@ export const ProfileAuthWrapper: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+});