diff options
| -rw-r--r-- | src/screens/chat/ChatScreen.tsx | 118 |
1 files changed, 3 insertions, 115 deletions
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index bac1683f..af731d8e 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -11,16 +11,15 @@ import { MessageList, useAttachmentPickerContext, Theme, - useMessageContext, - isDayOrMoment, - useTranslationContext, } from 'stream-chat-react-native'; import moment from 'moment'; import {ChatContext} from '../../App'; import { ChatHeader, ChatInput, + DateHeader, MessageAvatar, + MessageFooter, TabsGradient, TypingIndicator, } from '../../components'; @@ -131,105 +130,6 @@ const ChatScreen: React.FC<ChatScreenProps> = () => { setTopInset(insets.top + HeaderHeight); }); - const DateHeader = ({date}) => { - const {tDateTimeParser} = useTranslationContext(); - - if (!date) { - return null; - } - - const dateFormat = - date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY'; - const tDate = tDateTimeParser(date); - const dateString = isDayOrMoment(tDate) - ? tDate.format(dateFormat) - : new Date(tDate).toDateString(); - - var dateMoment = moment(dateString); - var printDate = ''; - - const TODAY = moment(); - const YESTERDAY = moment().subtract(1, 'day'); - const LAST_6_DAYS = moment().subtract(6, 'day'); - - if (TODAY === dateMoment) { - printDate = 'Today'; - } else if (YESTERDAY === dateMoment) { - printDate = 'Yesterday'; - } else if (dateMoment.isBetween(LAST_6_DAYS, YESTERDAY)) { - printDate = dateMoment.format('dddd'); - } else { - if (dateMoment.get('year') === 2000) { - printDate = dateMoment.format('MMMM D') + 'th'; - } else { - printDate = dateMoment.format('MMMM D, YYYY') + 'th'; - } - } - return ( - <View style={{backgroundColor: 'transparent'}}> - <Text style={styles.dateHeader}>{printDate}</Text> - </View> - ); - }; - - const MessageFooter = () => { - const message = useMessageContext(); - if (message.message.type === 'deleted') { - return <></>; - } else { - const printTime = moment(message.message.created_at).format('h:mmA'); - const styles = message.isMyMessage ? {marginRight: 5} : {marginLeft: 5}; - - if (message.lastGroupMessage) { - return ( - <View style={[styles, {marginTop: 4, flexDirection: 'row'}]}> - {readReceipts(message)} - <Text - style={{ - fontSize: normalize(11), - color: '#7A7A7A', - lineHeight: normalize(13), - }}> - {printTime} - </Text> - </View> - ); - } else { - return <></>; - } - } - }; - - const readReceipts = (message) => { - const readByLocal = message.message.readBy; - if (message.isMyMessage) { - if (readByLocal) { - return ( - <Image - source={require('../../assets/icons/messages/read_icon.png')} - style={{width: 15, height: 15}} - /> - ); - } else if (message.message.status === 'received') { - return ( - <Image - source={require('../../assets/icons/messages/delivered_icon.png')} - style={{width: 15, height: 15}} - /> - ); - } else if (message.message.status === 'sending') { - return ( - <Image - source={require('../../assets/icons/messages/sent_icon.png')} - style={{width: 15, height: 15}} - /> - ); - } else { - return <></>; - } - } - }; - return ( <SafeAreaView style={[ @@ -245,12 +145,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => { OverlayReactionList={() => null} messageActions={({copyMessage, deleteMessage}) => [ copyMessage, - { - action: () => deleteMessage?.action, - title: 'Unsend Message', - icon: deleteMessage?.icon, // Use some SVG icon here | Optional - titleStyle: deleteMessage?.titleStyle, // StyleProp<TextStyle> | Optional - }, + deleteMessage, ]} InlineDateSeparator={DateHeader} StickyHeader={() => null} @@ -274,13 +169,6 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flex: 1, }, - dateHeader: { - color: '#7A7A7A', - fontWeight: '600', - fontSize: normalize(11), - textAlign: 'center', - marginVertical: '5%', - }, }); export default ChatScreen; |