From f9bcce4f5280f9565a41e4eed627936f8d15faa1 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Thu, 21 Dec 2023 15:47:24 -0800
Subject: [PATCH] lightbox: Get user's name from user data, not message, when
 available

But if it's not in user data, just fall back to the user's name on
the message.

Soon we'll use the user data to show a "(guest)" marker if it
applies; this is #5804. But as a bonus, this means that as long as
we have a User object (which we usually will), we'll live-update the
sender's name, here, if it changes.
---
 src/lightbox/Lightbox.js       |  4 +---
 src/lightbox/LightboxHeader.js | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/lightbox/Lightbox.js b/src/lightbox/Lightbox.js
index 52e8f6af774..f9bb255b28a 100644
--- a/src/lightbox/Lightbox.js
+++ b/src/lightbox/Lightbox.js
@@ -111,9 +111,7 @@ export default function Lightbox(props: Props): Node {
             onPressBack={() => {
               navigation.dispatch(navigateBack());
             }}
-            timestamp={message.timestamp}
-            senderName={message.sender_full_name}
-            senderId={message.sender_id}
+            message={message}
           />
         </View>
         <View style={styles.footer}>
diff --git a/src/lightbox/LightboxHeader.js b/src/lightbox/LightboxHeader.js
index e3fd978c55b..462c36bf8dc 100644
--- a/src/lightbox/LightboxHeader.js
+++ b/src/lightbox/LightboxHeader.js
@@ -9,7 +9,9 @@ import { createStyleSheet } from '../styles';
 import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import { Icon } from '../common/Icons';
 import { OfflineNoticePlaceholder } from '../boot/OfflineNoticeProvider';
-import type { UserId } from '../api/idTypes';
+import { useSelector } from '../react-redux';
+import { tryGetUserForId } from '../users/userSelectors';
+import type { Message } from '../api/modelTypes';
 
 const styles = createStyleSheet({
   text: {
@@ -39,26 +41,22 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  senderName: string,
-  senderId: UserId,
-  timestamp: number,
+  message: Message,
   onPressBack: () => void,
 |}>;
 
 /**
  * Shows sender's name and date of photo being displayed.
- *
- * @prop [senderName] - The sender's full name.
- * @prop [avatarUrl]
- * @prop [timestamp]
- * @prop [onPressBack]
  */
 export default function LightboxHeader(props: Props): Node {
-  const { onPressBack, senderName, senderId, timestamp } = props;
+  const { onPressBack, message } = props;
+  const { timestamp, sender_id: senderId } = message;
   const displayDate = humanDate(new Date(timestamp * 1000));
   const time = shortTime(new Date(timestamp * 1000));
   const subheader = `${displayDate} at ${time}`;
 
+  const sender = useSelector(state => tryGetUserForId(state, senderId));
+
   return (
     <SafeAreaView mode="padding" edges={['top']}>
       <OfflineNoticePlaceholder />
@@ -66,7 +64,7 @@ export default function LightboxHeader(props: Props): Node {
         <UserAvatarWithPresence size={36} userId={senderId} />
         <View style={styles.text}>
           <Text style={styles.name} numberOfLines={1}>
-            {senderName}
+            {sender?.full_name ?? message.sender_full_name}
           </Text>
           <Text style={styles.subheader} numberOfLines={1}>
             {subheader}