diff options
-rw-r--r-- | package.json | 8 | ||||
-rw-r--r-- | src/assets/icons/messages/delivered_icon.png | bin | 0 -> 65998 bytes | |||
-rw-r--r-- | src/assets/icons/messages/read_icon.png | bin | 0 -> 65884 bytes | |||
-rw-r--r-- | src/assets/icons/messages/sent_icon.png | bin | 0 -> 56234 bytes | |||
-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 | ||||
-rw-r--r-- | src/constants/api.ts | 1 | ||||
-rw-r--r-- | src/screens/badge/BadgeSelection.tsx | 7 | ||||
-rw-r--r-- | src/screens/chat/ChatScreen.tsx | 27 | ||||
-rw-r--r-- | src/screens/profile/ProfileScreen.tsx | 9 | ||||
-rw-r--r-- | src/services/SuggestedPeopleService.ts | 12 | ||||
-rw-r--r-- | src/services/UserProfileService.ts | 22 | ||||
-rw-r--r-- | src/types/types.ts | 4 | ||||
-rw-r--r-- | src/utils/messages.ts | 25 | ||||
-rw-r--r-- | yarn.lock | 26 |
17 files changed, 265 insertions, 50 deletions
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/assets/icons/messages/delivered_icon.png b/src/assets/icons/messages/delivered_icon.png Binary files differnew file mode 100644 index 00000000..0afa7e90 --- /dev/null +++ b/src/assets/icons/messages/delivered_icon.png diff --git a/src/assets/icons/messages/read_icon.png b/src/assets/icons/messages/read_icon.png Binary files differnew file mode 100644 index 00000000..a82b705d --- /dev/null +++ b/src/assets/icons/messages/read_icon.png diff --git a/src/assets/icons/messages/sent_icon.png b/src/assets/icons/messages/sent_icon.png Binary files differnew file mode 100644 index 00000000..55988c78 --- /dev/null +++ b/src/assets/icons/messages/sent_icon.png 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> ); diff --git a/src/constants/api.ts b/src/constants/api.ts index cb45b238..dd934f0e 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -16,6 +16,7 @@ export const EDIT_PROFILE_ENDPOINT: string = API_URL + 'edit-profile/'; export const SEND_OTP_ENDPOINT: string = API_URL + 'send-otp/'; export const VERIFY_OTP_ENDPOINT: string = API_URL + 'verify-otp/'; export const USER_PROFILE_ENDPOINT: string = API_URL + 'profile/'; +export const USER_PROFILE_VISITED_ENDPOINT: string = API_URL + 'profile/visited/'; export const PROFILE_INFO_ENDPOINT: string = API_URL + 'user-profile-info/'; export const HEADER_PHOTO_ENDPOINT: string = API_URL + 'header-pic/'; export const PROFILE_PHOTO_ENDPOINT: string = API_URL + 'profile-pic/'; diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx index deaefb52..2fec8ea3 100644 --- a/src/screens/badge/BadgeSelection.tsx +++ b/src/screens/badge/BadgeSelection.tsx @@ -66,13 +66,16 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => { style={styles.rightButtonContainer} onPress={async () => { if (editing) { - updateBadgesService(selectedBadges); + updateBadgesService(selectedBadges, university); navigation.navigate('UpdateSPPicture', { editing: true, }); } else { if (selectedBadges.length !== 0) { - const success = await addBadgesService(selectedBadges); + const success = await addBadgesService( + selectedBadges, + university, + ); if (success) { dispatch(suggestedPeopleBadgesFinished()); navigation.navigate('SuggestedPeople'); diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx index 656c1c47..57f2232e 100644 --- a/src/screens/chat/ChatScreen.tsx +++ b/src/screens/chat/ChatScreen.tsx @@ -16,7 +16,9 @@ import {ChatContext} from '../../App'; import { ChatHeader, ChatInput, + DateHeader, MessageAvatar, + MessageFooter, TabsGradient, TypingIndicator, } from '../../components'; @@ -37,6 +39,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => { const {setTopInset} = useAttachmentPickerContext(); const insets = useSafeAreaInsets(); const chatTheme: DeepPartial<Theme> = { + colors: { + accent_blue: '#6EE7E7', + }, messageList: { container: { backgroundColor: 'white', @@ -70,6 +75,24 @@ const ChatScreen: React.FC<ChatScreenProps> = () => { 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, }, @@ -123,6 +146,10 @@ const ChatScreen: React.FC<ChatScreenProps> = () => { copyMessage, deleteMessage, ]} + InlineDateSeparator={DateHeader} + StickyHeader={() => null} + ScrollToBottomButton={() => null} + MessageFooter={MessageFooter} TypingIndicator={TypingIndicator} myMessageTheme={loggedInUsersMessageTheme} MessageAvatar={MessageAvatar}> diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx index 6d9ef020..3dd142e1 100644 --- a/src/screens/profile/ProfileScreen.tsx +++ b/src/screens/profile/ProfileScreen.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, {useEffect} from 'react'; import {StatusBar} from 'react-native'; import {Content, TabsGradient} from '../../components'; import {RouteProp} from '@react-navigation/native'; import {MainStackParams} from '../../routes/'; +import {visitedUserProfile} from '../../services'; type ProfileScreenRouteProps = RouteProp<MainStackParams, 'Profile'>; @@ -14,6 +15,12 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => { const {screenType} = route.params; let {userXId} = route.params; + useEffect(() => { + if (userXId) { + visitedUserProfile(userXId); + } + }); + return ( <> <StatusBar barStyle="dark-content" /> diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index 4f56feb9..617f3970 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -136,11 +136,15 @@ export const getMutualBadgeHolders = async (badge_id: string) => { } }; -export const addBadgesService = async (selectedBadges: string[]) => { +export const addBadgesService = async ( + selectedBadges: string[], + university: string, +) => { try { const token = await AsyncStorage.getItem('token'); const form = new FormData(); form.append('badges', JSON.stringify(selectedBadges)); + form.append('university', JSON.stringify(university)); const response = await fetch(ADD_BADGES_ENDPOINT, { method: 'POST', headers: { @@ -161,11 +165,15 @@ export const addBadgesService = async (selectedBadges: string[]) => { } }; -export const updateBadgesService = async (selectedBadges: string[]) => { +export const updateBadgesService = async ( + selectedBadges: string[], + university: string, +) => { try { const token = await AsyncStorage.getItem('token'); const form = new FormData(); form.append('badges', JSON.stringify(selectedBadges)); + form.append('university', JSON.stringify(university)); const response = await fetch(UPDATE_BADGES_ENDPOINT, { method: 'POST', headers: { diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index 1ce1d0b5..a2237c94 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -16,6 +16,7 @@ import { SEND_OTP_ENDPOINT, TAGG_CUSTOMER_SUPPORT, USER_PROFILE_ENDPOINT, + USER_PROFILE_VISITED_ENDPOINT, VERIFY_OTP_ENDPOINT, } from '../constants'; import { @@ -412,3 +413,24 @@ export const patchEditProfile = async (form: FormData, userId: string) => { throw ERROR_DOUBLE_CHECK_CONNECTION; } }; + +export const visitedUserProfile = async (userId: string) => { + try { + const token = await AsyncStorage.getItem('token'); + const form = new FormData(); + form.append('user_id', userId); + const response = await fetch(USER_PROFILE_VISITED_ENDPOINT, { + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + Authorization: 'Token ' + token, + }, + body: form, + }); + if (response.status !== 200) { + console.error('Failed to submit a profile visit'); + } + } catch (error) { + return undefined; + } +}; diff --git a/src/types/types.ts b/src/types/types.ts index 376c4be0..8d7f4aed 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -251,7 +251,9 @@ export type TypeOfNotification = // notification_object is MomentType | 'MOM_FRIEND' // notification_object is undefined - | 'INVT_ONBRD'; + | 'INVT_ONBRD' + // notification_object is undefined + | 'SYSTEM_MSG'; export type UniversityBadge = { id: number; 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; +}; @@ -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" |