From df6595694c678657fec30d881fb1edcd39b62f17 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 15 Jan 2021 03:33:59 -0800 Subject: friend request --- src/components/profile/Content.tsx | 67 +++++++++++++--------- src/components/profile/ProfileBody.tsx | 100 ++++++++++++++++++++++++++++----- 2 files changed, 127 insertions(+), 40 deletions(-) (limited to 'src/components/profile') 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 = ({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 = ({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 = ({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 = ({ onLayout, - isFriend, isBlocked, handleFriendUnfriend, handleBlockUnblock, @@ -32,7 +37,13 @@ const ProfileBody: React.FC = ({ ? 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 ( {`@${username}`} @@ -57,24 +68,51 @@ const ProfileBody: React.FC = ({ buttonType={TOGGLE_BUTTON_TYPE.BLOCK_UNBLOCK} /> - )} {userXId && !isBlocked && ( - - + + {friendship_status === 'no_record' && ( +