aboutsummaryrefslogtreecommitdiff
path: root/src/components/profile/Content.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/profile/Content.tsx')
-rw-r--r--src/components/profile/Content.tsx292
1 files changed, 23 insertions, 269 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 1a5a205c..a22b9728 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={styles.contentContainer}
style={styles.container}
onScroll={(e) => handleScroll(e)}
bounces={shouldBounce}
@@ -304,7 +148,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
onLayout,
userXId,
screenType,
- isFriend,
handleBlockUnblock,
isBlocked,
}}
@@ -313,111 +156,22 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
{...{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) ? (
+ <PublicProfile {...{y, userXId, screenType}} />
+ ) : (
+ <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%',
+ contentContainer: {
+ flexGrow: 1,
},
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:19:54 +0000