From 7dd2addc2916f6915566fd9d07b8577f22c9027d Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Wed, 9 Aug 2023 15:37:55 +0530
Subject: [PATCH 1/2] style: displaying email in members page depending on user
 role

---
 .../projects/[projectId]/settings/members.tsx | 29 ++++++++++++++-----
 .../[workspaceSlug]/settings/members.tsx      | 20 +++++++++----
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 88301cc6157..23e06e15469 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -10,8 +10,9 @@ import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
-import useProjectDetails from "hooks/use-project-details";
 import useUser from "hooks/use-user";
+import useProjectMembers from "hooks/use-project-members";
+import useProjectDetails from "hooks/use-project-details";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@@ -48,6 +49,11 @@ const MembersSettings: NextPage = () => {
 
   const { user } = useUser();
   const { projectDetails } = useProjectDetails();
+  const { isOwner } = useProjectMembers(
+    workspaceSlug?.toString(),
+    projectId?.toString(),
+    Boolean(workspaceSlug && projectId)
+  );
 
   const { data: activeWorkspace } = useSWR(
     workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
@@ -80,6 +86,7 @@ const MembersSettings: NextPage = () => {
       avatar: item.member?.avatar,
       first_name: item.member?.first_name,
       last_name: item.member?.last_name,
+      email: item.member?.email,
       display_name: item.member?.display_name,
       role: item.role,
       status: true,
@@ -91,6 +98,7 @@ const MembersSettings: NextPage = () => {
       avatar: item.avatar ?? "",
       first_name: item.first_name ?? item.email,
       last_name: item.last_name ?? "",
+      email: item.email,
       display_name: item.email,
       role: item.role,
       status: item.accepted,
@@ -194,20 +202,27 @@ const MembersSettings: NextPage = () => {
                               className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                             />
                           ) : (
-                            member.display_name.charAt(0)
+                            (member.display_name || member.email).charAt(0)
                           )}
                         </div>
                         <div>
                           {member.member ? (
                             <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                              <a className="text-sm">{member.display_name}</a>
+                              <a className="text-sm">
+                                <span>
+                                  {member.first_name} {member.last_name}
+                                </span>
+                                <span className="text-custom-text-300 text-sm ml-2">
+                                  ({member.display_name})
+                                </span>
+                              </a>
                             </Link>
                           ) : (
-                            <h4 className="text-sm">{member.display_name}</h4>
+                            <h4 className="text-sm">{member.display_name || member.email}</h4>
+                          )}
+                          {isOwner && (
+                            <p className="mt-0.5 text-xs text-custom-text-200">{member.email}</p>
                           )}
-                          <p className="mt-0.5 text-xs text-custom-text-200">
-                            {member.display_name}
-                          </p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index b348d5f7f66..0c068634c0f 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -10,6 +10,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
+import useWorkspaceMembers from "hooks/use-workspace-members";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { SettingsHeader } from "components/workspace";
@@ -46,6 +47,8 @@ const MembersSettings: NextPage = () => {
 
   const { user } = useUser();
 
+  const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug));
+
   const { data: activeWorkspace } = useSWR(
     workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null,
     () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null)
@@ -218,14 +221,21 @@ const MembersSettings: NextPage = () => {
                         <div>
                           {member.member ? (
                             <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
-                              <a className="text-sm">{member.display_name || member.email}</a>
+                              <a className="text-sm">
+                                <span>
+                                  {member.first_name} {member.last_name}
+                                </span>
+                                <span className="text-custom-text-300 text-sm ml-2">
+                                  ({member.display_name})
+                                </span>
+                              </a>
                             </Link>
                           ) : (
-                            <h4 className="text-sm">{member.display_name}</h4>
+                            <h4 className="text-sm">{member.display_name || member.email}</h4>
+                          )}
+                          {isOwner && (
+                            <p className="text-xs text-custom-text-200">{member.email}</p>
                           )}
-                          <p className="text-xs text-custom-text-200">
-                            {member.display_name || member.email}
-                          </p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">

From 1e3687932f43ae05b17e81278ddd43aafdc15cbc Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <dakshesh.jain14@gmail.com>
Date: Wed, 9 Aug 2023 17:00:53 +0530
Subject: [PATCH 2/2] refactor: added null safety

---
 .../[workspaceSlug]/projects/[projectId]/settings/members.tsx | 4 +++-
 apps/app/pages/[workspaceSlug]/settings/members.tsx           | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 23e06e15469..aca7c384e06 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -201,8 +201,10 @@ const MembersSettings: NextPage = () => {
                               alt={member.display_name}
                               className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                             />
+                          ) : member.display_name || member.email ? (
+                            (member.display_name || member.email)?.charAt(0)
                           ) : (
-                            (member.display_name || member.email).charAt(0)
+                            "?"
                           )}
                         </div>
                         <div>
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 0c068634c0f..8626d86a027 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -214,8 +214,10 @@ const MembersSettings: NextPage = () => {
                               className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
                               alt={member.display_name || member.email}
                             />
+                          ) : member.display_name || member.email ? (
+                            (member.display_name || member.email)?.charAt(0)
                           ) : (
-                            (member.display_name || member.email).charAt(0)
+                            "?"
                           )}
                         </div>
                         <div>