aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/AcceptDeclineButtons.tsx88
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/notifications/Notification.tsx90
-rw-r--r--src/components/profile/Content.tsx67
-rw-r--r--src/components/profile/ProfileBody.tsx100
5 files changed, 282 insertions, 64 deletions
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
new file mode 100644
index 00000000..2ebae029
--- /dev/null
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {Button} from 'react-native-elements';
+import {useDispatch, useStore} from 'react-redux';
+import {
+ declineFriendRequest,
+ loadUserNotifications,
+ updateUserXFriends,
+} from '../../store/actions';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {acceptFriendRequest} from '../../store/actions';
+import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface AcceptDeclineButtonsProps {
+ requester: ProfilePreviewType;
+}
+const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = (props) => {
+ const {requester} = props;
+ const state: RootState = useStore().getState();
+ const dispatch = useDispatch();
+
+ const handleAcceptRequest = async () => {
+ dispatch(acceptFriendRequest(requester));
+ dispatch(updateUserXFriends(requester.id, state));
+ dispatch(loadUserNotifications());
+ };
+
+ const handleDeclineFriendRequest = async () => {
+ dispatch(declineFriendRequest(requester.id));
+ };
+ return (
+ <>
+ <Button
+ title="Accept"
+ buttonStyle={styles.acceptButton}
+ titleStyle={styles.acceptButtonTitle}
+ onPress={() => handleAcceptRequest()}
+ />
+ <Button
+ title="Reject"
+ buttonStyle={styles.rejectButton}
+ titleStyle={styles.rejectButtonTitle}
+ onPress={() => handleDeclineFriendRequest()}
+ />
+ </>
+ );
+};
+
+const styles = StyleSheet.create({
+ acceptButton: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.2,
+ height: SCREEN_WIDTH * 0.07,
+ borderRadius: 5,
+ padding: 0,
+ marginRight: '2%',
+ backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ },
+ rejectButton: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.2,
+ height: SCREEN_WIDTH * 0.07,
+ borderColor: TAGG_TEXT_LIGHT_BLUE,
+ borderWidth: 1,
+ borderRadius: 5,
+ marginRight: '2%',
+ padding: 0,
+ backgroundColor: 'white',
+ },
+ rejectButtonTitle: {
+ color: TAGG_TEXT_LIGHT_BLUE,
+ padding: 0,
+ fontSize: 14,
+ fontWeight: '800',
+ },
+ acceptButtonTitle: {
+ color: 'white',
+ padding: 0,
+ fontSize: 14,
+ fontWeight: '800',
+ },
+});
+
+export default AcceptDeclineButtons;
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/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f6a04526..5e68c6f3 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,17 +1,27 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
+import {Button} from 'react-native-elements';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useDispatch, useStore} from 'react-redux';
-import {loadAvatar} from '../../services';
+import {
+ declineFriendRequest,
+ loadUserNotifications,
+ updateUserXFriends,
+} from '../../store/actions';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {loadAvatar, unfriendUser} from '../../services';
+import {acceptFriendRequest} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
-import {NotificationType, ScreenType} from '../../types';
+import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
import {
fetchUserX,
+ getTokenOrLogout,
SCREEN_HEIGHT,
SCREEN_WIDTH,
userXInStore,
} from '../../utils';
+import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
interface NotificationProps {
item: NotificationType;
@@ -29,6 +39,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
},
screenType,
} = props;
+
const navigation = useNavigation();
const state: RootState = useStore().getState();
const dispatch = useDispatch();
@@ -36,7 +47,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
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) => {
@@ -68,7 +78,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
const onNotificationTap = async () => {
switch (notification_type) {
- case 'FRD':
+ case 'FRD_ACPT':
+ case 'FRD_REQ':
if (!userXInStore(state, screenType, id)) {
await fetchUserX(
dispatch,
@@ -86,26 +97,45 @@ const Notification: React.FC<NotificationProps> = (props) => {
}
};
+ // const handleAcceptRequest = async () => {
+ // const requester: ProfilePreviewType = {
+ // id: id,
+ // username: username,
+ // first_name: first_name,
+ // last_name: last_name,
+ // };
+ // dispatch(acceptFriendRequest(requester));
+ // dispatch(updateUserXFriends(id, state));
+ // console.log('fetching notifications since user accepted request!');
+ // dispatch(loadUserNotifications());
+ // };
+
+ // const handleDeclineFriendRequest = async () => {
+ // dispatch(declineFriendRequest(id));
+ // };
+
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>
+ <>
+ <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>
+ </TouchableWithoutFeedback>
{/* TODO: Still WIP */}
{/* {notification_type === 'CMT' && notification_object && (
<Image
@@ -113,7 +143,14 @@ const Notification: React.FC<NotificationProps> = (props) => {
source={{uri: momentURI, cache: 'only-if-cached'}}
/>
)} */}
- </TouchableWithoutFeedback>
+ {notification_type === 'FRD_REQ' && (
+ <View style={styles.buttonsContainer}>
+ <AcceptDeclineButtons
+ requester={{id, username, first_name, last_name}}
+ />
+ </View>
+ )}
+ </>
);
};
@@ -123,6 +160,8 @@ const styles = StyleSheet.create({
height: SCREEN_HEIGHT / 10,
flex: 1,
alignItems: 'center',
+ borderColor: 'red',
+ borderWidth: 2,
},
avatarContainer: {
marginLeft: '5%',
@@ -152,6 +191,9 @@ const styles = StyleSheet.create({
width: 42,
right: '5%',
},
+ buttonsContainer: {
+
+ },
});
export default Notification;
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 61a08d49..339144d6 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,7 @@ 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';
@@ -188,14 +190,14 @@ 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 isActuallyAFriend = friendsLoggedInUser.some(
+ // (friend) => friend.username === user.username,
+ // );
+ // if (isFriend != isActuallyAFriend) {
+ // setIsFriend(isActuallyAFriend);
+ // }
+ // }, [friendsLoggedInUser]);
useEffect(() => {
const isActuallyBlocked = blockedUsers.some(
@@ -206,22 +208,22 @@ 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.
- */
- 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],
- };
- };
+ // /**
+ // * 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.
+ // */
+ // 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.
@@ -229,12 +231,25 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
* updateUserXFriends updates friends list for the new friend.
*/
+ // 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 handleFriendUnfriend = async () => {
+ const {friendship_status} = profile;
await dispatch(
friendUnfriendUser(
loggedInUser,
getUserAsProfilePreviewType(user, profile),
- isFriend,
+ friendship_status,
+ screenType,
),
);
await dispatch(updateUserXFriends(user.userId, state));
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 57b617d8..87c12424 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,15 +1,21 @@
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 {FriendshipStatusType, ScreenType} from '../../types';
import {NO_PROFILE} from '../../store/initialStates';
+import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
+import {AcceptDeclineButtons} from '../common';
interface ProfileBodyProps {
onLayout: (event: LayoutChangeEvent) => void;
- isFriend: boolean;
isBlocked: boolean;
handleFriendUnfriend: () => void;
handleBlockUnblock: () => void;
@@ -18,7 +24,6 @@ interface ProfileBodyProps {
}
const ProfileBody: React.FC<ProfileBodyProps> = ({
onLayout,
- isFriend,
isBlocked,
handleFriendUnfriend,
handleBlockUnblock,
@@ -32,7 +37,13 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
? 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;
+
return (
<View onLayout={onLayout} style={styles.container}>
<Text style={styles.username}>{`@${username}`}</Text>
@@ -57,24 +68,51 @@ 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,
+ )}
+ />
+ ))}
</View>
-
)}
</View>
);
};
const styles = StyleSheet.create({
- toggleButtonContainer: {
+ buttonsContainer: {
flexDirection: 'row',
flex: 1,
paddingTop: '3.5%',
@@ -99,6 +137,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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:34:38 +0000