From 6c9c025d2522cbba3fd516f6a1e3fcaf0edebc76 Mon Sep 17 00:00:00 2001
From: Christopher Poile <cpoile@gmail.com>
Date: Mon, 23 Jan 2023 09:38:07 -0500
Subject: [PATCH] MM-49746 - Calls: Show call thread title in root calls post
 (#6992)

* add thread title to calls custom posts

* PR comments
---
 .../calls_custom_message.tsx                  | 149 ++++++++++--------
 1 file changed, 82 insertions(+), 67 deletions(-)

diff --git a/app/products/calls/components/calls_custom_message/calls_custom_message.tsx b/app/products/calls/components/calls_custom_message/calls_custom_message.tsx
index 16640f43f0..fd7eb29252 100644
--- a/app/products/calls/components/calls_custom_message/calls_custom_message.tsx
+++ b/app/products/calls/components/calls_custom_message/calls_custom_message.tsx
@@ -14,6 +14,7 @@ import FormattedTime from '@components/formatted_time';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 import {displayUsername, getUserTimezone} from '@utils/user';
 
 import type {LimitRestrictedInfo} from '@calls/observers';
@@ -35,6 +36,10 @@ type Props = {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
+        title: {
+            ...typography('Heading', 500),
+            color: theme.centerChannelColor,
+        },
         messageStyle: {
             flexDirection: 'row',
             color: changeOpacity(theme.centerChannelColor, 0.6),
@@ -133,97 +138,107 @@ export const CallsCustomMessage = ({
         leaveAndJoinWithAlert(intl, serverUrl, post.channelId, leaveChannelName || '', joinChannelName || '', confirmToJoin, false, Boolean(joinChannelIsDMorGM));
     };
 
+    const title = post.props.title ? (
+        <Text style={style.title}>
+            {post.props.title}
+        </Text>
+    ) : null;
+
     if (post.props.end_at) {
         return (
-            <View style={style.messageStyle}>
-                <CompassIcon
-                    name='phone-hangup'
-                    size={16}
-                    style={style.phoneHangupIcon}
-                />
-                <View style={style.messageText}>
-                    <FormattedText
-                        id={'mobile.calls_call_ended'}
-                        defaultMessage={'Call ended'}
-                        style={style.startedText}
+            <>
+                {title}
+                <View style={style.messageStyle}>
+                    <CompassIcon
+                        name='phone-hangup'
+                        size={16}
+                        style={style.phoneHangupIcon}
                     />
-                    <View style={style.endCallInfo}>
+                    <View style={style.messageText}>
                         <FormattedText
-                            id={'mobile.calls_ended_at'}
-                            defaultMessage={'Ended at'}
-                            style={style.timeText}
+                            id={'mobile.calls_call_ended'}
+                            defaultMessage={'Call ended'}
+                            style={style.startedText}
                         />
-                        <Text>{' '}</Text>
-                        {
+                        <View style={style.endCallInfo}>
+                            <FormattedText
+                                id={'mobile.calls_ended_at'}
+                                defaultMessage={'Ended at'}
+                                style={style.timeText}
+                            />
+                            <Text>{' '}</Text>
                             <FormattedTime
                                 style={style.timeText}
                                 value={post.props.end_at}
                                 isMilitaryTime={isMilitaryTime}
                                 timezone={timezone}
                             />
-                        }
-                        <Text style={style.separator}>{'•'}</Text>
-                        <FormattedText
-                            id={'mobile.calls_lasted'}
-                            defaultMessage={'Lasted {duration}'}
-                            values={{duration: moment.duration(post.props.end_at - post.props.start_at).humanize(false)}}
-                            style={style.timeText}
-                        />
+                            <Text style={style.separator}>{'•'}</Text>
+                            <FormattedText
+                                id={'mobile.calls_lasted'}
+                                defaultMessage={'Lasted {duration}'}
+                                values={{duration: moment.duration(post.props.end_at - post.props.start_at).humanize(false)}}
+                                style={style.timeText}
+                            />
+                        </View>
                     </View>
                 </View>
-            </View>
+            </>
         );
     }
 
     const joinTextStyle = [style.joinCallButtonText, isLimitRestricted && style.joinCallButtonTextRestricted];
     return (
-        <View style={style.messageStyle}>
-            <CompassIcon
-                name='phone-in-talk'
-                size={16}
-                style={style.joinCallIcon}
-            />
-            <View style={style.messageText}>
-                <FormattedText
-                    id={'mobile.calls_name_started_call'}
-                    defaultMessage={'{name} started a call'}
-                    values={{name: displayUsername(author, intl.locale, teammateNameDisplay)}}
-                    style={style.startedText}
-                />
-                <FormattedRelativeTime
-                    value={post.props.start_at}
-                    updateIntervalInSeconds={1}
-                    style={style.timeText}
-                />
-            </View>
-
-            <TouchableOpacity
-                style={[style.joinCallButton, isLimitRestricted && style.joinCallButtonRestricted]}
-                onPress={joinHandler}
-            >
+        <>
+            {title}
+            <View style={style.messageStyle}>
                 <CompassIcon
-                    name='phone-outline'
+                    name='phone-in-talk'
                     size={16}
-                    style={[style.joinCallButtonIcon, isLimitRestricted && style.joinCallButtonIconRestricted]}
+                    style={style.joinCallIcon}
                 />
-                {
-                    alreadyInTheCall &&
+                <View style={style.messageText}>
                     <FormattedText
-                        id={'mobile.calls_current_call'}
-                        defaultMessage={'Current call'}
-                        style={joinTextStyle}
+                        id={'mobile.calls_name_started_call'}
+                        defaultMessage={'{name} started a call'}
+                        values={{name: displayUsername(author, intl.locale, teammateNameDisplay)}}
+                        style={style.startedText}
                     />
-                }
-                {
-                    !alreadyInTheCall &&
-                    <FormattedText
-                        id={'mobile.calls_join_call'}
-                        defaultMessage={'Join call'}
-                        style={joinTextStyle}
+                    <FormattedRelativeTime
+                        value={post.props.start_at}
+                        updateIntervalInSeconds={1}
+                        style={style.timeText}
                     />
-                }
-            </TouchableOpacity>
-        </View>
+                </View>
+
+                <TouchableOpacity
+                    style={[style.joinCallButton, isLimitRestricted && style.joinCallButtonRestricted]}
+                    onPress={joinHandler}
+                >
+                    <CompassIcon
+                        name='phone-outline'
+                        size={16}
+                        style={[style.joinCallButtonIcon, isLimitRestricted && style.joinCallButtonIconRestricted]}
+                    />
+                    {
+                        alreadyInTheCall &&
+                        <FormattedText
+                            id={'mobile.calls_current_call'}
+                            defaultMessage={'Current call'}
+                            style={joinTextStyle}
+                        />
+                    }
+                    {
+                        !alreadyInTheCall &&
+                        <FormattedText
+                            id={'mobile.calls_join_call'}
+                            defaultMessage={'Join call'}
+                            style={joinTextStyle}
+                        />
+                    }
+                </TouchableOpacity>
+            </View>
+        </>
     );
 };