From c9d0c5353d239f5c1b02d988909d163edc54d033 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 9 Aug 2023 17:23:57 +0530
Subject: [PATCH] style: displaying email in members page depending on user
 role (#1817)

* style: displaying email in members page depending on user role

* refactor: added null safety
---
 .../projects/[projectId]/settings/members.tsx | 31 ++++++++++++++-----
 .../[workspaceSlug]/settings/members.tsx      | 24 ++++++++++----
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 88301cc61..aca7c384e 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,
@@ -193,21 +201,30 @@ 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.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 b348d5f7f..8626d86a0 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)
@@ -211,21 +214,30 @@ 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>
                           {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">