From befc480c50d90d829c53953476ccfe99e26c9260 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 26 Jan 2021 18:10:23 -0500 Subject: thumbnail for profile preview and moments --- src/components/profile/ProfilePreview.tsx | 43 +++++++++++-------------------- 1 file changed, 15 insertions(+), 28 deletions(-) (limited to 'src/components/profile') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 389ca367..000dd5c5 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,24 @@ interface ProfilePreviewProps extends ViewProps { } const ProfilePreview: React.FC = ({ - 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(null); - const [user, setUser] = useState(NO_USER); + const [avatar, setAvatar] = useState(null); const dispatch = useDispatch(); + useEffect(() => { - let mounted = true; - const loadAvatarImage = async () => { - const response = await loadAvatar(id, true); - if (mounted) { - setAvatarURI(response); + (async () => { + console.log(thumbnail_url); + 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 +66,7 @@ const ProfilePreview: React.FC = ({ username, first_name, last_name, + thumbnail_url, }; try { @@ -211,8 +198,8 @@ const ProfilePreview: React.FC = ({ -- cgit v1.2.3-70-g09d2 From d70ade2e653ee93aca09d62ab7822b8d0f6dc2b5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 26 Jan 2021 18:23:44 -0500 Subject: fixed no internet app crash --- src/components/profile/FriendsCount.tsx | 6 +++--- src/components/search/Explore.tsx | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/components/profile') 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 = ({ 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/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 ( Search Profiles - {EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => ( - - ))} + {explores && + EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => ( + + ))} ); }; -- cgit v1.2.3-70-g09d2 From e897fdbbbe8442f05000645395753ff008a19bf4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 26 Jan 2021 18:35:41 -0500 Subject: use thumbnails for notification screen --- src/components/notifications/Notification.tsx | 46 +++++++++++---------------- src/components/profile/ProfilePreview.tsx | 1 - 2 files changed, 18 insertions(+), 29 deletions(-) (limited to 'src/components/profile') 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 = (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 = (props) => { const state: RootState = useStore().getState(); const dispatch = useDispatch(); - const [avatarURI, setAvatarURI] = useState(undefined); + const [avatar, setAvatar] = useState(undefined); const [momentURI, setMomentURI] = useState(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 = (props) => { @@ -159,8 +149,8 @@ const Notification: React.FC = (props) => { )} {notification_type === 'CMT' && notification_object && ( - - )} + + )} ); diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 000dd5c5..38defb8d 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -44,7 +44,6 @@ const ProfilePreview: React.FC = ({ useEffect(() => { (async () => { - console.log(thumbnail_url); const response = await loadImageFromURL(thumbnail_url); if (response) { setAvatar(response); -- cgit v1.2.3-70-g09d2