diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/images/private-profile.png | bin | 0 -> 3750 bytes | |||
-rw-r--r-- | src/assets/images/private-profile@2x.png | bin | 0 -> 7999 bytes | |||
-rw-r--r-- | src/assets/images/private-profile@3x.png | bin | 0 -> 10081 bytes | |||
-rw-r--r-- | src/components/common/TaggPrompt.tsx | 2 | ||||
-rw-r--r-- | src/components/profile/Content.tsx | 308 | ||||
-rw-r--r-- | src/components/profile/FriendsCount.tsx | 17 | ||||
-rw-r--r-- | src/components/profile/PrivateProfile.tsx | 33 | ||||
-rw-r--r-- | src/components/profile/ProfileBody.tsx | 19 | ||||
-rw-r--r-- | src/components/profile/PublicProfile.tsx | 283 | ||||
-rw-r--r-- | src/components/taggs/Tagg.tsx | 30 | ||||
-rw-r--r-- | src/components/taggs/TaggsBar.tsx | 4 | ||||
-rw-r--r-- | src/constants/strings.ts | 1 | ||||
-rw-r--r-- | src/screens/suggestedPeople/SPBody.tsx | 14 | ||||
-rw-r--r-- | src/services/UserFriendsService.ts | 9 | ||||
-rw-r--r-- | src/store/actions/userFriends.ts | 23 | ||||
-rw-r--r-- | src/types/types.ts | 8 | ||||
-rw-r--r-- | src/utils/users.ts | 23 |
17 files changed, 446 insertions, 328 deletions
diff --git a/src/assets/images/private-profile.png b/src/assets/images/private-profile.png Binary files differnew file mode 100644 index 00000000..820ba287 --- /dev/null +++ b/src/assets/images/private-profile.png diff --git a/src/assets/images/private-profile@2x.png b/src/assets/images/private-profile@2x.png Binary files differnew file mode 100644 index 00000000..cdcf44d5 --- /dev/null +++ b/src/assets/images/private-profile@2x.png diff --git a/src/assets/images/private-profile@3x.png b/src/assets/images/private-profile@3x.png Binary files differnew file mode 100644 index 00000000..f909fe2a --- /dev/null +++ b/src/assets/images/private-profile@3x.png diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx index d65e30c6..6169b3f1 100644 --- a/src/components/common/TaggPrompt.tsx +++ b/src/components/common/TaggPrompt.tsx @@ -66,7 +66,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', - height: SCREEN_HEIGHT / 4.5, + height: SCREEN_HEIGHT / 4, }, closeButton: { position: 'relative', diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 1a5a205c..779e0525 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,128 +1,74 @@ -import {useFocusEffect, useNavigation} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import { - Alert, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, RefreshControl, StyleSheet, - Text, - View, } from 'react-native'; -import {TouchableOpacity} from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import Cover from './Cover'; -import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg'; -import {COVER_HEIGHT, TAGG_LIGHT_BLUE} from '../../constants'; -import { - UPLOAD_MOMENT_PROMPT_THREE_HEADER, - UPLOAD_MOMENT_PROMPT_THREE_MESSAGE, - UPLOAD_MOMENT_PROMPT_TWO_HEADER, - UPLOAD_MOMENT_PROMPT_TWO_MESSAGE, -} from '../../constants/strings'; +import {COVER_HEIGHT} from '../../constants'; import { blockUnblockUser, - deleteUserMomentsForCategory, loadFriendsData, - updateMomentCategories, updateUserXFriends, } from '../../store/actions'; import { - EMPTY_MOMENTS_LIST, EMPTY_PROFILE_PREVIEW_LIST, NO_PROFILE, NO_USER, } from '../../store/initialStates'; import {RootState} from '../../store/rootreducer'; -import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types'; +import {ContentProps} from '../../types'; import { + canViewProfile, fetchUserX, getUserAsProfilePreviewType, - moveCategory, - normalize, SCREEN_HEIGHT, userLogin, } from '../../utils'; -import {TaggPrompt} from '../common'; -import {Moment} from '../moments'; -import TaggsBar from '../taggs/TaggsBar'; +import Cover from './Cover'; +import PrivateProfile from './PrivateProfile'; import ProfileBody from './ProfileBody'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; - -interface ContentProps { - y: Animated.Value<number>; - userXId: string | undefined; - screenType: ScreenType; -} +import PublicProfile from './PublicProfile'; +import TaggsBar from '../taggs/TaggsBar'; const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { const dispatch = useDispatch(); - - const {user = NO_USER, profile = NO_PROFILE} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.user); - - const {friends = EMPTY_PROFILE_PREVIEW_LIST} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.friends); - + const state: RootState = useStore().getState(); const { - friends: friendsLoggedInUser = EMPTY_PROFILE_PREVIEW_LIST, - } = useSelector((state: RootState) => state.friends); - - const {moments = EMPTY_MOMENTS_LIST} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.moments); - - const {momentCategories = []} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.momentCategories); - + user = NO_USER, + profile = NO_PROFILE, + } = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); const {blockedUsers = EMPTY_PROFILE_PREVIEW_LIST} = useSelector( (state: RootState) => state.blocked, ); const {user: loggedInUser = NO_USER} = useSelector( (state: RootState) => state.user, ); - const state = useStore().getState(); - - const navigation = useNavigation(); /** * States */ - const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>( - new Map(), - ); - const [isFriend, setIsFriend] = useState<boolean>(false); const [isBlocked, setIsBlocked] = useState<boolean>(false); const [profileBodyHeight, setProfileBodyHeight] = useState(0); const [shouldBounce, setShouldBounce] = useState<boolean>(true); const [refreshing, setRefreshing] = useState<boolean>(false); - const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState<boolean>( - false, - ); - const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>( - false, - ); - const [ - isStageThreePromptClosed, - setIsStageThreePromptClosed, - ] = useState<boolean>(false); - const onRefresh = useCallback(() => { const refrestState = async () => { + setRefreshing(true); if (!userXId) { await userLogin(dispatch, loggedInUser); } else { await fetchUserX(dispatch, user, screenType); } }; - setRefreshing(true); refrestState().then(() => { setRefreshing(false); }); @@ -133,83 +79,11 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { setProfileBodyHeight(height); }; - const createImagesMap = useCallback(() => { - var map = new Map(); - moments.forEach(function (imageObject) { - var moment_category = imageObject.moment_category; - if (map.has(moment_category)) { - map.get(moment_category).push(imageObject); - } else { - map.set(moment_category, [imageObject]); - } - }); - setImagesMap(map); - }, [moments]); - - useEffect(() => { - createImagesMap(); - }, [createImagesMap]); - - const move = (direction: 'up' | 'down', title: string) => { - let categories = [...momentCategories]; - categories = moveCategory(categories, title, direction === 'up'); - dispatch(updateMomentCategories(categories, false)); - }; - - /** - * Prompt user to perform an activity based on their profile completion stage - * To fire 2 seconds after the screen comes in focus - * 1 means STAGE_1: - * The user must upload a moment, so take them to a screen guiding them to post a moment - * 2 means STAGE_2: - * The user must create another category so show a prompt on top of the screen - * 3 means STAGE_3: - * The user must upload a moment to the second category, so show a prompt on top of the screen - * Else, profile is complete and no prompt needs to be shown - */ - useFocusEffect( - useCallback(() => { - const navigateToMomentUploadPrompt = () => { - switch (profile.profile_completion_stage) { - case 1: - if ( - momentCategories && - momentCategories[0] && - !isStageOnePromptClosed - ) { - navigation.navigate('MomentUploadPrompt', { - screenType, - momentCategory: momentCategories[0], - }); - setIsStageOnePromptClosed(true); - } - break; - case 2: - setIsStageTwoPromptClosed(false); - break; - case 3: - setIsStageThreePromptClosed(false); - break; - default: - break; - } - }; - if (!userXId) { - setTimeout(navigateToMomentUploadPrompt, 2000); - } - }, [ - profile.profile_completion_stage, - momentCategories, - userXId, - isStageOnePromptClosed, - ]), - ); - useEffect(() => { const isActuallyBlocked = blockedUsers.some( (cur_user) => user.username === cur_user.username, ); - if (isBlocked != isActuallyBlocked) { + if (isBlocked !== isActuallyBlocked) { setIsBlocked(isActuallyBlocked); } }, [blockedUsers, user]); @@ -234,37 +108,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { } }; - /** - * Handle deletion of a category - * Confirm with user before deleting the category - * @param category category to be deleted - */ - const handleCategoryDeletion = (category: string) => { - Alert.alert( - 'Category Deletion', - `Are you sure that you want to delete the category ${category} ?`, - [ - { - text: 'Cancel', - style: 'cancel', - }, - { - text: 'Yes', - onPress: () => { - dispatch( - updateMomentCategories( - momentCategories.filter((mc) => mc !== category), - false, - ), - ); - dispatch(deleteUserMomentsForCategory(category)); - }, - }, - ], - {cancelable: true}, - ); - }; - const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => { /** * Set the new y position @@ -285,6 +128,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { return ( <Animated.ScrollView + contentContainerStyle={{flexGrow: 1}} style={styles.container} onScroll={(e) => handleScroll(e)} bounces={shouldBounce} @@ -304,120 +148,36 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => { onLayout, userXId, screenType, - isFriend, handleBlockUnblock, isBlocked, }} /> - <TaggsBar - {...{y, profileBodyHeight, userXId, screenType}} - whiteRing={undefined} - /> - <View style={styles.momentsContainer}> - {userXId && moments.length === 0 && ( - <View style={styles.plusIconContainer}> - <GreyPlusLogo width={90} height={90} /> - <Text style={styles.noMomentsText}>{`Looks like ${ - profile.name.split(' ')[0] - } has not posted any moments yet`}</Text> - </View> - )} - {!userXId && - profile.profile_completion_stage === 2 && - !isStageTwoPromptClosed && ( - <TaggPrompt - messageHeader={UPLOAD_MOMENT_PROMPT_TWO_HEADER} - messageBody={UPLOAD_MOMENT_PROMPT_TWO_MESSAGE} - logoType="" - onClose={() => { - setIsStageTwoPromptClosed(true); - }} - /> - )} - {!userXId && - profile.profile_completion_stage === 3 && - !isStageThreePromptClosed && ( - <TaggPrompt - messageHeader={UPLOAD_MOMENT_PROMPT_THREE_HEADER} - messageBody={UPLOAD_MOMENT_PROMPT_THREE_MESSAGE} - logoType="" - onClose={() => { - setIsStageThreePromptClosed(true); - }} - /> - )} - {momentCategories.map( - (title, index) => - (!userXId || imagesMap.get(title)) && ( - <Moment - key={index} - title={title} - images={imagesMap.get(title)} - userXId={userXId} - screenType={screenType} - handleMomentCategoryDelete={handleCategoryDeletion} - shouldAllowDeletion={momentCategories.length > 1} - showUpButton={index !== 0} - showDownButton={index !== momentCategories.length - 1} - move={move} - /> - ), - )} - {!userXId && ( - <TouchableOpacity - onPress={() => - navigation.push('CategorySelection', { - screenType: CategorySelectionScreenType.Profile, - user: loggedInUser, - }) - } - style={styles.createCategoryButton}> - <Text style={styles.createCategoryButtonLabel}> - Create a new category - </Text> - </TouchableOpacity> - )} - </View> + {canViewProfile(state, userXId, screenType) ? ( + <> + <TaggsBar + {...{y, profileBodyHeight, userXId, screenType}} + whiteRing={undefined} + /> + <PublicProfile {...{y, userXId, screenType}} /> + </> + ) : ( + <> + <TaggsBar + {...{y, profileBodyHeight, userXId, screenType}} + whiteRing={undefined} + allowNavigation={false} + /> + <PrivateProfile /> + </> + )} </Animated.ScrollView> ); }; const styles = StyleSheet.create({ container: { - flex: 1, backgroundColor: '#fff', - }, - momentsContainer: { - backgroundColor: '#f2f2f2', - paddingBottom: SCREEN_HEIGHT / 10, flex: 1, - flexDirection: 'column', - }, - createCategoryButton: { - backgroundColor: TAGG_LIGHT_BLUE, - justifyContent: 'center', - alignItems: 'center', - width: '70%', - height: 30, - marginTop: '15%', - alignSelf: 'center', - }, - createCategoryButtonLabel: { - fontSize: normalize(16), - fontWeight: '500', - color: 'white', - }, - plusIconContainer: { - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - marginVertical: '10%', - }, - noMomentsText: { - fontSize: normalize(14), - fontWeight: 'bold', - color: 'gray', - marginVertical: '8%', }, }); diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx index 851dbc3b..a733823f 100644 --- a/src/components/profile/FriendsCount.tsx +++ b/src/components/profile/FriendsCount.tsx @@ -3,9 +3,9 @@ import {View, Text, StyleSheet, ViewProps} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useNavigation} from '@react-navigation/native'; import {RootState} from '../../store/rootReducer'; -import {useSelector} from 'react-redux'; +import {useSelector, useStore} from 'react-redux'; import {ScreenType} from '../../types'; -import {normalize} from '../../utils'; +import {canViewProfile, canViewProfileFoo, normalize} from '../../utils'; interface FriendsCountProps extends ViewProps { userXId: string | undefined; @@ -17,9 +17,9 @@ const FriendsCount: React.FC<FriendsCountProps> = ({ userXId, screenType, }) => { - const {friends} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.friends); + const {friends} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.friends, + ); const count = friends ? friends.length : 0; const displayedCount: string = @@ -32,15 +32,18 @@ const FriendsCount: React.FC<FriendsCountProps> = ({ : `${count / 1e6}m`; const navigation = useNavigation(); + const state: RootState = useStore().getState(); return ( <TouchableOpacity - style={{right: '20%'}} onPress={() => - navigation.push('FriendsListScreen', { + navigation.navigate('FriendsListScreen', { userXId, screenType, }) + } + disabled={ + !canViewProfile(state, userXId, screenType) || friends.length === 0 }> <View style={[styles.container, style]}> <Text style={styles.count}>{displayedCount}</Text> diff --git a/src/components/profile/PrivateProfile.tsx b/src/components/profile/PrivateProfile.tsx new file mode 100644 index 00000000..07a0dccc --- /dev/null +++ b/src/components/profile/PrivateProfile.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import {PRIVATE_ACCOUNT} from '../../constants/strings'; +import {normalize, SCREEN_HEIGHT} from '../../utils'; + +const PrivateProfile: React.FC = () => { + return ( + <View style={styles.container}> + <Image source={require('../../assets/images/private-profile.png')} /> + <View style={styles.privateAccountTextContainer}> + <Text style={styles.privateAccountTextStyle}>{PRIVATE_ACCOUNT}</Text> + </View> + </View> + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#F9F9F9', + height: SCREEN_HEIGHT * 0.35, + }, + privateAccountTextContainer: {marginTop: '8%'}, + privateAccountTextStyle: { + fontWeight: '600', + fontSize: normalize(18), + lineHeight: normalize(25), + color: '#828282', + }, +}); + +export default PrivateProfile; diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 646be3e0..b49e71a3 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -2,21 +2,17 @@ import React from 'react'; import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native'; import {normalize} from 'react-native-elements'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import { - TAGG_DARK_BLUE, - TAGG_LIGHT_BLUE, - TOGGLE_BUTTON_TYPE, -} from '../../constants'; +import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants'; import { acceptFriendRequest, declineFriendRequest, updateUserXFriends, updateUserXProfileAllScreens, } from '../../store/actions'; -import {NO_PROFILE, NO_USER} from '../../store/initialStates'; +import {NO_PROFILE} from '../../store/initialStates'; import {RootState} from '../../store/rootReducer'; import {ScreenType} from '../../types'; -import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils'; +import {getUserAsProfilePreviewType} from '../../utils'; import {FriendsButton} from '../common'; import ToggleButton from './ToggleButton'; @@ -34,12 +30,8 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({ userXId, screenType, }) => { - const {profile = NO_PROFILE, user} = userXId - ? useSelector((state: RootState) => state.userX[screenType][userXId]) - : useSelector((state: RootState) => state.user); - - const {user: loggedInUser = NO_USER} = useSelector( - (state: RootState) => state.user, + const {profile = NO_PROFILE, user} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, ); const { @@ -119,6 +111,7 @@ const styles = StyleSheet.create({ flex: 1, paddingTop: '3.5%', paddingBottom: '2%', + width: '50%', }, container: { paddingVertical: '1%', diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx new file mode 100644 index 00000000..a70e8e50 --- /dev/null +++ b/src/components/profile/PublicProfile.tsx @@ -0,0 +1,283 @@ +import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import React, {useCallback, useEffect, useState} from 'react'; +import {Alert, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useDispatch, useSelector} from 'react-redux'; +import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import { + UPLOAD_MOMENT_PROMPT_THREE_HEADER, + UPLOAD_MOMENT_PROMPT_THREE_MESSAGE, + UPLOAD_MOMENT_PROMPT_TWO_HEADER, + UPLOAD_MOMENT_PROMPT_TWO_MESSAGE, +} from '../../constants/strings'; +import { + deleteUserMomentsForCategory, + updateMomentCategories, +} from '../../store/actions'; +import { + EMPTY_MOMENTS_LIST, + NO_PROFILE, + NO_USER, +} from '../../store/initialStates'; +import {RootState} from '../../store/rootreducer'; +import { + CategorySelectionScreenType, + ContentProps, + MomentType, +} from '../../types'; +import {moveCategory, normalize, SCREEN_HEIGHT} from '../../utils'; +import {TaggPrompt} from '../common'; +import {Moment} from '../moments'; + +const PublicProfile: React.FC<ContentProps> = ({y, userXId, screenType}) => { + const dispatch = useDispatch(); + + const {profile = NO_PROFILE} = userXId + ? useSelector((state: RootState) => state.userX[screenType][userXId]) + : useSelector((state: RootState) => state.user); + + const {moments = EMPTY_MOMENTS_LIST} = userXId + ? useSelector((state: RootState) => state.userX[screenType][userXId]) + : useSelector((state: RootState) => state.moments); + + const {momentCategories = []} = userXId + ? useSelector((state: RootState) => state.userX[screenType][userXId]) + : useSelector((state: RootState) => state.momentCategories); + + const {user: loggedInUser = NO_USER} = useSelector( + (state: RootState) => state.user, + ); + + const navigation = useNavigation(); + + /** + * States + */ + const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>( + new Map(), + ); + + const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState<boolean>( + false, + ); + const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>( + false, + ); + const [ + isStageThreePromptClosed, + setIsStageThreePromptClosed, + ] = useState<boolean>(false); + + const move = (direction: 'up' | 'down', title: string) => { + let categories = [...momentCategories]; + categories = moveCategory(categories, title, direction === 'up'); + dispatch(updateMomentCategories(categories, false)); + }; + + /** + * Prompt user to perform an activity based on their profile completion stage + * To fire 2 seconds after the screen comes in focus + * 1 means STAGE_1: + * The user must upload a moment, so take them to a screen guiding them to post a moment + * 2 means STAGE_2: + * The user must create another category so show a prompt on top of the screen + * 3 means STAGE_3: + * The user must upload a moment to the second category, so show a prompt on top of the screen + * Else, profile is complete and no prompt needs to be shown + */ + useFocusEffect( + useCallback(() => { + const navigateToMomentUploadPrompt = () => { + switch (profile.profile_completion_stage) { + case 1: + if ( + momentCategories && + momentCategories[0] && + !isStageOnePromptClosed + ) { + navigation.navigate('MomentUploadPrompt', { + screenType, + momentCategory: momentCategories[0], + }); + setIsStageOnePromptClosed(true); + } + break; + case 2: + setIsStageTwoPromptClosed(false); + break; + case 3: + setIsStageThreePromptClosed(false); + break; + default: + break; + } + }; + if (!userXId) { + setTimeout(navigateToMomentUploadPrompt, 2000); + } + }, [ + profile.profile_completion_stage, + momentCategories, + userXId, + isStageOnePromptClosed, + ]), + ); + + /** + * Handle deletion of a category + * Confirm with user before deleting the category + * @param category category to be deleted + */ + const handleCategoryDeletion = (category: string) => { + Alert.alert( + 'Category Deletion', + `Are you sure that you want to delete the category ${category} ?`, + [ + { + text: 'Cancel', + style: 'cancel', + }, + { + text: 'Yes', + onPress: () => { + dispatch( + updateMomentCategories( + momentCategories.filter((mc) => mc !== category), + false, + ), + ); + dispatch(deleteUserMomentsForCategory(category)); + }, + }, + ], + {cancelable: true}, + ); + }; + + const createImagesMap = useCallback(() => { + let map = new Map(); + moments.forEach(function (imageObject) { + let moment_category = imageObject.moment_category; + if (map.has(moment_category)) { + map.get(moment_category).push(imageObject); + } else { + map.set(moment_category, [imageObject]); + } + }); + setImagesMap(map); + }, [moments]); + + useEffect(() => { + createImagesMap(); + }, [createImagesMap]); + + return ( + <View style={styles.momentsContainer}> + {userXId && moments.length === 0 && ( + <View style={styles.plusIconContainer}> + <GreyPlusLogo width={90} height={90} /> + <Text style={styles.noMomentsText}>{`Looks like ${ + profile.name.split(' ')[0] + } has not posted any moments yet`}</Text> + </View> + )} + {!userXId && + profile.profile_completion_stage === 2 && + !isStageTwoPromptClosed && ( + <TaggPrompt + messageHeader={UPLOAD_MOMENT_PROMPT_TWO_HEADER} + messageBody={UPLOAD_MOMENT_PROMPT_TWO_MESSAGE} + logoType="" + onClose={() => { + setIsStageTwoPromptClosed(true); + }} + /> + )} + {!userXId && + profile.profile_completion_stage === 3 && + !isStageThreePromptClosed && ( + <TaggPrompt + messageHeader={UPLOAD_MOMENT_PROMPT_THREE_HEADER} + messageBody={UPLOAD_MOMENT_PROMPT_THREE_MESSAGE} + logoType="" + onClose={() => { + setIsStageThreePromptClosed(true); + }} + /> + )} + {momentCategories.map( + (title, index) => + (!userXId || imagesMap.get(title)) && ( + <Moment + key={index} + title={title} + images={imagesMap.get(title)} + userXId={userXId} + screenType={screenType} + handleMomentCategoryDelete={handleCategoryDeletion} + shouldAllowDeletion={momentCategories.length > 1} + showUpButton={index !== 0} + showDownButton={index !== momentCategories.length - 1} + move={move} + /> + ), + )} + {!userXId && ( + <TouchableOpacity + onPress={() => + navigation.navigate('CategorySelection', { + screenType: CategorySelectionScreenType.Profile, + user: loggedInUser, + }) + } + style={styles.createCategoryButton}> + <Text style={styles.createCategoryButtonLabel}> + Create a new category + </Text> + </TouchableOpacity> + )} + </View> + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + }, + momentsContainer: { + backgroundColor: '#f2f2f2', + paddingBottom: SCREEN_HEIGHT / 10, + flex: 1, + flexDirection: 'column', + }, + createCategoryButton: { + backgroundColor: TAGG_LIGHT_BLUE, + justifyContent: 'center', + alignItems: 'center', + width: '70%', + height: 30, + marginTop: '15%', + alignSelf: 'center', + }, + createCategoryButtonLabel: { + fontSize: normalize(16), + fontWeight: '500', + color: 'white', + }, + plusIconContainer: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + marginVertical: '10%', + }, + noMomentsText: { + fontSize: normalize(14), + fontWeight: 'bold', + color: 'gray', + marginVertical: '8%', + }, +}); + +export default PublicProfile; diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 547a77cb..ae9ab091 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -34,6 +34,7 @@ interface TaggProps { userXId: string | undefined; user: UserType; whiteRing: boolean | undefined; + allowNavigation?: boolean; } const Tagg: React.FC<TaggProps> = ({ @@ -45,6 +46,7 @@ const Tagg: React.FC<TaggProps> = ({ userXId, user, whiteRing, + allowNavigation = true, }) => { const navigation = useNavigation(); const [modalVisible, setModalVisible] = useState(false); @@ -70,19 +72,21 @@ const Tagg: React.FC<TaggProps> = ({ const modalOrAuthBrowserOrPass = async () => { if (youMayPass) { - if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { - navigation.push('SocialMediaTaggs', { - socialMediaType: social, - userXId, - }); - } else { - getNonIntegratedURL(social, user.userId).then((socialURL) => { - if (socialURL) { - Linking.openURL(socialURL); - } else { - Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE); - } - }); + if (allowNavigation) { + if (INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1) { + navigation.push('SocialMediaTaggs', { + socialMediaType: social, + userXId, + }); + } else { + getNonIntegratedURL(social, user.userId).then((socialURL) => { + if (socialURL) { + Linking.openURL(socialURL); + } else { + Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE); + } + }); + } } } else { if (isIntegrated) { diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index f952c53f..a9c428b2 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -22,6 +22,7 @@ interface TaggsBarProps { screenType: ScreenType; whiteRing: boolean | undefined; linkedSocials?: string[]; + allowNavigation?: boolean; } const TaggsBar: React.FC<TaggsBarProps> = ({ y, @@ -30,6 +31,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ screenType, whiteRing, linkedSocials, + allowNavigation = true, }) => { let [taggs, setTaggs] = useState<Object[]>([]); let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true); @@ -79,6 +81,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} whiteRing={whiteRing ? whiteRing : undefined} + allowNavigation={allowNavigation} />, ); i++; @@ -96,6 +99,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({ userXId={userXId} user={user} whiteRing={whiteRing ? whiteRing : undefined} + allowNavigation={allowNavigation} />, ); i++; diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 66d4a6d9..019d0bea 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -55,6 +55,7 @@ export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; export const NO_RESULTS_FOUND = 'No Results Found!'; +export const PRIVATE_ACCOUNT = 'This account is private'; export const SUCCESS_BADGES_UPDATE = 'Badges updated successfully!' export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; export const SUCCESS_INVITATION_CODE = 'Welcome to Tagg!'; diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx index c4195fac..f38945f7 100644 --- a/src/screens/suggestedPeople/SPBody.tsx +++ b/src/screens/suggestedPeople/SPBody.tsx @@ -14,7 +14,13 @@ import { SuggestedPeopleDataType, UniversityBadge, } from '../../types'; -import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { + canViewProfile, + isIPhoneX, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; interface SPBodyProps { item: SuggestedPeopleDataType; @@ -33,6 +39,7 @@ const SPBody: React.FC<SPBodyProps> = ({ suggested_people_url, friendship, badges, + is_private, }, itemIndex, onAddFriend, @@ -157,6 +164,11 @@ const SPBody: React.FC<SPBodyProps> = ({ screenType={screenType} whiteRing={true} linkedSocials={social_links} + allowNavigation={canViewProfile( + loggedInUserId === user.id, + is_private, + friendship.status === 'friends', + )} /> <View style={styles.marginManager}> <MutualFriends user={user} friends={mutual_friends} /> diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts index da39380f..5c41e988 100644 --- a/src/services/UserFriendsService.ts +++ b/src/services/UserFriendsService.ts @@ -1,17 +1,12 @@ -//Abstracted common friends api calls out here - import AsyncStorage from '@react-native-community/async-storage'; import {Alert} from 'react-native'; -import {ContactType, FriendshipStatusType} from '../types'; import { FRIENDS_ENDPOINT, INVITE_FRIEND_ENDPOINT, USERS_FROM_CONTACTS_ENDPOINT, } from '../constants'; -import { - ERROR_SOMETHING_WENT_WRONG, - ERROR_SOMETHING_WENT_WRONG_REFRESH, -} from '../constants/strings'; +import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../constants/strings'; +import {ContactType, FriendshipStatusType} from '../types'; export const loadFriends = async (userId: string, token: string) => { try { diff --git a/src/store/actions/userFriends.ts b/src/store/actions/userFriends.ts index 9da3cb4a..4183d0f6 100644 --- a/src/store/actions/userFriends.ts +++ b/src/store/actions/userFriends.ts @@ -1,25 +1,24 @@ -import {getTokenOrLogout, userXInStore} from '../../utils'; -import {RootState} from '../rootReducer'; -import { - FriendshipStatusType, - ProfilePreviewType, - ScreenType, - UserType, -} from '../../types/types'; +import {Action, ThunkAction} from '@reduxjs/toolkit'; import { acceptFriendRequestService, addFriendService, + deleteFriendshipService, friendOrUnfriendUser, loadFriends, - deleteFriendshipService, } from '../../services'; -import {Action, ThunkAction} from '@reduxjs/toolkit'; import { - userFriendsFetched, + FriendshipStatusType, + ProfilePreviewType, + ScreenType, + UserType, +} from '../../types/types'; +import {getTokenOrLogout, userXInStore} from '../../utils'; +import { updateFriends, + userFriendsFetched, userXFriendshipEdited, - userLoggedIn, } from '../reducers'; +import {RootState} from '../rootReducer'; export const loadFriendsData = ( userId: string, diff --git a/src/types/types.ts b/src/types/types.ts index 94fc966e..87d61b2e 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,3 +1,5 @@ +import Animated from 'react-native-reanimated'; + export interface UserType { userId: string; username: string; @@ -206,6 +208,11 @@ export interface CommentNotificationType { export interface ThreadNotificationType extends CommentNotificationType { parent_comment: string; } +export interface ContentProps { + y: Animated.Value<number>; + userXId: string | undefined; + screenType: ScreenType; +} export type NotificationType = { actor: ProfilePreviewType; @@ -253,6 +260,7 @@ export type SuggestedPeopleDataType = { social_links: string[]; suggested_people_url: string; friendship: FriendshipType; + is_private: boolean; }; export type FriendshipType = { diff --git a/src/utils/users.ts b/src/utils/users.ts index d5e44b36..0b8a0582 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -174,3 +174,26 @@ export const defaultUserProfile = () => { const defaultImage = require('../assets/images/avatar-placeholder.png'); return defaultImage; }; + +export const canViewProfile = ( + state: RootState, + userXId: string | undefined, + screenType: ScreenType, +) => { + // own profile + if (!userXId || state.user.user.userId === userXId) { + return true; + } + // not private + if (!(userXId && state.userX[screenType][userXId].profile.is_private)) { + return true; + } + // is friend + if ( + userXId && + state.userX[screenType][userXId].profile.friendship_status === 'friends' + ) { + return true; + } + return false; +}; |