diff --git a/packages/react/src/pages/org.tsx b/packages/react/src/pages/org.tsx
index 69e7a5aad0..b23ec30cf0 100644
--- a/packages/react/src/pages/org.tsx
+++ b/packages/react/src/pages/org.tsx
@@ -69,7 +69,7 @@ import { isAsyncResultLoading } from "../lib/async-result";
type MemberData = {
id: string;
- email: string;
+ email: string | null;
name: string | null;
avatarUrl: string | null;
role: string;
@@ -80,6 +80,23 @@ type MemberData = {
type RoleData = { slug: string; name: string };
+/** What a member row is called: name, else email, else the one thing every
+ * member has — a membership id — so a profile the host has not learned yet
+ * still renders as a row an admin can act on. */
+const memberLabel = (member: MemberData): string => member.name ?? member.email ?? member.id;
+
+const memberInitials = (member: MemberData): string => {
+ if (member.name) {
+ return member.name
+ .split(" ")
+ .map((n: string) => n[0])
+ .join("")
+ .slice(0, 2)
+ .toUpperCase();
+ }
+ return (member.email?.[0] ?? "?").toUpperCase();
+};
+
type InviteState = {
email: string;
roleSlug: string;
@@ -314,7 +331,7 @@ export function OrgPage(props: {
const filtered = search
? members.filter(
(m: MemberData) =>
- m.email.toLowerCase().includes(search.toLowerCase()) ||
+ (m.email?.toLowerCase().includes(search.toLowerCase()) ?? false) ||
(m.name?.toLowerCase().includes(search.toLowerCase()) ?? false),
)
: members;
@@ -338,21 +355,14 @@ export function OrgPage(props: {

) : (
- {member.name
- ? member.name
- .split(" ")
- .map((n: string) => n[0])
- .join("")
- .slice(0, 2)
- .toUpperCase()
- : member.email[0]!.toUpperCase()}
+ {memberInitials(member)}
)}
- {member.name ?? member.email}
+ {memberLabel(member)}
{member.isCurrentUser && (
You
@@ -361,7 +371,7 @@ export function OrgPage(props: {
Invited
)}
- {member.name && (
+ {member.name && member.email && (
{member.email}
@@ -421,7 +431,7 @@ export function OrgPage(props: {
onClick={() =>
setRemovingMember({
id: member.id,
- name: member.name ?? member.email,
+ name: memberLabel(member),
})
}
>