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
This commit is contained in:
Dakshesh Jain 2023-08-09 17:23:57 +05:30 committed by GitHub
parent 2a6eb5fe23
commit c9d0c5353d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 13 deletions

View file

@ -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">