Add fallback for users who still have a discriminator (#29)

* Add fallback for users who still have a discriminator

* Not null-checking

examples/react-colyseus/packages/client/src/hooks/useAuthenticatedContext.tsx

@@ -9,6 +9,7 @@ import {LoadingScreen} from '../components/LoadingScreen';
 import {getUserAvatarUri} from '../utils/getUserAvatarUri';
 
 import type {IGuildsMembersRead, TAuthenticateResponse, TAuthenticatedContext} from '../types';
+import {getUserDisplayName} from '../utils/getUserDisplayName';
 
 const AuthenticatedContext = React.createContext<TAuthenticatedContext>({
   user: {
@@ -148,7 +149,10 @@ function useAuthenticatedContextSetup() {
 
       // Get the user's guild nickname. If none set, fall back to global_name, or username
       // Note - this name is note guaranteed to be unique
-      const name = guildMember?.nick ?? newAuth.user.global_name ?? newAuth.user.username;
+      const name = getUserDisplayName({
+        guildMember,
+        user: newAuth.user,
+      });
 
       // The second argument has to include for the room as well as the current player
       const newRoom = await client.joinOrCreate<State>(GAME_NAME, {

examples/react-colyseus/packages/client/src/utils/getUserDisplayName.tsx

@@ -0,0 +1,17 @@
+import {IGuildsMembersRead} from '../types';
+import {Types} from '@discord/embedded-app-sdk';
+
+interface GetUserDisplayNameArgs {
+  guildMember: IGuildsMembersRead | null;
+  user: Partial<Types.User>;
+}
+
+export function getUserDisplayName({guildMember, user}: GetUserDisplayNameArgs) {
+  if (guildMember?.nick != null && guildMember.nick !== '') return guildMember.nick;
+
+  if (user.discriminator !== '0') return `${user.username}#${user.discriminator}`;
+
+  if (user.global_name != null && user.global_name !== '') return user.global_name;
+
+  return user.username;
+}

examples/sdk-playground/packages/client/src/pages/ActivityParticipants.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import discordSdk from '../discordSdk';
 import {EventPayloadData} from '@discord/embedded-app-sdk';
+import {getUserDisplayName} from '../utils/getUserDisplayName';
+import {authStore} from '../stores/authStore';
 
 export default function ActivityParticipants() {
+  const auth = authStore.getState();
   const [participants, setParticipants] = React.useState<
     EventPayloadData<'ACTIVITY_INSTANCE_PARTICIPANTS_UPDATE'>['participants']
   >([]);
@@ -53,7 +56,7 @@ export default function ActivityParticipants() {
         {participants.map((user) => {
           return (
             <React.Fragment key={user.id}>
-              <div>{user.nickname ?? user.global_name}</div>
+              <div>{getUserDisplayName({guildMember: auth.guildMember, user: auth.user})}</div>
               <div>{speakingParticipants.some((s) => s === user.id) ? 'Speaking' : 'Not Speaking'}</div>
             </React.Fragment>
           );

examples/sdk-playground/packages/client/src/pages/AvatarAndName.tsx

@@ -4,6 +4,7 @@ import ReactJsonView from '../components/ReactJsonView';
 import {DiscordAPI, RequestType} from '../DiscordAPI';
 import {authStore} from '../stores/authStore';
 import {getUserAvatarUri} from '../utils/getUserAvatarUri';
+import {getUserDisplayName} from '../utils/getUserDisplayName';
 
 interface GuildsMembersRead {
   roles: string[];
@@ -68,7 +69,7 @@ export default function AvatarAndName() {
 
   // Get the user's guild nickname. If none set, fall back to global_name, or username
   // Note - this name is note guaranteed to be unique
-  const name = guildMember?.nick ?? auth.user.global_name ?? auth.user.username;
+  const name = getUserDisplayName({guildMember, user: auth.user});
 
   return (
     <div style={{padding: 32, overflowX: 'auto'}}>

examples/sdk-playground/packages/client/src/utils/getUserDisplayName.tsx

@@ -0,0 +1,17 @@
+import {IGuildsMembersRead} from '../types';
+import {Types} from '@discord/embedded-app-sdk';
+
+interface GetUserDisplayNameArgs {
+  guildMember: IGuildsMembersRead | null;
+  user: Partial<Types.User>;
+}
+
+export function getUserDisplayName({guildMember, user}: GetUserDisplayNameArgs) {
+  if (guildMember?.nick != null && guildMember.nick !== '') return guildMember.nick;
+
+  if (user.discriminator !== '0') return `${user.username}#${user.discriminator}`;
+
+  if (user.global_name != null && user.global_name !== '') return user.global_name;
+
+  return user.username;
+}