aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/moments/IndividualMomentTitleBar.tsx9
-rw-r--r--src/components/moments/MomentPostHeader.tsx29
-rw-r--r--src/components/notifications/Notification.tsx45
-rw-r--r--src/components/profile/Avatar.tsx7
-rw-r--r--src/components/profile/Content.tsx12
-rw-r--r--src/components/profile/Cover.tsx11
-rw-r--r--src/components/search/SearchCategories.tsx18
7 files changed, 76 insertions, 55 deletions
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
index 88e0c308..79453ade 100644
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -29,14 +29,14 @@ const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
- justifyContent: 'center',
+ justifyContent: 'flex-start',
height: '5%',
},
headerContainer: {
- flexShrink: 1,
- marginLeft: '11%',
+ width: '80%',
},
header: {
+ textAlign: 'center',
color: 'white',
fontSize: normalize(18),
fontWeight: '700',
@@ -44,10 +44,9 @@ const styles = StyleSheet.create({
letterSpacing: normalize(1.3),
},
closeButton: {
- position: 'absolute',
height: '50%',
aspectRatio: 1,
- left: '3%',
+ left: '8%',
},
});
diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
index aad776e8..ff324c4a 100644
--- a/src/components/moments/MomentPostHeader.tsx
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -1,12 +1,19 @@
import React, {useState} from 'react';
-import {StyleSheet, Text, View, ViewProps} from 'react-native';
+import {
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+ ViewProps,
+} from 'react-native';
import {MomentMoreInfoDrawer} from '../profile';
import {loadUserMoments} from '../../store/actions';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch, useSelector, useStore} from 'react-redux';
import {ScreenType} from '../../types';
import Avatar from '../profile/Avatar';
import {useNavigation} from '@react-navigation/native';
import {RootState} from '../../store/rootReducer';
+import {fetchUserX, userXInStore} from '../../utils';
interface MomentPostHeaderProps extends ViewProps {
userXId?: string;
@@ -24,22 +31,36 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
}) => {
const [drawerVisible, setDrawerVisible] = useState(false);
const dispatch = useDispatch();
+ const state: RootState = useStore().getState();
const navigation = useNavigation();
const {userId: loggedInUserId, username: loggedInUserName} = useSelector(
(state: RootState) => state.user.user,
);
const isOwnProfile = loggedInUserName === username;
+ const navigateToProfile = async () => {
+ if (userXId && !userXInStore(state, screenType, userXId)) {
+ await fetchUserX(
+ dispatch,
+ {userId: userXId, username: username},
+ screenType,
+ );
+ }
+ navigation.navigate('Profile', {
+ userXId: isOwnProfile ? undefined : userXId,
+ screenType,
+ });
+ };
return (
<View style={[styles.container, style]}>
- <View style={styles.header}>
+ <TouchableOpacity onPress={navigateToProfile} style={styles.header}>
<Avatar
style={styles.avatar}
userXId={userXId}
screenType={screenType}
/>
<Text style={styles.headerText}>{username}</Text>
- </View>
+ </TouchableOpacity>
<MomentMoreInfoDrawer
isOpen={drawerVisible}
setIsOpen={setDrawerVisible}
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index c8a8aa06..8143e396 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -205,11 +205,22 @@ const Notification: React.FC<NotificationProps> = (props) => {
dispatch(loadUserNotifications());
};
+ const isOwnProfile = id === loggedInUser.userId;
+ const navigateToProfile = async () => {
+ if (!userXInStore(state, screenType, id)) {
+ await fetchUserX(dispatch, {userId: id, username: username}, screenType);
+ }
+ navigation.navigate('Profile', {
+ userXId: isOwnProfile ? undefined : id,
+ screenType,
+ });
+ };
+
const renderContent = () => (
- <TouchableWithoutFeedback
- style={styles.container}
- onPress={onNotificationTap}>
- <View style={styles.avatarContainer}>
+ <View style={styles.container}>
+ <TouchableWithoutFeedback
+ onPress={navigateToProfile}
+ style={styles.avatarContainer}>
<Image
style={styles.avatar}
source={
@@ -218,12 +229,16 @@ const Notification: React.FC<NotificationProps> = (props) => {
: require('../../assets/images/avatar-placeholder.png')
}
/>
- </View>
+ </TouchableWithoutFeedback>
<View style={styles.contentContainer}>
- <Text style={styles.actorName}>
- {first_name} {last_name}
- </Text>
- <Text>{verbage}</Text>
+ <TouchableWithoutFeedback onPress={navigateToProfile}>
+ <Text style={styles.actorName}>
+ {first_name} {last_name}
+ </Text>
+ </TouchableWithoutFeedback>
+ <TouchableWithoutFeedback onPress={onNotificationTap}>
+ <Text>{verbage}</Text>
+ </TouchableWithoutFeedback>
</View>
{notification_type === 'FRD_REQ' && (
<View style={styles.buttonsContainer}>
@@ -238,9 +253,13 @@ const Notification: React.FC<NotificationProps> = (props) => {
notification_type === 'MOM_3+' ||
notification_type === 'MOM_FRIEND') &&
notification_object && (
- <Image style={styles.moment} source={{uri: momentURI}} />
+ <TouchableWithoutFeedback
+ style={styles.moment}
+ onPress={onNotificationTap}>
+ <Image style={styles.imageFlex} source={{uri: momentURI}} />
+ </TouchableWithoutFeedback>
)}
- </TouchableWithoutFeedback>
+ </View>
);
return unread ? (
@@ -284,7 +303,6 @@ const styles = StyleSheet.create({
fontWeight: '700',
},
moment: {
- position: 'absolute',
height: 42,
width: 42,
right: '5%',
@@ -292,6 +310,9 @@ const styles = StyleSheet.create({
buttonsContainer: {
height: '80%',
},
+ imageFlex: {
+ flex: 1,
+ },
});
export default Notification;
diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx
index ba4ec36c..5d677983 100644
--- a/src/components/profile/Avatar.tsx
+++ b/src/components/profile/Avatar.tsx
@@ -19,11 +19,8 @@ const Avatar: React.FC<AvatarProps> = ({style, screenType, userXId}) => {
return (
<Image
style={[styles.image, style]}
- source={
- avatar
- ? {uri: avatar}
- : require('../../assets/images/avatar-placeholder.png')
- }
+ defaultSource={require('../../assets/images/avatar-placeholder.png')}
+ source={{uri: avatar}}
/>
);
};
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index d4c50d5c..1a5a205c 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -109,9 +109,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
false,
);
- const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
- boolean
- >(false);
+ const [
+ isStageThreePromptClosed,
+ setIsStageThreePromptClosed,
+ ] = useState<boolean>(false);
const onRefresh = useCallback(() => {
const refrestState = async () => {
@@ -308,7 +309,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
isBlocked,
}}
/>
- <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
+ <TaggsBar
+ {...{y, profileBodyHeight, userXId, screenType}}
+ whiteRing={undefined}
+ />
<View style={styles.momentsContainer}>
{userXId && moments.length === 0 && (
<View style={styles.plusIconContainer}>
diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
index a03ef123..b7502cff 100644
--- a/src/components/profile/Cover.tsx
+++ b/src/components/profile/Cover.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {Image, StyleSheet, View} from 'react-native';
-import {IMAGE_WIDTH, COVER_HEIGHT, IMAGE_HEIGHT} from '../../constants';
import {useSelector} from 'react-redux';
+import {COVER_HEIGHT, IMAGE_WIDTH} from '../../constants';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';
@@ -10,7 +10,7 @@ interface CoverProps {
screenType: ScreenType;
}
const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
- const {cover = ''} = userXId
+ const {cover} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
: useSelector((state: RootState) => state.user);
@@ -18,11 +18,8 @@ const Cover: React.FC<CoverProps> = ({userXId, screenType}) => {
<View style={[styles.container]}>
<Image
style={styles.image}
- source={
- cover
- ? {uri: cover}
- : require('../../assets/images/cover-placeholder.png')
- }
+ defaultSource={require('../../assets/images/cover-placeholder.png')}
+ source={{uri: cover}}
/>
</View>
);
diff --git a/src/components/search/SearchCategories.tsx b/src/components/search/SearchCategories.tsx
index 4bae27c2..c747b34f 100644
--- a/src/components/search/SearchCategories.tsx
+++ b/src/components/search/SearchCategories.tsx
@@ -73,23 +73,5 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
justifyContent: 'space-evenly',
},
- buttonContainer: {
- backgroundColor: 'transparent',
- width: 158,
- height: 37,
- borderRadius: 20,
- borderColor: 'transparent',
- borderWidth: 1,
- flexDirection: 'row',
- alignContent: 'center',
- justifyContent: 'center',
- },
- buttonText: {
- fontWeight: '400',
- fontSize: 15,
- lineHeight: 17.9,
- alignSelf: 'center',
- color: 'white',
- },
});
export default SearchCategories;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:02:42 +0000