From 9458d888cc03fc61c13db69492682ac268991887 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 19 Apr 2021 16:18:44 -0400 Subject: cleaned up TAGG_LIGHT_BLUE_2 color constant --- src/components/messages/ChannelPreview.tsx | 3 ++- src/components/messages/ChatHeader.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'src/components/messages') diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx index a7a7268a..8bd3a745 100644 --- a/src/components/messages/ChannelPreview.tsx +++ b/src/components/messages/ChannelPreview.tsx @@ -5,6 +5,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import {useStore} from 'react-redux'; import {ChannelPreviewMessengerProps} from 'stream-chat-react-native'; import {ChatContext} from '../../App'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; import { LocalAttachmentType, LocalChannelType, @@ -89,7 +90,7 @@ const styles = StyleSheet.create({ }, online: { position: 'absolute', - backgroundColor: '#6EE7E7', + backgroundColor: TAGG_LIGHT_BLUE_2, width: normalize(18), height: normalize(18), borderRadius: normalize(18) / 2, diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx index 67a7f1fe..7ddaa7e6 100644 --- a/src/components/messages/ChatHeader.tsx +++ b/src/components/messages/ChatHeader.tsx @@ -5,6 +5,7 @@ import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useDispatch, useStore} from 'react-redux'; import {ChatContext} from '../../App'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {ScreenType} from '../../types'; import { ChatHeaderHeight, @@ -87,7 +88,7 @@ const styles = StyleSheet.create({ }, online: { position: 'absolute', - backgroundColor: '#6EE7E7', + backgroundColor: TAGG_LIGHT_BLUE_2, width: normalize(16), height: normalize(16), borderRadius: normalize(16) / 2, -- cgit v1.2.3-70-g09d2 From bde4b74acc1e211a5f887a56d0ba5010385b8dbf Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 20 Apr 2021 15:35:17 -0700 Subject: Moved code to components --- src/components/messages/DateHeader.tsx | 48 ++++++++++++++++++++ src/components/messages/MessageFooter.tsx | 75 +++++++++++++++++++++++++++++++ src/components/messages/index.ts | 2 + 3 files changed, 125 insertions(+) create mode 100644 src/components/messages/DateHeader.tsx create mode 100644 src/components/messages/MessageFooter.tsx (limited to 'src/components/messages') diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx new file mode 100644 index 00000000..34cc2d01 --- /dev/null +++ b/src/components/messages/DateHeader.tsx @@ -0,0 +1,48 @@ +import moment from 'moment'; +import React from 'react'; +import {View, Text, StyleSheet} from 'react-native'; +import {normalize} from '../../utils'; + +const DateHeader: React.FC = ({date}) => { + if (!date) { + return null; + } + + var dateMoment = moment(date).startOf('day'); + var printDate = ''; + + const TODAY = moment().startOf('day'); + const YESTERDAY = moment().subtract(1, 'day').startOf('day'); + const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day'); + + if (TODAY.isSame(dateMoment)) { + printDate = 'Today'; + } else if (YESTERDAY.isSame(dateMoment)) { + printDate = 'Yesterday'; + } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) { + printDate = dateMoment.format('dddd'); + } else { + if (dateMoment.get('year') === TODAY.get('year')) { + printDate = dateMoment.format('MMMM D') + 'th'; + } else { + printDate = dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year'); + } + } + return ( + + {printDate} + + ); +}; + +const styles = StyleSheet.create({ + dateHeader: { + color: '#7A7A7A', + fontWeight: '600', + fontSize: normalize(11), + textAlign: 'center', + marginVertical: '5%', + }, +}); + +export default DateHeader; diff --git a/src/components/messages/MessageFooter.tsx b/src/components/messages/MessageFooter.tsx new file mode 100644 index 00000000..2ed8c6ed --- /dev/null +++ b/src/components/messages/MessageFooter.tsx @@ -0,0 +1,75 @@ +import moment from 'moment'; +import React from 'react'; +import {normalize} from '../../utils'; +import {useMessageContext} from 'stream-chat-react-native-core'; +import {View, Text, Image, StyleSheet} from 'react-native'; + +const MessageFooter: React.FC = () => { + const message = useMessageContext(); + + if (message.message.type === 'deleted') { + return <>; + } else { + const printTime = moment(message.message.created_at).format('h:mmA'); + if (message.lastGroupMessage) { + return ( + + {readReceipts(message)} + {printTime} + + ); + } else { + return <>; + } + } +}; + +const readReceipts = (message) => { + const readByLocal = message.message.readBy; + if (message.isMyMessage) { + if (readByLocal) { + return ( + + ); + } else if (message.message.status === 'received') { + return ( + + ); + } else if (message.message.status === 'sending') { + return ( + + ); + } else { + return <>; + } + } +}; + +export const styles = StyleSheet.create({ + time: { + fontSize: normalize(11), + color: '#7A7A7A', + lineHeight: normalize(13), + }, + userMessage: { + marginRight: 5, + }, + userXMessage: {marginLeft: 5}, + generalMessage: {marginTop: 4, flexDirection: 'row'}, + icon: {width: 15, height: 15}, +}); + +export default MessageFooter; diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index d08e9454..b19067ca 100644 --- a/src/components/messages/index.ts +++ b/src/components/messages/index.ts @@ -5,3 +5,5 @@ export {default as ChatHeader} from './ChatHeader'; export {default as ChatInputSubmit} from './ChatInputSubmit'; export {default as MessageAvatar} from './MessageAvatar'; export {default as TypingIndicator} from './TypingIndicator'; +export {default as MessageFooter} from './MessageFooter'; +export {default as DateHeader} from './DateHeader'; -- cgit v1.2.3-70-g09d2 From 59d90f15809890da05ede6a04e532da6a7af8d0b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 21 Apr 2021 10:47:27 -0700 Subject: Moved date string manipulation code to utils --- src/components/messages/DateHeader.tsx | 36 ++++++++-------------------------- src/utils/messages.ts | 25 +++++++++++++++++++++++ 2 files changed, 33 insertions(+), 28 deletions(-) (limited to 'src/components/messages') diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx index 34cc2d01..cc7dce2c 100644 --- a/src/components/messages/DateHeader.tsx +++ b/src/components/messages/DateHeader.tsx @@ -1,36 +1,15 @@ -import moment from 'moment'; import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; -import {normalize} from '../../utils'; +import {getFormatedDate, normalize} from '../../utils'; -const DateHeader: React.FC = ({date}) => { - if (!date) { - return null; - } +interface DateHeaderProps { + date: object; +} - var dateMoment = moment(date).startOf('day'); - var printDate = ''; - - const TODAY = moment().startOf('day'); - const YESTERDAY = moment().subtract(1, 'day').startOf('day'); - const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day'); - - if (TODAY.isSame(dateMoment)) { - printDate = 'Today'; - } else if (YESTERDAY.isSame(dateMoment)) { - printDate = 'Yesterday'; - } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) { - printDate = dateMoment.format('dddd'); - } else { - if (dateMoment.get('year') === TODAY.get('year')) { - printDate = dateMoment.format('MMMM D') + 'th'; - } else { - printDate = dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year'); - } - } +const DateHeader: React.FC = ({date}) => { return ( - - {printDate} + + {getFormatedDate(date)} ); }; @@ -43,6 +22,7 @@ const styles = StyleSheet.create({ textAlign: 'center', marginVertical: '5%', }, + dateContainer: {backgroundColor: 'transparent'}, }); export default DateHeader; diff --git a/src/utils/messages.ts b/src/utils/messages.ts index f4215bf0..0e73f639 100644 --- a/src/utils/messages.ts +++ b/src/utils/messages.ts @@ -137,3 +137,28 @@ export const createChannel = async ( throw error; } }; + +export const getFormatedDate = (date: object) => { + const dateMoment = moment(date).startOf('day'); + let dateToRender = ''; + + const TODAY = moment().startOf('day'); + const YESTERDAY = moment().subtract(1, 'day').startOf('day'); + const LAST_7_DAYS = moment().subtract(7, 'day').startOf('day'); + + if (TODAY.isSame(dateMoment)) { + dateToRender = 'Today'; + } else if (YESTERDAY.isSame(dateMoment)) { + dateToRender = 'Yesterday'; + } else if (dateMoment.isBetween(LAST_7_DAYS, YESTERDAY)) { + dateToRender = dateMoment.format('dddd'); + } else { + if (dateMoment.get('year') === TODAY.get('year')) { + dateToRender = dateMoment.format('MMMM D') + 'th'; + } else { + dateToRender = + dateMoment.format('MMMM D ') + 'th' + dateMoment.get('year'); + } + } + return dateToRender; +}; -- cgit v1.2.3-70-g09d2