From 05b94b625f3a869199baf24b206a3980820ec10f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 15 Apr 2021 14:41:59 -0700 Subject: changed blue of check marks --- src/screens/chat/ChatScreen.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 656c1c47..b21315b8 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -37,6 +37,9 @@ const ChatScreen: React.FC = () => { const {setTopInset} = useAttachmentPickerContext(); const insets = useSafeAreaInsets(); const chatTheme: DeepPartial = { + colors: { + accent_blue: '#6EE7E7', + }, messageList: { container: { backgroundColor: 'white', -- cgit v1.2.3-70-g09d2 From 47f97f404b3de5ef6ea7e338db378e7175ec5ebc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 13:26:24 -0700 Subject: dateHeader added --- src/screens/chat/ChatScreen.tsx | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index b21315b8..6a25797e 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,7 +1,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext, useEffect} from 'react'; -import {StyleSheet} from 'react-native'; +import React, {useContext, useEffect, useState} from 'react'; +import {StyleSheet, Text, View} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import { Channel, @@ -12,6 +12,7 @@ import { useAttachmentPickerContext, Theme, } from 'stream-chat-react-native'; +import moment from 'moment'; import {ChatContext} from '../../App'; import { ChatHeader, @@ -109,6 +110,34 @@ const ChatScreen: React.FC = () => { setTopInset(insets.top + HeaderHeight); }); + const DateHeader = ({dateString}) => { + 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 ( + + {printDate} + + ); + }; + return ( = () => { copyMessage, deleteMessage, ]} + DateHeader={DateHeader} TypingIndicator={TypingIndicator} myMessageTheme={loggedInUsersMessageTheme} MessageAvatar={MessageAvatar}> @@ -144,6 +174,11 @@ const styles = StyleSheet.create({ backgroundColor: 'white', flex: 1, }, + dateHeader: { + color: '#7A7A7A', + fontWeight: '600', + fontSize: normalize(11), + }, }); export default ChatScreen; -- cgit v1.2.3-70-g09d2 From 042f73b4b73f7a7db3f7605c0b9167e6535fdd29 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 19:38:38 -0700 Subject: Read receipts and timestamps --- src/assets/icons/messages/delivered_icon.png | Bin 0 -> 65998 bytes src/assets/icons/messages/read_icon.png | Bin 0 -> 65884 bytes src/assets/icons/messages/sent_icon.png | Bin 0 -> 56234 bytes src/screens/chat/ChatScreen.tsx | 82 ++++++++++++++++++++++++++- 4 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/messages/delivered_icon.png create mode 100644 src/assets/icons/messages/read_icon.png create mode 100644 src/assets/icons/messages/sent_icon.png (limited to 'src') diff --git a/src/assets/icons/messages/delivered_icon.png b/src/assets/icons/messages/delivered_icon.png new file mode 100644 index 00000000..0afa7e90 Binary files /dev/null and b/src/assets/icons/messages/delivered_icon.png differ diff --git a/src/assets/icons/messages/read_icon.png b/src/assets/icons/messages/read_icon.png new file mode 100644 index 00000000..a82b705d Binary files /dev/null and b/src/assets/icons/messages/read_icon.png differ diff --git a/src/assets/icons/messages/sent_icon.png b/src/assets/icons/messages/sent_icon.png new file mode 100644 index 00000000..55988c78 Binary files /dev/null and b/src/assets/icons/messages/sent_icon.png differ diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 6a25797e..cafcada8 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,7 +1,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext, useEffect, useState} from 'react'; -import {StyleSheet, Text, View} from 'react-native'; +import React, {useContext, useEffect} from 'react'; +import {StyleSheet, Text, View, Image} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import { Channel, @@ -11,6 +11,7 @@ import { MessageList, useAttachmentPickerContext, Theme, + useMessageContext, } from 'stream-chat-react-native'; import moment from 'moment'; import {ChatContext} from '../../App'; @@ -74,6 +75,24 @@ const ChatScreen: React.FC = () => { flexDirection: 'row', }, content: { + deletedContainer: {}, + deletedContainerInner: { + borderColor: 'transparent', + borderBottomLeftRadius: 10, + borderTopLeftRadius: 10, + borderBottomRightRadius: 10, + borderTopRightRadius: 10, + }, + deletedMetaText: { + paddingHorizontal: 10, + }, + deletedText: { + em: { + fontSize: 15, + fontStyle: 'italic', + fontWeight: '400', + }, + }, metaContainer: { marginLeft: 5, }, @@ -138,6 +157,64 @@ const ChatScreen: React.FC = () => { ); }; + 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 ( + + {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 <>; + } + } + }; + return ( = () => { copyMessage, deleteMessage, ]} + MessageFooter={MessageFooter} DateHeader={DateHeader} TypingIndicator={TypingIndicator} myMessageTheme={loggedInUsersMessageTheme} -- cgit v1.2.3-70-g09d2 From 36ee37f1a329342c47eca0760f7df9b20d17a6f3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 20:53:25 -0700 Subject: Changed delete message title to unsend --- src/screens/chat/ChatScreen.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index cafcada8..c89e033d 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -230,7 +230,12 @@ const ChatScreen: React.FC = () => { OverlayReactionList={() => null} messageActions={({copyMessage, deleteMessage}) => [ copyMessage, - deleteMessage, + { + action: () => deleteMessage?.action, + title: 'Unsend Message', + icon: deleteMessage?.icon, // Use some SVG icon here | Optional + titleStyle: deleteMessage?.titleStyle, // StyleProp | Optional + }, ]} MessageFooter={MessageFooter} DateHeader={DateHeader} -- cgit v1.2.3-70-g09d2 From 5c1562af9566c4f5762fd9f12161dd7fc08c500b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 21:19:01 -0700 Subject: Inline date separator applied --- package.json | 8 ++++---- src/screens/chat/ChatScreen.tsx | 21 +++++++++++++++++++-- yarn.lock | 26 +++++++++++++------------- 3 files changed, 36 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index 07407eff..b9362818 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "^5.6.2", "@reduxjs/toolkit": "^1.4.0", - "@stream-io/flat-list-mvcp": "^0.0.9", + "@stream-io/flat-list-mvcp": "^0.10.1", "@types/react-native-vector-icons": "^6.4.5", "moment": "^2.29.1", "react": "16.13.1", @@ -58,8 +58,8 @@ "react-redux": "^7.2.2", "reanimated-bottom-sheet": "^1.0.0-alpha.22", "rn-fetch-blob": "^0.12.0", - "stream-chat-react-native": "^3.2.0", - "stream-chat-react-native-core": "^3.2.0" + "stream-chat-react-native": "^3.3.3", + "stream-chat-react-native-core": "^3.3.3" }, "devDependencies": { "@babel/core": "^7.6.2", @@ -99,4 +99,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -} \ No newline at end of file +} diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index c89e033d..8e27731a 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -12,6 +12,8 @@ import { useAttachmentPickerContext, Theme, useMessageContext, + isDayOrMoment, + useTranslationContext, } from 'stream-chat-react-native'; import moment from 'moment'; import {ChatContext} from '../../App'; @@ -129,7 +131,20 @@ const ChatScreen: React.FC = () => { setTopInset(insets.top + HeaderHeight); }); - const DateHeader = ({dateString}) => { + 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 = ''; @@ -237,8 +252,8 @@ const ChatScreen: React.FC = () => { titleStyle: deleteMessage?.titleStyle, // StyleProp | Optional }, ]} + InlineDateSeparator={DateHeader} MessageFooter={MessageFooter} - DateHeader={DateHeader} TypingIndicator={TypingIndicator} myMessageTheme={loggedInUsersMessageTheme} MessageAvatar={MessageAvatar}> @@ -261,6 +276,8 @@ const styles = StyleSheet.create({ color: '#7A7A7A', fontWeight: '600', fontSize: normalize(11), + textAlign: 'center', + marginVertical: '5%', }, }); diff --git a/yarn.lock b/yarn.lock index ce906f2f..d129ab5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1110,10 +1110,10 @@ redux-thunk "^2.3.0" reselect "^4.0.0" -"@stream-io/flat-list-mvcp@^0.0.9": - version "0.0.9" - resolved "https://registry.yarnpkg.com/@stream-io/flat-list-mvcp/-/flat-list-mvcp-0.0.9.tgz#8dad59a93766376a7745deb4a45e50cf0c012a65" - integrity sha512-tj9Y7bDlFqdiy4girVlvo1Euc0uiYHCQ2vhOjo1B+ChfGC3b5DBDu51OMJDKJyD+U9NP5F/XnV7tcr3k4aDjgg== +"@stream-io/flat-list-mvcp@^0.10.1": + version "0.10.1" + resolved "https://registry.yarnpkg.com/@stream-io/flat-list-mvcp/-/flat-list-mvcp-0.10.1.tgz#ee7058c247729556959b19a281ae9e74e20f3e65" + integrity sha512-/snvyGqEO/7WKrcFOUxh1s1GPfYaUOwr7wyWgZogOUrGXE75zzEvOe39mooMoCJ8G92govZoAO5LCkftXQUoAQ== dependencies: lodash.debounce "^4.0.8" @@ -7228,10 +7228,10 @@ stream-buffers@~2.2.0: resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4" integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ= -stream-chat-react-native-core@^3.2.0, stream-chat-react-native-core@v3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-3.2.0.tgz#5b96c99a8f3f9819525d23cfb7ca8396d40f3b71" - integrity sha512-Ud13eP/4GWALQeP9lm6UO4a1i1kkCEPXdzq6U0WB3z5Yqof/5AGzhuwv3gmNM2x8ruFQ6JZ3FOLRnFustczF4w== +stream-chat-react-native-core@^3.3.3, stream-chat-react-native-core@v3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-3.3.3.tgz#751013e44ae401576091cd7ae793ccb3dae09cdb" + integrity sha512-zp9MlSx2a1ZotLfeEWxcQFRjqoBaD/J9yD6mYxcqaavltuYVv6GINal1/FAc0WkGC2Mq1x615yU/VNmg5HIY+Q== dependencies: "@babel/runtime" "7.12.13" "@gorhom/bottom-sheet" "3.0.0-alpha.0" @@ -7247,13 +7247,13 @@ stream-chat-react-native-core@^3.2.0, stream-chat-react-native-core@v3.2.0: react-native-markdown-package "1.8.1" stream-chat "3.6.2" -stream-chat-react-native@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/stream-chat-react-native/-/stream-chat-react-native-3.2.0.tgz#dfa898c9aeb512abfaccbd641d3ed6e7617983bc" - integrity sha512-jYux/RmSQhXJ3q2YeNW2U1rXBtHWeub4F2GxH1TCNMSTrcKYO1LTYma5LXYLV2FzNnFsPD9jGQTSQ+fslUQeCA== +stream-chat-react-native@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/stream-chat-react-native/-/stream-chat-react-native-3.3.3.tgz#3c824ba85e60f9b330f9457b14fed000c1bb8cb9" + integrity sha512-ZfiYOalZSVYKF83JFGztUrWCU/vqqQPb1jEkC58yT/G4i8443NN7/nTjSnYmZF5nS3OwelasiIdgidLSy42y5A== dependencies: es6-symbol "^3.1.3" - stream-chat-react-native-core v3.2.0 + stream-chat-react-native-core v3.3.3 stream-chat@3.6.2: version "3.6.2" -- cgit v1.2.3-70-g09d2 From 8c458d613975a3d93151841f51c8aacb9dc35c8f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 21:26:28 -0700 Subject: Hide scroll to bottom indicator --- src/screens/chat/ChatScreen.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 8e27731a..2d57c999 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -253,6 +253,7 @@ const ChatScreen: React.FC = () => { }, ]} InlineDateSeparator={DateHeader} + ScrollToBottomButton={() => null} MessageFooter={MessageFooter} TypingIndicator={TypingIndicator} myMessageTheme={loggedInUsersMessageTheme} -- cgit v1.2.3-70-g09d2 From 5d362b8dea13c3029657e11db94c3a7abea1bd57 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 19 Apr 2021 21:41:52 -0700 Subject: removed sticky header --- src/screens/chat/ChatScreen.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 2d57c999..bac1683f 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -253,6 +253,7 @@ const ChatScreen: React.FC = () => { }, ]} InlineDateSeparator={DateHeader} + StickyHeader={() => null} ScrollToBottomButton={() => null} MessageFooter={MessageFooter} TypingIndicator={TypingIndicator} -- 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') 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 b1ba54b0971a2e089e7e132ceb5dfd5257356f44 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 20 Apr 2021 15:35:52 -0700 Subject: removed code and imported components --- src/screens/chat/ChatScreen.tsx | 118 +--------------------------------------- 1 file changed, 3 insertions(+), 115 deletions(-) (limited to 'src') 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 = () => { 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 ( - - {printDate} - - ); - }; - - 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 ( - - {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 <>; - } - } - }; - return ( = () => { 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 | 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; -- cgit v1.2.3-70-g09d2 From ebb59d9632d76b133f226925bbf611df09c7419b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 20 Apr 2021 15:36:37 -0700 Subject: removed unused imports --- src/screens/chat/ChatScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index af731d8e..57f2232e 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -1,7 +1,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useContext, useEffect} from 'react'; -import {StyleSheet, Text, View, Image} from 'react-native'; +import {StyleSheet} from 'react-native'; import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; import { Channel, @@ -12,7 +12,6 @@ import { useAttachmentPickerContext, Theme, } from 'stream-chat-react-native'; -import moment from 'moment'; import {ChatContext} from '../../App'; import { ChatHeader, -- 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') 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