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

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