diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/common/BadgeDetailView.tsx | 89 | ||||
| -rw-r--r-- | src/components/notifications/Notification.tsx | 49 |
2 files changed, 66 insertions, 72 deletions
diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx index bc4384e8..6504300c 100644 --- a/src/components/common/BadgeDetailView.tsx +++ b/src/components/common/BadgeDetailView.tsx @@ -1,24 +1,15 @@ import {useNavigation} from '@react-navigation/core'; import React, {useEffect, useState} from 'react'; -import { - ActivityIndicator, - FlatList, - Image, - Modal, - StyleSheet, - Text, - View, -} from 'react-native'; +import {FlatList, Image, Modal, StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import LinearGradient from 'react-native-linear-gradient'; -import {useSelector} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {BADGE_GRADIENT_FIRST} from '../../constants'; import {BADGE_DATA} from '../../constants/badges'; -import {getSuggestedPeopleProfile, removeBadgesService} from '../../services'; import {RootState} from '../../store/rootreducer'; -import {ScreenType, UniversityBadge} from '../../types'; -import {getUniversityBadge, normalize} from '../../utils'; +import {ScreenType} from '../../types'; +import {getUniversityBadge, normalize, removeUserBadge} from '../../utils'; interface BadgeDetailModalProps { userXId: string | undefined; @@ -35,38 +26,21 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ isEditable = true, setBadgeViewVisible, }) => { - const {user, profile} = useSelector((state: RootState) => + const dispatch = useDispatch(); + const { + user, + profile: {university, badges}, + } = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); const navigation = useNavigation(); - const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]); - const [isLoading, setIsLoading] = useState(true); const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>( [], ); - const fetchBadges = async () => { - if (user.userId) { - const response = await getSuggestedPeopleProfile(user.userId); - if (response) { - const data = response.badges; - let extractedBadgeNames: UniversityBadge[] = []; - data.forEach((badge) => { - extractedBadgeNames.push(badge); - }); - setSelectedBadges(extractedBadgeNames); - } - } - }; - - useEffect(() => { - setIsLoading(true); - fetchBadges(); - }, []); - useEffect(() => { let badgesWithImage = []; - selectedBadges.forEach((e) => { + badges.forEach((e) => { const uniData = BADGE_DATA[e.university]; const categoryData = uniData.filter((u) => { return u.title === e.category; @@ -81,14 +55,11 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ }); setTimeout(() => { setSelectedBadgesWithImage(badgesWithImage); - setIsLoading(false); }, 250); - }, [selectedBadges]); + }, [badges]); - const removeBadgeCell = async (badge: string) => { - setIsLoading(true); - await removeBadgesService([badge], user.userId); - fetchBadges(); + const removeBadgeCell = async (badgeName: string) => { + await removeUserBadge(badges, badgeName, user.userId, dispatch); }; const badgeEditCell = ({item: {id, name, badgeImage}}) => { @@ -175,38 +146,27 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({ <View style={styles.modalImageContainerStyles}> <Image style={styles.modalImageStyles} - source={getUniversityBadge(profile.university, 'Crest')} + source={getUniversityBadge(university, 'Crest')} /> </View> </View> {modalHeader()} - {!isLoading && ( - <View> - <FlatList - contentContainerStyle={styles.modalListStyles} - scrollEnabled={false} - data={selectedBadgesWithImage} - numColumns={3} - renderItem={badgeEditCell} - keyExtractor={(item) => item.id.toString()} - /> - </View> - )} - {isLoading && _loaderView()} + <View> + <FlatList + contentContainerStyle={styles.modalListStyles} + scrollEnabled={false} + data={selectedBadgesWithImage} + numColumns={3} + renderItem={badgeEditCell} + keyExtractor={(item) => item.id.toString()} + /> + </View> {isEditable && addButton()} </View> </View> ); }; - const _loaderView = () => { - return ( - <View style={styles.loaderStyles}> - <ActivityIndicator animating={isLoading} size="large" color="black" /> - </View> - ); - }; - return ( <Modal animationType="fade" @@ -269,7 +229,6 @@ const styles = StyleSheet.create({ lineHeight: normalize(20.29), textAlign: 'center', }, - loaderStyles: {justifyContent: 'center', marginVertical: 20}, modalSubheadingStyles: { fontWeight: '600', fontSize: normalize(11), diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index a74480b4..ae884b42 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -26,6 +26,8 @@ import { } from '../../types'; import { fetchUserX, + getTimeInShorthand, + normalize, SCREEN_HEIGHT, SCREEN_WIDTH, userXInStore, @@ -47,6 +49,7 @@ const Notification: React.FC<NotificationProps> = (props) => { notification_type, notification_object, unread, + timestamp, }, screenType, loggedInUser, @@ -231,7 +234,12 @@ const Notification: React.FC<NotificationProps> = (props) => { {notification_type === 'SYSTEM_MSG' ? ( // Only verbage <View style={styles.contentContainer}> - <Text style={styles.actorName}>{verbage}</Text> + <View style={styles.textContainerStyles}> + <Text style={styles.actorName}>{verbage}</Text> + <Text style={styles.timeStampStyles}> + {getTimeInShorthand(timestamp)} + </Text> + </View> </View> ) : ( <> @@ -242,8 +250,17 @@ const Notification: React.FC<NotificationProps> = (props) => { {first_name} {last_name} </Text> </TouchableWithoutFeedback> - <TouchableWithoutFeedback onPress={onNotificationTap}> - <Text>{verbage}</Text> + <TouchableWithoutFeedback + style={styles.textContainerStyles} + onPress={onNotificationTap}> + <Text style={styles.verbageStyles}> + {verbage} + <Text style={styles.timeStampStyles}> + {' '} + {getTimeInShorthand(timestamp)} + </Text> + </Text> + {/* <Text style={styles.verbageStyles}>{verbage}</Text> */} </TouchableWithoutFeedback> </View> {/* Friend request accept/decline button */} @@ -304,22 +321,40 @@ const styles = StyleSheet.create({ contentContainer: { flex: 5, marginLeft: '5%', + marginRight: '3%', height: '80%', flexDirection: 'column', justifyContent: 'space-around', }, actorName: { - fontSize: 15, + fontSize: normalize(12), fontWeight: '700', + lineHeight: normalize(14.32), }, moment: { - height: 42, - width: 42, - right: '5%', + height: normalize(42), + width: normalize(42), }, buttonsContainer: { height: '80%', }, + textContainerStyles: { + flexDirection: 'row', + flexWrap: 'wrap', + }, + verbageStyles: { + fontWeight: '500', + fontSize: normalize(11), + lineHeight: normalize(13.13), + }, + timeStampStyles: { + fontWeight: '700', + fontSize: normalize(12), + lineHeight: normalize(14.32), + marginHorizontal: 2, + color: '#828282', + textAlignVertical: 'center', + }, imageFlex: { flex: 1, }, |