fix: handle nickname change for new users

Author: coderbyheart

src/Chat/Twilio/ChannelView.tsx

@@ -108,6 +108,10 @@ export const ChannelView = ({
 				onSlashCommand(SlashCommand.JOIN, args[0])
 				break
 			case '/nick':
+				setAuthorNicks(previous => ({
+					...previous,
+					[identity]: args.join(' '),
+				}))
 				onSlashCommand(SlashCommand.NICK, args.join(' '))
 				break
 			default:
@@ -133,6 +137,36 @@ export const ChannelView = ({
 		},
 	})
 
+	const userChangedNickHandler = ({
+		updateReasons,
+		user,
+	}: User.UpdatedEventArgs) => {
+		if (updateReasons.includes('friendlyName')) {
+			updateMessages(prevMessages => ({
+				...prevMessages,
+				messages: [
+					...prevMessages.messages,
+					{
+						sid: v4(),
+						status: {
+							message: (
+								<>
+									User <em>{authorNicks[user.identity] || user.identity}</em>{' '}
+									changed their name to <em>{user.friendlyName}</em>.
+								</>
+							),
+							timestamp: new Date(),
+						},
+					},
+				],
+			}))
+			setAuthorNicks(authorNicks => ({
+				...authorNicks,
+				[user.identity]: user.friendlyName,
+			}))
+		}
+	}
+
 	const newMessageHandler = (message: Message) => {
 		updateMessages(prevMessages => ({
 			...prevMessages,
@@ -141,6 +175,25 @@ export const ChannelView = ({
 				? prevMessages.lastIndex
 				: message.index,
 		}))
+		if (!authorNicks[message.author]) {
+			channelConnection?.client
+				.getUserDescriptor(message.author)
+				.then(async d => {
+					const user = await d.subscribe()
+					user.on('updated', userChangedNickHandler)
+					setAuthorNicks(previous => ({
+						...previous,
+						[message.author]: d.friendlyName,
+					}))
+					setAuthorSubscriptions(previous => ({
+						...previous,
+						[message.author]: user,
+					}))
+				})
+				.catch(err => {
+					console.error(err)
+				})
+		}
 	}
 
 	const memberJoinedHandler = (member: Member) => {
@@ -175,36 +228,6 @@ export const ChannelView = ({
 		}))
 	}
 
-	const userChangedNickHandler = ({
-		updateReasons,
-		user,
-	}: User.UpdatedEventArgs) => {
-		if (updateReasons.includes('friendlyName')) {
-			updateMessages(prevMessages => ({
-				...prevMessages,
-				messages: [
-					...prevMessages.messages,
-					{
-						sid: v4(),
-						status: {
-							message: (
-								<>
-									User <em>{authorNicks[user.identity] || user.identity}</em>{' '}
-									changed their name to <em>{user.friendlyName}</em>.
-								</>
-							),
-							timestamp: new Date(),
-						},
-					},
-				],
-			}))
-			setAuthorNicks(authorNicks => ({
-				...authorNicks,
-				[user.identity]: user.friendlyName,
-			}))
-		}
-	}
-
 	useEffect(() => {
 		if (channelConnection) {
 			channelConnection.channel.on('messageAdded', newMessageHandler)

src/Chat/components/MessageItem.tsx

@@ -7,11 +7,11 @@ import { emojify } from './Emojify'
 const MessageView = styled.div`
 	border-radius: 10px;
 	background-color: #dbedff;
-	margin: 1rem 4rem 1rem 1rem;
+	margin: 0.5rem 0.5rem 0.5rem 4rem;
 `
 
 const UserMessageView = styled(MessageView)`
-	margin: 1rem 1rem 1rem 4rem;
+	margin: 0.5rem 4rem 0.5rem 0.5rem;
 	background-color: #dbfff7;
 `