aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/CommentTile.tsx7
-rw-r--r--src/components/moments/MomentTile.tsx3
-rw-r--r--src/components/notifications/Notification.tsx46
-rw-r--r--src/components/profile/FriendsCount.tsx6
-rw-r--r--src/components/profile/ProfilePreview.tsx42
-rw-r--r--src/components/search/Explore.tsx7
-rw-r--r--src/components/search/ExploreSection.tsx15
-rw-r--r--src/components/search/ExploreSectionUser.tsx18
8 files changed, 56 insertions, 88 deletions
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index c6dd9fc1..b631a985 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -123,12 +123,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
<View
style={[styles.container, isThread ? styles.moreMarginWithThread : {}]}>
<ProfilePreview
- profilePreview={{
- id: comment_object.commenter.id,
- username: comment_object.commenter.username,
- first_name: comment_object.commenter.first_name,
- last_name: comment_object.commenter.last_name,
- }}
+ profilePreview={comment_object.commenter}
previewType={'Comment'}
screenType={screenType}
/>
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index 16e91c82..69701192 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -15,7 +15,6 @@ const MomentTile: React.FC<MomentTileProps> = ({
}) => {
const navigation = useNavigation();
- const {path_hash} = moment;
return (
<TouchableOpacity
onPress={() => {
@@ -26,7 +25,7 @@ const MomentTile: React.FC<MomentTileProps> = ({
});
}}>
<View style={styles.image}>
- <Image style={styles.image} source={{uri: path_hash}} />
+ <Image style={styles.image} source={{uri: moment.thumbnail_url}} />
</View>
</TouchableOpacity>
);
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index e6d16f82..e648b554 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -1,25 +1,19 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
-import {Button} from 'react-native-elements';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import {useDispatch, useStore} from 'react-redux';
+import {loadImageFromURL, loadMomentThumbnail} from '../../services';
import {
+ acceptFriendRequest,
declineFriendRequest,
loadUserNotifications,
updateUserXFriends,
} from '../../store/actions';
-import {acceptFriendRequest} from '../../store/actions';
-import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
-import {
- fetchUserX,
- SCREEN_HEIGHT,
- SCREEN_WIDTH,
- userXInStore,
-} from '../../utils';
+import {RootState} from '../../store/rootReducer';
+import {MomentType, NotificationType, ScreenType} from '../../types';
+import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
-import {loadAvatar, loadMomentThumbnail} from '../../services';
-
interface NotificationProps {
item: NotificationType;
@@ -30,7 +24,7 @@ interface NotificationProps {
const Notification: React.FC<NotificationProps> = (props) => {
const {
item: {
- actor: {id, username, first_name, last_name},
+ actor: {id, username, first_name, last_name, thumbnail_url},
verbage,
notification_type,
notification_object,
@@ -44,22 +38,18 @@ const Notification: React.FC<NotificationProps> = (props) => {
const state: RootState = useStore().getState();
const dispatch = useDispatch();
- const [avatarURI, setAvatarURI] = useState<string | undefined>(undefined);
+ const [avatar, setAvatar] = useState<string | undefined>(undefined);
const [momentURI, setMomentURI] = useState<string | undefined>(undefined);
const backgroundColor = unread ? '#DCF1F1' : 'rgba(0,0,0,0)';
+
useEffect(() => {
- let mounted = true;
- const loadAvatarImage = async (user_id: string) => {
- const response = await loadAvatar(user_id, true);
- if (mounted) {
- setAvatarURI(response);
+ (async () => {
+ const response = await loadImageFromURL(thumbnail_url);
+ if (response) {
+ setAvatar(response);
}
- };
- loadAvatarImage(id);
- return () => {
- mounted = false;
- };
- }, [id]);
+ })();
+ }, []);
useEffect(() => {
let mounted = true;
@@ -137,8 +127,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
<Image
style={styles.avatar}
source={
- avatarURI
- ? {uri: avatarURI, cache: 'only-if-cached'}
+ avatar
+ ? {uri: avatar, cache: 'only-if-cached'}
: require('../../assets/images/avatar-placeholder.png')
}
/>
@@ -159,8 +149,8 @@ const Notification: React.FC<NotificationProps> = (props) => {
</View>
)}
{notification_type === 'CMT' && notification_object && (
- <Image style={styles.moment} source={{uri: momentURI}} />
- )}
+ <Image style={styles.moment} source={{uri: momentURI}} />
+ )}
</TouchableWithoutFeedback>
</>
);
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 9647710e..851dbc3b 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -17,10 +17,10 @@ const FriendsCount: React.FC<FriendsCountProps> = ({
userXId,
screenType,
}) => {
- const count = (userXId
+ const {friends} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
- : useSelector((state: RootState) => state.friends)
- )?.friends.length;
+ : useSelector((state: RootState) => state.friends);
+ const count = friends ? friends.length : 0;
const displayedCount: string =
count < 5e3
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 389ca367..38defb8d 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -12,21 +12,11 @@ import {
} from 'react-native';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
-import {loadAvatar} from '../../services';
+import {loadImageFromURL} from '../../services';
import {RootState} from '../../store/rootreducer';
-import {
- PreviewType,
- ProfilePreviewType,
- ScreenType,
- UserType,
-} from '../../types';
+import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
-const NO_USER: UserType = {
- userId: '',
- username: '',
-};
-
/**
* This component returns user's profile picture friended by username as a touchable component.
* What happens when someone clicks on this component is partly decided by the prop isComment.
@@ -43,28 +33,23 @@ interface ProfilePreviewProps extends ViewProps {
}
const ProfilePreview: React.FC<ProfilePreviewProps> = ({
- profilePreview: {username, first_name, last_name, id},
+ profilePreview: {username, first_name, last_name, id, thumbnail_url},
previewType,
screenType,
}) => {
const navigation = useNavigation();
const {user: loggedInUser} = useSelector((state: RootState) => state.user);
- const [avatarURI, setAvatarURI] = useState<string | null>(null);
- const [user, setUser] = useState<UserType>(NO_USER);
+ const [avatar, setAvatar] = useState<string | null>(null);
const dispatch = useDispatch();
+
useEffect(() => {
- let mounted = true;
- const loadAvatarImage = async () => {
- const response = await loadAvatar(id, true);
- if (mounted) {
- setAvatarURI(response);
+ (async () => {
+ const response = await loadImageFromURL(thumbnail_url);
+ if (response) {
+ setAvatar(response);
}
- };
- loadAvatarImage();
- return () => {
- mounted = false;
- };
- }, [id]);
+ })();
+ }, []);
/**
* Adds a searched user to the recently searched cache if they're tapped on.
@@ -80,6 +65,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
username,
first_name,
last_name,
+ thumbnail_url,
};
try {
@@ -211,8 +197,8 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
<Image
style={avatarStyle}
source={
- avatarURI
- ? {uri: avatarURI}
+ avatar
+ ? {uri: avatar}
: require('../../assets/images/avatar-placeholder.png')
}
/>
diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index 4a71249b..2a3bc749 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -12,9 +12,10 @@ const Explore: React.FC = () => {
return (
<View style={styles.container}>
<Text style={styles.header}>Search Profiles</Text>
- {EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
- <ExploreSection key={title} title={title} users={explores[title]} />
- ))}
+ {explores &&
+ EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
+ <ExploreSection key={title} title={title} users={explores[title]} />
+ ))}
</View>
);
};
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 17079e77..025c8c3c 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -1,5 +1,5 @@
import React, {Fragment} from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {FlatList, StyleSheet, Text, View} from 'react-native';
import {ProfilePreviewType} from '../../types';
import {normalize} from '../../utils';
import ExploreSectionUser from './ExploreSectionUser';
@@ -17,12 +17,15 @@ const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
return users.length !== 0 ? (
<View style={styles.container}>
<Text style={styles.header}>{title}</Text>
- <ScrollView horizontal showsHorizontalScrollIndicator={false}>
- <View style={styles.padding} />
- {users.map((user) => (
+ <FlatList
+ data={users}
+ ListHeaderComponent={<View style={styles.padding} />}
+ renderItem={({item: user}: {item: ProfilePreviewType}) => (
<ExploreSectionUser key={user.id} user={user} style={styles.user} />
- ))}
- </ScrollView>
+ )}
+ showsHorizontalScrollIndicator={false}
+ horizontal
+ />
</View>
) : (
<Fragment />
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index 68e077e3..b0cfe5c6 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -9,7 +9,7 @@ import {
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {useDispatch, useSelector, useStore} from 'react-redux';
-import {loadAvatar} from '../../services';
+import {loadImageFromURL} from '../../services';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType, ScreenType} from '../../types';
import {fetchUserX, normalize, userXInStore} from '../../utils';
@@ -36,18 +36,13 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
const dispatch = useDispatch();
useEffect(() => {
- let mounted = true;
- const loadAvatarImage = async () => {
- const response = await loadAvatar(id, true);
- if (mounted) {
+ (async () => {
+ const response = await loadImageFromURL(user.thumbnail_url);
+ if (response) {
setAvatar(response);
}
- };
- loadAvatarImage();
- return () => {
- mounted = false;
- };
- }, [user]);
+ })();
+ }, []);
const handlePress = async () => {
if (!userXInStore(state, screenType, user.id)) {
@@ -63,7 +58,6 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
screenType,
});
};
-
return (
<TouchableOpacity style={[styles.container, style]} onPress={handlePress}>
<LinearGradient
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 12:51:49 +0000