aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/AcceptDeclineButtons.tsx78
-rw-r--r--src/components/common/TaggPopup.tsx71
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/moments/Moment.tsx24
-rw-r--r--src/components/notifications/Notification.tsx150
-rw-r--r--src/components/onboarding/LinkSocialMedia.tsx5
-rw-r--r--src/components/profile/Content.tsx62
-rw-r--r--src/components/profile/MomentMoreInfoDrawer.tsx7
-rw-r--r--src/components/profile/ProfileBody.tsx143
-rw-r--r--src/components/profile/ProfilePreview.tsx28
-rw-r--r--src/components/taggs/Tagg.tsx17
11 files changed, 386 insertions, 200 deletions
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
new file mode 100644
index 00000000..221056c0
--- /dev/null
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+
+interface AcceptDeclineButtonsProps {
+ requester: ProfilePreviewType;
+ onAccept: () => void;
+ onReject: () => void;
+ externalStyles?: Record<string, StyleProp<ViewStyle>>;
+}
+const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
+ requester,
+ onAccept,
+ onReject,
+ externalStyles,
+}) => {
+ return (
+ <View style={[styles.container, externalStyles?.container]}>
+ <TouchableOpacity
+ style={[styles.genericButtonStyle, styles.acceptButton]}
+ onPress={onAccept}>
+ <Text style={[styles.buttonTitle, styles.acceptButtonTitleColor]}>
+ Accept
+ </Text>
+ </TouchableOpacity>
+
+ <TouchableOpacity
+ style={[styles.genericButtonStyle, styles.rejectButton]}
+ onPress={onReject}>
+ <Text style={[styles.buttonTitle, styles.rejectButtonTitleColor]}>
+ Reject
+ </Text>
+ </TouchableOpacity>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ },
+ genericButtonStyle: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.14,
+ height: SCREEN_WIDTH * 0.06,
+ borderRadius: 5,
+ padding: 0,
+ marginTop: 8,
+ marginRight: '3%',
+ },
+ acceptButton: {
+ padding: 0,
+ backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ },
+ rejectButton: {
+ borderWidth: 1,
+ backgroundColor: 'white',
+ borderColor: TAGG_TEXT_LIGHT_BLUE,
+ },
+ acceptButtonTitleColor: {
+ color: 'white',
+ },
+ rejectButtonTitleColor: {
+ color: TAGG_TEXT_LIGHT_BLUE,
+ },
+ buttonTitle: {
+ padding: 0,
+ fontSize: 14,
+ fontWeight: '800',
+ },
+});
+
+export default AcceptDeclineButtons;
diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx
index 86a472b1..b5ac32ec 100644
--- a/src/components/common/TaggPopup.tsx
+++ b/src/components/common/TaggPopup.tsx
@@ -7,6 +7,7 @@ import {ArrowButton} from '..';
import {OnboardingStackParams} from '../../routes';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {BlurView} from '@react-native-community/blur';
type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
type TaggPopupNavigationProps = StackNavigationProp<
@@ -31,41 +32,43 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
const {messageHeader, messageBody, next} = route.params.popupProps;
return (
- <TouchableOpacity
- style={styles.container}
- onPressOut={() => {
- navigation.goBack();
- }}>
- <View style={styles.popup}>
- <Image
- style={styles.icon}
- source={require('../../assets/icons/plus-logo.png')}
- />
- <View style={styles.textContainer}>
- <Text style={styles.header}>{messageHeader}</Text>
- <Text style={styles.subtext}>{messageBody}</Text>
- </View>
- {!next && (
- <TouchableOpacity
- style={styles.closeButton}
- onPress={() => {
- navigation.goBack();
- }}>
- <CloseIcon height={'50%'} width={'50%'} color={'white'} />
- </TouchableOpacity>
- )}
- </View>
- {next && (
- <View style={styles.footer}>
- <ArrowButton
- direction="forward"
- onPress={() => {
- navigation.navigate('TaggPopup', {popupProps: next});
- }}
+ <BlurView blurType="light" blurAmount={2} style={styles.container}>
+ <TouchableOpacity
+ style={styles.container}
+ onPressOut={() => {
+ navigation.goBack();
+ }}>
+ <View style={styles.popup}>
+ <Image
+ style={styles.icon}
+ source={require('../../assets/icons/plus-logo.png')}
/>
+ <View style={styles.textContainer}>
+ <Text style={styles.header}>{messageHeader}</Text>
+ <Text style={styles.subtext}>{messageBody}</Text>
+ </View>
+ {!next && (
+ <TouchableOpacity
+ style={styles.closeButton}
+ onPress={() => {
+ navigation.goBack();
+ }}>
+ <CloseIcon height={'50%'} width={'50%'} color={'white'} />
+ </TouchableOpacity>
+ )}
</View>
- )}
- </TouchableOpacity>
+ {next && (
+ <View style={styles.footer}>
+ <ArrowButton
+ direction="forward"
+ onPress={() => {
+ navigation.navigate('TaggPopup', {popupProps: next});
+ }}
+ />
+ </View>
+ )}
+ </TouchableOpacity>
+ </BlurView>
);
};
@@ -75,6 +78,8 @@ const styles = StyleSheet.create({
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
+ width: '100%',
+ height: '100%',
},
whiteColor: {
color: 'white',
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 9162ec70..61c7fa26 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -19,3 +19,4 @@ export {default as TaggLoadingTndicator} from './TaggLoadingIndicator';
export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
export {default as TaggPopUp} from './TaggPopup';
export {default as TaggPrompt} from './TaggPrompt';
+export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 6dbcd170..7905e8a9 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,27 +1,20 @@
import {useNavigation} from '@react-navigation/native';
import React, {Fragment} from 'react';
-import {
- Alert,
- StyleProp,
- StyleSheet,
- View,
- ViewProps,
- ViewStyle,
-} from 'react-native';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {Text} from 'react-native-animatable';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import ImagePicker from 'react-native-image-crop-picker';
import LinearGradient from 'react-native-linear-gradient';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
-import UpIcon from '../../assets/icons/up_icon.svg';
-import DownIcon from '../../assets/icons/down_icon.svg';
+import {MomentType, ScreenType} from 'src/types';
import DeleteIcon from '../../assets/icons/delete-logo.svg';
+import DownIcon from '../../assets/icons/down_icon.svg';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import UpIcon from '../../assets/icons/up_icon.svg';
import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
import {SCREEN_WIDTH} from '../../utils';
-import ImagePicker from 'react-native-image-crop-picker';
import MomentTile from './MomentTile';
-import {MomentType, ScreenType} from 'src/types';
-import {useDispatch} from 'react-redux';
interface MomentProps {
title: string;
@@ -49,7 +42,6 @@ const Moment: React.FC<MomentProps> = ({
externalStyles,
}) => {
const navigation = useNavigation();
- const dispatch = useDispatch();
const navigateToImagePicker = () => {
ImagePicker.openPicker({
@@ -77,7 +69,7 @@ const Moment: React.FC<MomentProps> = ({
})
.catch((err) => {
if (err.code && err.code !== 'E_PICKER_CANCELLED') {
- Alert.alert('Unable to upload moment!');
+ Alert.alert(ERROR_UPLOAD_MOMENT_SHORT);
}
});
};
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 184e3f27..e6d16f82 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,35 +1,30 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
-import {
- ActivityIndicatorBase,
- Alert,
- Image,
- StyleSheet,
- Text,
- View,
-} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {Button} from 'react-native-elements';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-import {useDispatch, useSelector, useStore} from 'react-redux';
-import {MomentCommentsScreen} from '../../screens';
-import {loadAvatar} from '../../services';
+import {useDispatch, useStore} from 'react-redux';
import {
- EMPTY_MOMENTS_LIST,
- EMPTY_MOMENT_CATEGORIES,
-} from '../../store/initialStates';
-import {userSocialsReducer} from '../../store/reducers';
-import {RootState} from '../../store/rootReducer';
-import {NotificationType, ScreenType} from '../../types';
+ declineFriendRequest,
+ loadUserNotifications,
+ updateUserXFriends,
+} from '../../store/actions';
+import {acceptFriendRequest} from '../../store/actions';
+import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
import {
fetchUserX,
SCREEN_HEIGHT,
SCREEN_WIDTH,
userXInStore,
} from '../../utils';
+import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
+import {loadAvatar, loadMomentThumbnail} from '../../services';
+
interface NotificationProps {
item: NotificationType;
- userXId: string | undefined;
screenType: ScreenType;
+ moments: MomentType[];
}
const Notification: React.FC<NotificationProps> = (props) => {
@@ -41,21 +36,17 @@ const Notification: React.FC<NotificationProps> = (props) => {
notification_object,
unread,
},
- userXId,
screenType,
+ moments: loggedInUserMoments,
} = props;
+
const navigation = useNavigation();
const state: RootState = useStore().getState();
const dispatch = useDispatch();
- const {moments: loggedInUserMoments} =
- notification_type === 'CMT'
- ? useSelector((state: RootState) => state.moments)
- : {moments: undefined};
const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
-
useEffect(() => {
let mounted = true;
const loadAvatarImage = async (user_id: string) => {
@@ -70,24 +61,26 @@ const Notification: React.FC<NotificationProps> = (props) => {
};
}, [id]);
- // TODO: this should be moment thumbnail, waiting for that to complete
- // useEffect(() => {
- // let mounted = true;
- // const loadMomentImage = async (user_id: string) => {
- // const response = await loadAvatar(user_id, true);
- // if (mounted) {
- // setMomentURI(response);
- // }
- // };
- // loadMomentImage(id);
- // return () => {
- // mounted = false;
- // };
- // }, [id, notification_object]);
+ useEffect(() => {
+ let mounted = true;
+ const loadMomentImage = async (moment_id: string) => {
+ const response = await loadMomentThumbnail(moment_id);
+ if (mounted && response) {
+ setMomentURI(response);
+ }
+ };
+ if (notification_type === 'CMT' && notification_object) {
+ loadMomentImage(notification_object.moment_id);
+ return () => {
+ mounted = false;
+ };
+ }
+ }, [id, notification_object, notification_type]);
const onNotificationTap = async () => {
switch (notification_type) {
- case 'FRD':
+ case 'FRD_ACPT':
+ case 'FRD_REQ':
if (!userXInStore(state, screenType, id)) {
await fetchUserX(
dispatch,
@@ -108,7 +101,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
if (moment) {
navigation.push('IndividualMoment', {
moment,
- userXId,
+ userXId: undefined, // we're only viewing our own moment here
screenType,
});
setTimeout(() => {
@@ -124,34 +117,52 @@ const Notification: React.FC<NotificationProps> = (props) => {
}
};
+ const handleAcceptRequest = async () => {
+ await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+ await dispatch(updateUserXFriends(id, state));
+ dispatch(loadUserNotifications());
+ };
+
+ const handleDeclineFriendRequest = async () => {
+ await dispatch(declineFriendRequest(id));
+ dispatch(loadUserNotifications());
+ };
+
return (
- <TouchableWithoutFeedback
- style={[styles.container, {backgroundColor}]}
- onPress={onNotificationTap}>
- <View style={styles.avatarContainer}>
- <Image
- style={styles.avatar}
- source={
- avatarURI
- ? {uri: avatarURI, cache: 'only-if-cached'}
- : require('../../assets/images/avatar-placeholder.png')
- }
- />
- </View>
- <View style={styles.contentContainer}>
- <Text style={styles.actorName}>
- {first_name} {last_name}
- </Text>
- <Text>{verbage}</Text>
- </View>
- {/* TODO: Still WIP */}
- {/* {notification_type === 'CMT' && notification_object && (
- <Image
- style={styles.moment}
- source={{uri: momentURI, cache: 'only-if-cached'}}
- />
- )} */}
- </TouchableWithoutFeedback>
+ <>
+ <TouchableWithoutFeedback
+ style={[styles.container, {backgroundColor}]}
+ onPress={onNotificationTap}>
+ <View style={styles.avatarContainer}>
+ <Image
+ style={styles.avatar}
+ source={
+ avatarURI
+ ? {uri: avatarURI, cache: 'only-if-cached'}
+ : require('../../assets/images/avatar-placeholder.png')
+ }
+ />
+ </View>
+ <View style={styles.contentContainer}>
+ <Text style={styles.actorName}>
+ {first_name} {last_name}
+ </Text>
+ <Text>{verbage}</Text>
+ </View>
+ {notification_type === 'FRD_REQ' && (
+ <View style={styles.buttonsContainer}>
+ <AcceptDeclineButtons
+ requester={{id, username, first_name, last_name}}
+ onAccept={handleAcceptRequest}
+ onReject={handleDeclineFriendRequest}
+ />
+ </View>
+ )}
+ {notification_type === 'CMT' && notification_object && (
+ <Image style={styles.moment} source={{uri: momentURI}} />
+ )}
+ </TouchableWithoutFeedback>
+ </>
);
};
@@ -163,7 +174,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
avatarContainer: {
- marginLeft: '5%',
+ marginLeft: '8%',
flex: 1,
justifyContent: 'center',
},
@@ -178,7 +189,7 @@ const styles = StyleSheet.create({
height: '80%',
flexDirection: 'column',
justifyContent: 'space-around',
- marginRight: SCREEN_WIDTH / 6,
+ marginRight: '15%',
},
actorName: {
fontSize: 15,
@@ -190,6 +201,7 @@ const styles = StyleSheet.create({
width: 42,
right: '5%',
},
+ buttonsContainer: {},
});
export default Notification;
diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx
index c7b0a6b4..6cb7e9cf 100644
--- a/src/components/onboarding/LinkSocialMedia.tsx
+++ b/src/components/onboarding/LinkSocialMedia.tsx
@@ -13,6 +13,7 @@ import {
SOCIAL_FONT_COLORS,
TAGG_ICON_DIM,
} from '../../constants/constants';
+import {ERROR_LINK, SUCCESS_LINK} from '../../constants/strings';
import {
handlePressForAuthBrowser,
registerNonIntegratedSocialLink,
@@ -64,12 +65,12 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
const linkNonIntegratedSocial = async (username: string) => {
if (await registerNonIntegratedSocialLink(label, username)) {
- Alert.alert(`Successfully linked ${label} 🎉`);
+ Alert.alert(SUCCESS_LINK(label));
setAuthenticated(true);
} else {
// If we display too fast the alert will get dismissed with the modal
setTimeout(() => {
- Alert.alert(`Something went wrong, we can't link with ${label} 😔`);
+ Alert.alert(ERROR_LINK(label));
}, 500);
}
};
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 1d639a41..e7fb566b 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -12,6 +12,8 @@ import {
import Animated from 'react-native-reanimated';
import {
CategorySelectionScreenType,
+ FriendshipStatusType,
+ MomentCategoryType,
MomentType,
ProfilePreviewType,
ProfileType,
@@ -19,7 +21,13 @@ import {
UserType,
} from '../../types';
import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {fetchUserX, moveCategory, SCREEN_HEIGHT, userLogin} from '../../utils';
+import {
+ fetchUserX,
+ getUserAsProfilePreviewType,
+ moveCategory,
+ SCREEN_HEIGHT,
+ userLogin,
+} from '../../utils';
import TaggsBar from '../taggs/TaggsBar';
import {Moment} from '../moments';
import ProfileBody from './ProfileBody';
@@ -34,6 +42,7 @@ import {
updateUserXFriends,
updateMomentCategories,
deleteUserMomentsForCategory,
+ updateUserXProfileAllScreens,
} from '../../store/actions';
import {
NO_USER,
@@ -199,18 +208,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
]),
);
- /**
- * This hook is called on load of profile and when you update the friends list.
- */
- useEffect(() => {
- const isActuallyAFriend = friendsLoggedInUser.some(
- (friend) => friend.username === user.username,
- );
- if (isFriend != isActuallyAFriend) {
- setIsFriend(isActuallyAFriend);
- }
- }, [friendsLoggedInUser]);
-
useEffect(() => {
const isActuallyBlocked = blockedUsers.some(
(cur_user) => user.username === cur_user.username,
@@ -220,38 +217,29 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
}
}, [blockedUsers, user]);
- /**
- * The object returned by this method is added to the list of blocked / friended users by the reducer.
- * Which helps us prevent an extra api call to the backend just to fetch a user.
+ // Handles click on friend/requested/unfriend button
+ /*
+ * When user logged in clicks on the friend button:
+ A request is sent.
+ Which means you have to update the status of their friendshpi to requested
+ When the status is changed to requested the button should change to requested.
+ When the button is changed to requested and thr user clicks on it,
+ a request much go to the backend to delete that request
+ When that succeeds, their friendship must be updated to no-record again;
+ When the button is changed to no_record, the add friends button should be displayed again
*/
- const getUserAsProfilePreviewType = (
- passedInUser: UserType,
- passedInProfile: ProfileType,
- ): ProfilePreviewType => {
- const fullName = passedInProfile.name.split(' ');
- return {
- id: passedInUser.userId,
- username: passedInUser.username,
- first_name: fullName[0],
- last_name: fullName[1],
- };
- };
-
- /**
- * Handles a click on the friend / unfriend button.
- * friendUnfriendUser takes care of updating the friends list for loggedInUser
- * updateUserXFriends updates friends list for the new friend.
- */
-
const handleFriendUnfriend = async () => {
+ const {friendship_status} = profile;
await dispatch(
friendUnfriendUser(
loggedInUser,
getUserAsProfilePreviewType(user, profile),
- isFriend,
+ friendship_status,
+ screenType,
),
);
await dispatch(updateUserXFriends(user.userId, state));
+ dispatch(updateUserXProfileAllScreens(user.userId, state));
};
/**
@@ -296,7 +284,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
momentCategories.filter((mc) => mc !== category),
false,
),
- );
+ )
dispatch(deleteUserMomentsForCategory(category));
},
},
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index e127e05c..77c349ca 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import {Alert, StyleSheet, TouchableOpacity, ViewProps} from 'react-native';
import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings';
import {deleteMoment, sendReport} from '../../services';
import {GenericMoreInfoDrawer} from '../common';
@@ -21,7 +22,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
if (success) {
// set time out for UI transitions
setTimeout(() => {
- Alert.alert('Moment deleted!', '', [
+ Alert.alert(MOMENT_DELETED_MSG, '', [
{
text: 'OK',
onPress: () => dismissScreenAndUpdate(),
@@ -31,9 +32,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
}, 500);
} else {
setTimeout(() => {
- Alert.alert(
- 'We were unable to delete that moment 😭 , please try again later!',
- );
+ Alert.alert(ERROR_DELETE_MOMENT);
}, 500);
}
});
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index f4711300..6284ff59 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,15 +1,28 @@
import React from 'react';
import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
-import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
+import {Button} from 'react-native-elements';
+import {
+ TAGG_DARK_BLUE,
+ TAGG_TEXT_LIGHT_BLUE,
+ TOGGLE_BUTTON_TYPE,
+} from '../../constants';
import ToggleButton from './ToggleButton';
import {RootState} from '../../store/rootReducer';
-import {useSelector} from 'react-redux';
-import {ScreenType} from '../../types';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {FriendshipStatusType, ScreenType} from '../../types';
import {NO_PROFILE} from '../../store/initialStates';
+import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
+import {AcceptDeclineButtons} from '../common';
+import {
+ acceptFriendRequest,
+ declineFriendRequest,
+ loadUserNotifications,
+ updateUserXFriends,
+ updateUserXProfileAllScreens,
+} from '../../store/actions';
interface ProfileBodyProps {
onLayout: (event: LayoutChangeEvent) => void;
- isFriend: boolean;
isBlocked: boolean;
handleFriendUnfriend: () => void;
handleBlockUnblock: () => void;
@@ -18,21 +31,42 @@ interface ProfileBodyProps {
}
const ProfileBody: React.FC<ProfileBodyProps> = ({
onLayout,
- isFriend,
isBlocked,
handleFriendUnfriend,
handleBlockUnblock,
userXId,
screenType,
}) => {
- const {
- profile = NO_PROFILE,
- user: {username},
- } = userXId
+ const {profile = NO_PROFILE, user} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
: useSelector((state: RootState) => state.user);
- const {biography, website} = profile;
+ const {
+ biography,
+ website,
+ friendship_status,
+ friendship_requester_id,
+ } = profile;
+
+ const {id, username, first_name, last_name} = getUserAsProfilePreviewType(
+ user,
+ profile,
+ );
+
+ const state: RootState = useStore().getState();
+ const dispatch = useDispatch();
+
+ const handleAcceptRequest = async () => {
+ await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+ await dispatch(updateUserXFriends(id, state));
+ dispatch(updateUserXProfileAllScreens(id, state));
+ };
+
+ const handleDeclineFriendRequest = async () => {
+ await dispatch(declineFriendRequest(id));
+ dispatch(updateUserXProfileAllScreens(id, state));
+ };
+
return (
<View onLayout={onLayout} style={styles.container}>
<Text style={styles.username}>{`@${username}`}</Text>
@@ -57,17 +91,47 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
buttonType={TOGGLE_BUTTON_TYPE.BLOCK_UNBLOCK}
/>
</View>
-
)}
{userXId && !isBlocked && (
- <View style={styles.toggleButtonContainer}>
- <ToggleButton
- toggleState={isFriend}
- handleToggle={handleFriendUnfriend}
- buttonType={TOGGLE_BUTTON_TYPE.FRIEND_UNFRIEND}
- />
+ <View style={styles.buttonsContainer}>
+ {friendship_status === 'no_record' && (
+ <Button
+ title={'Add Friend'}
+ buttonStyle={styles.button}
+ titleStyle={styles.buttonTitle}
+ onPress={handleFriendUnfriend} // requested, requested status
+ />
+ )}
+ {friendship_status === 'friends' && (
+ <Button
+ title={'Unfriend'}
+ buttonStyle={styles.button}
+ titleStyle={styles.buttonTitle}
+ onPress={handleFriendUnfriend} // unfriend, no record status
+ />
+ )}
+ {(friendship_status === 'requested' &&
+ friendship_requester_id !== userXId && (
+ <Button
+ title={'Requested'}
+ buttonStyle={styles.requestedButton}
+ titleStyle={styles.requestedButtonTitle}
+ onPress={handleFriendUnfriend} // delete request, no record status
+ />
+ )) ||
+ (friendship_status === 'requested' &&
+ friendship_requester_id === userXId && (
+ <AcceptDeclineButtons
+ requester={getUserAsProfilePreviewType(
+ {userId: userXId, username},
+ profile,
+ )}
+ onAccept={handleAcceptRequest}
+ onReject={handleDeclineFriendRequest}
+ externalStyles={{container: styles.acceptRejectContainer}}
+ />
+ ))}
</View>
-
)}
</View>
);
@@ -80,6 +144,15 @@ const styles = StyleSheet.create({
paddingTop: '3.5%',
paddingBottom: '2%',
},
+ acceptRejectContainer: {
+ flexDirection: 'row',
+ },
+ buttonsContainer: {
+ flexDirection: 'row',
+ flex: 1,
+ paddingTop: '3.5%',
+ paddingBottom: '2%',
+ },
container: {
paddingVertical: '1%',
paddingHorizontal: 18,
@@ -100,6 +173,40 @@ const styles = StyleSheet.create({
color: TAGG_DARK_BLUE,
marginBottom: '1%',
},
+ requestedButton: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.4,
+ height: SCREEN_WIDTH * 0.09,
+ borderColor: TAGG_TEXT_LIGHT_BLUE,
+ borderWidth: 3,
+ borderRadius: 5,
+ marginRight: '2%',
+ padding: 0,
+ backgroundColor: 'transparent',
+ },
+ requestedButtonTitle: {
+ color: TAGG_TEXT_LIGHT_BLUE,
+ padding: 0,
+ fontSize: 14,
+ fontWeight: '700',
+ },
+ buttonTitle: {
+ color: 'white',
+ padding: 0,
+ fontSize: 14,
+ fontWeight: '700',
+ },
+ button: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.4,
+ height: SCREEN_WIDTH * 0.09,
+ padding: 0,
+ borderRadius: 5,
+ marginRight: '2%',
+ backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ },
});
export default ProfileBody;
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 134e94cd..e6311daa 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -18,9 +18,10 @@ import {isUserBlocked, loadAvatar} from '../../services';
import {useSelector, useDispatch, useStore} from 'react-redux';
import {RootState} from '../../store/rootreducer';
import {logout} from '../../store/actions';
-import {fetchUserX, userXInStore} from '../../utils';
+import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
import {SearchResultsBackground} from '../search';
import NavigationBar from 'src/routes/tabs';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
const NO_USER: UserType = {
userId: '',
@@ -72,15 +73,6 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
* needed to make space.
*/
- const checkIfUserIsBlocked = async (userId: string) => {
- const token = await AsyncStorage.getItem('token');
- if (!token) {
- dispatch(logout());
- return false;
- }
- return await isUserBlocked(userId, loggedInUser.userId, token);
- };
-
const state: RootState = useStore().getState();
const addToRecentlyStoredAndNavigateToProfile = async () => {
@@ -92,13 +84,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
};
try {
+ //If the logged in user is blocked by the user being viewed, do not proceed.
+ const isUserBlocked = await checkIfUserIsBlocked(
+ user.id,
+ dispatch,
+ loggedInUser,
+ );
+ if (isUserBlocked) {
+ Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE);
+ return;
+ }
if (previewType !== 'Comment') {
- //If the logged in user is blocked by the user being viewed, do not proceed.
- const isUserBlocked = await checkIfUserIsBlocked(user.id);
- if (isUserBlocked) {
- Alert.alert('You cannot view this profile');
- return;
- }
const jsonValue = await AsyncStorage.getItem(
'@recently_searched_users',
);
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 12172df9..82ac07df 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -17,6 +17,11 @@ import {
} from '../../services';
import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
import {UserType} from '../../types';
+import {
+ ERROR_LINK,
+ ERROR_UNABLE_TO_FIND_PROFILE,
+ SUCCESS_LINK,
+} from '../../constants/strings';
interface TaggProps {
social: string;
@@ -56,7 +61,7 @@ const Tagg: React.FC<TaggProps> = ({
show auth browser
case !integrated_social:
show modal
- Tagg's "Tagg" will use the Ring instead of PurpleRing
+ Tagg's "Tagg" will use the Ring instead of PurpleRing
*/
const modalOrAuthBrowserOrPass = async () => {
@@ -71,7 +76,7 @@ const Tagg: React.FC<TaggProps> = ({
if (socialURL) {
Linking.openURL(socialURL);
} else {
- Alert.alert('We were unable to find this profile 😔');
+ Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE);
}
});
}
@@ -79,7 +84,9 @@ const Tagg: React.FC<TaggProps> = ({
if (isIntegrated) {
handlePressForAuthBrowser(social).then((success) => {
setTaggsNeedUpdate(success);
- if (success) setSocialDataNeedUpdate(social, '');
+ if (success) {
+ setSocialDataNeedUpdate(social, '');
+ }
});
} else {
setModalVisible(true);
@@ -105,13 +112,13 @@ const Tagg: React.FC<TaggProps> = ({
const linkNonIntegratedSocial = async (username: string) => {
if (await registerNonIntegratedSocialLink(social, username)) {
- Alert.alert(`Successfully linked ${social} 🎉`);
+ Alert.alert(SUCCESS_LINK(social));
setTaggsNeedUpdate(true);
setSocialDataNeedUpdate(social, username);
} else {
// If we display too fast the alert will get dismissed with the modal
setTimeout(() => {
- Alert.alert(`Something went wrong, we can't link with ${social} 😔`);
+ Alert.alert(ERROR_LINK(social));
}, 500);
}
};
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-24 23:17:06 +0000