diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/friends/InviteFriendTile.tsx | 22 | ||||
| -rw-r--r-- | src/components/messages/DateHeader.tsx | 28 | ||||
| -rw-r--r-- | src/components/messages/MessageFooter.tsx | 75 | ||||
| -rw-r--r-- | src/components/messages/index.ts | 2 | ||||
| -rw-r--r-- | src/components/notifications/Notification.tsx | 69 |
5 files changed, 164 insertions, 32 deletions
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx index 95ebf16a..5237389a 100644 --- a/src/components/friends/InviteFriendTile.tsx +++ b/src/components/friends/InviteFriendTile.tsx @@ -8,25 +8,37 @@ import { View, } from 'react-native'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings'; +import { + ERROR_NO_CONTACT_INVITE_LEFT, + ERROR_SOMETHING_WENT_WRONG, + SUCCESS_INVITE_CONTACT, + SUCCESS_LAST_CONTACT_INVITE, +} from '../../constants/strings'; +import {InviteContactType} from '../../screens/profile/InviteFriendsScreen'; import {inviteFriendService} from '../../services'; import {normalize} from '../../utils'; interface InviteFriendTileProps { - item: Object; + item: InviteContactType; } const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => { const [invited, setInvited] = useState<boolean>(false); const [formatedPhoneNumber, setFormattedPhoneNumber] = useState<string>(''); const handleInviteFriend = async () => { - const response = await inviteFriendService( + const invites_left = await inviteFriendService( item.phoneNumber, item.firstName, item.lastName, ); - if (response) { - setInvited(response); + if (invites_left > 0) { + setInvited(true); + Alert.alert(SUCCESS_INVITE_CONTACT(invites_left)); + } else if (invites_left === 0) { + setInvited(true); + Alert.alert(SUCCESS_LAST_CONTACT_INVITE); + } else if (invites_left === -1) { + Alert.alert(ERROR_NO_CONTACT_INVITE_LEFT); } else { Alert.alert(ERROR_SOMETHING_WENT_WRONG); } diff --git a/src/components/messages/DateHeader.tsx b/src/components/messages/DateHeader.tsx new file mode 100644 index 00000000..cc7dce2c --- /dev/null +++ b/src/components/messages/DateHeader.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import {View, Text, StyleSheet} from 'react-native'; +import {getFormatedDate, normalize} from '../../utils'; + +interface DateHeaderProps { + date: object; +} + +const DateHeader: React.FC<DateHeaderProps> = ({date}) => { + return ( + <View style={styles.dateContainer}> + <Text style={styles.dateHeader}>{getFormatedDate(date)}</Text> + </View> + ); +}; + +const styles = StyleSheet.create({ + dateHeader: { + color: '#7A7A7A', + fontWeight: '600', + fontSize: normalize(11), + textAlign: 'center', + marginVertical: '5%', + }, + dateContainer: {backgroundColor: 'transparent'}, +}); + +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 ( + <View + style={[ + message.isMyMessage ? styles.userMessage : styles.userXMessage, + styles.generalMessage, + ]}> + {readReceipts(message)} + <Text style={styles.time}>{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={styles.icon} + /> + ); + } else if (message.message.status === 'received') { + return ( + <Image + source={require('../../assets/icons/messages/delivered_icon.png')} + style={styles.icon} + /> + ); + } else if (message.message.status === 'sending') { + return ( + <Image + source={require('../../assets/icons/messages/sent_icon.png')} + style={styles.icon} + /> + ); + } 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'; diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 8e008cf9..3cc1c7f1 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -208,6 +208,9 @@ const Notification: React.FC<NotificationProps> = (props) => { const isOwnProfile = id === loggedInUser.userId; const navigateToProfile = async () => { + if (notification_type === 'SYSTEM_MSG') { + return; + } if (!userXInStore(state, screenType, id)) { await fetchUserX(dispatch, {userId: id, username: username}, screenType); } @@ -231,35 +234,47 @@ const Notification: React.FC<NotificationProps> = (props) => { } /> </TouchableWithoutFeedback> - <View style={styles.contentContainer}> - <TouchableWithoutFeedback onPress={navigateToProfile}> - <Text style={styles.actorName}> - {first_name} {last_name} - </Text> - </TouchableWithoutFeedback> - <TouchableWithoutFeedback onPress={onNotificationTap}> - <Text>{verbage}</Text> - </TouchableWithoutFeedback> - </View> - {notification_type === 'FRD_REQ' && ( - <View style={styles.buttonsContainer}> - <AcceptDeclineButtons - requester={{id, username, first_name, last_name}} - onAccept={handleAcceptRequest} - onReject={handleDeclineFriendRequest} - /> + {notification_type === 'SYSTEM_MSG' ? ( + // Only verbage + <View style={styles.contentContainer}> + <Text style={styles.actorName}>{verbage}</Text> </View> + ) : ( + <> + {/* Text content: Actor name and verbage*/} + <View style={styles.contentContainer}> + <TouchableWithoutFeedback onPress={navigateToProfile}> + <Text style={styles.actorName}> + {first_name} {last_name} + </Text> + </TouchableWithoutFeedback> + <TouchableWithoutFeedback onPress={onNotificationTap}> + <Text>{verbage}</Text> + </TouchableWithoutFeedback> + </View> + {/* Friend request accept/decline button */} + {notification_type === 'FRD_REQ' && ( + <View style={styles.buttonsContainer}> + <AcceptDeclineButtons + requester={{id, username, first_name, last_name}} + onAccept={handleAcceptRequest} + onReject={handleDeclineFriendRequest} + /> + </View> + )} + {/* Moment Image Preview */} + {(notification_type === 'CMT' || + notification_type === 'MOM_3+' || + notification_type === 'MOM_FRIEND') && + notification_object && ( + <TouchableWithoutFeedback + style={styles.moment} + onPress={onNotificationTap}> + <Image style={styles.imageFlex} source={{uri: momentURI}} /> + </TouchableWithoutFeedback> + )} + </> )} - {(notification_type === 'CMT' || - notification_type === 'MOM_3+' || - notification_type === 'MOM_FRIEND') && - notification_object && ( - <TouchableWithoutFeedback - style={styles.moment} - onPress={onNotificationTap}> - <Image style={styles.imageFlex} source={{uri: momentURI}} /> - </TouchableWithoutFeedback> - )} </View> ); |
