aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/AcceptDeclineButtons.tsx96
-rw-r--r--src/components/notifications/Notification.tsx46
-rw-r--r--src/components/profile/Content.tsx8
-rw-r--r--src/components/profile/ProfileBody.tsx45
4 files changed, 117 insertions, 78 deletions
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 2ebae029..164ce6e7 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -1,5 +1,12 @@
import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {
+ StyleProp,
+ StyleSheet,
+ Text,
+ View,
+ ViewProps,
+ ViewStyle,
+} from 'react-native';
import {Button} from 'react-native-elements';
import {useDispatch, useStore} from 'react-redux';
import {
@@ -12,73 +19,72 @@ import {acceptFriendRequest} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
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> = (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));
- };
+const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
+ requester,
+ onAccept,
+ onReject,
+ externalStyles,
+}) => {
return (
- <>
- <Button
- title="Accept"
- buttonStyle={styles.acceptButton}
- titleStyle={styles.acceptButtonTitle}
- onPress={() => handleAcceptRequest()}
- />
- <Button
- title="Reject"
- buttonStyle={styles.rejectButton}
- titleStyle={styles.rejectButtonTitle}
- onPress={() => handleDeclineFriendRequest()}
- />
- </>
+ <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({
- acceptButton: {
+ container: {
+ flex: 1,
+ flexDirection: 'column',
+ },
+ genericButtonStyle: {
justifyContent: 'center',
alignItems: 'center',
width: SCREEN_WIDTH * 0.2,
height: SCREEN_WIDTH * 0.07,
borderRadius: 5,
padding: 0,
- marginRight: '2%',
+ marginTop: 10,
+ marginRight: '5%',
+ },
+ acceptButton: {
+ padding: 0,
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',
+ borderColor: TAGG_TEXT_LIGHT_BLUE,
},
- rejectButtonTitle: {
+ acceptButtonTitleColor: {
+ color: 'white',
+ },
+ rejectButtonTitleColor: {
color: TAGG_TEXT_LIGHT_BLUE,
- padding: 0,
- fontSize: 14,
- fontWeight: '800',
},
- acceptButtonTitle: {
- color: 'white',
+ buttonTitle: {
padding: 0,
fontSize: 14,
fontWeight: '800',
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 5e68c6f3..42b10ea3 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -97,22 +97,16 @@ 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 handleAcceptRequest = async () => {
+ await dispatch(acceptFriendRequest({id, username, first_name, last_name}));
+ await dispatch(updateUserXFriends(id, state));
+ dispatch(loadUserNotifications());
+ };
- // const handleDeclineFriendRequest = async () => {
- // dispatch(declineFriendRequest(id));
- // };
+ const handleDeclineFriendRequest = async () => {
+ await dispatch(declineFriendRequest(id));
+ dispatch(loadUserNotifications());
+ };
return (
<>
@@ -135,6 +129,15 @@ const Notification: React.FC<NotificationProps> = (props) => {
</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>
+ )}
</TouchableWithoutFeedback>
{/* TODO: Still WIP */}
{/* {notification_type === 'CMT' && notification_object && (
@@ -143,13 +146,6 @@ const Notification: React.FC<NotificationProps> = (props) => {
source={{uri: momentURI, cache: 'only-if-cached'}}
/>
)} */}
- {notification_type === 'FRD_REQ' && (
- <View style={styles.buttonsContainer}>
- <AcceptDeclineButtons
- requester={{id, username, first_name, last_name}}
- />
- </View>
- )}
</>
);
};
@@ -160,8 +156,6 @@ const styles = StyleSheet.create({
height: SCREEN_HEIGHT / 10,
flex: 1,
alignItems: 'center',
- borderColor: 'red',
- borderWidth: 2,
},
avatarContainer: {
marginLeft: '5%',
@@ -191,9 +185,7 @@ const styles = StyleSheet.create({
width: 42,
right: '5%',
},
- buttonsContainer: {
-
- },
+ buttonsContainer: {},
});
export default Notification;
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 339144d6..f7b4b71c 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -21,7 +21,13 @@ import {
UserType,
} from '../../types';
import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
-import {fetchUserX, getUserAsProfilePreviewType, 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';
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 87c12424..edda5d43 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -8,11 +8,18 @@ import {
} from '../../constants';
import ToggleButton from './ToggleButton';
import {RootState} from '../../store/rootReducer';
-import {useSelector} from 'react-redux';
+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;
@@ -30,10 +37,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
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);
@@ -44,6 +48,31 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
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 () => {
+ try {
+ await dispatch(
+ acceptFriendRequest({id, username, first_name, last_name}),
+ );
+ await dispatch(updateUserXFriends(id, state));
+ dispatch(updateUserXProfileAllScreens(id));
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ const handleDeclineFriendRequest = async () => {
+ await dispatch(declineFriendRequest(id));
+ dispatch(updateUserXProfileAllScreens(id));
+ };
+
return (
<View onLayout={onLayout} style={styles.container}>
<Text style={styles.username}>{`@${username}`}</Text>
@@ -103,6 +132,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
{userId: userXId, username},
profile,
)}
+ onAccept={handleAcceptRequest}
+ onReject={handleDeclineFriendRequest}
+ externalStyles={{container: styles.acceptRejectContainer}}
/>
))}
</View>
@@ -112,6 +144,9 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
};
const styles = StyleSheet.create({
+ acceptRejectContainer: {
+ flexDirection: 'row',
+ },
buttonsContainer: {
flexDirection: 'row',
flex: 1,