diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/common/AcceptDeclineButtons.tsx | 96 | ||||
| -rw-r--r-- | src/components/notifications/Notification.tsx | 46 | ||||
| -rw-r--r-- | src/components/profile/Content.tsx | 8 | ||||
| -rw-r--r-- | src/components/profile/ProfileBody.tsx | 45 |
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, |
