From 79396f899fe25f611d790d918e8ae4275a61e43c Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 4 Mar 2021 16:06:21 -0800 Subject: TMA-663-Changes for empty view --- src/components/profile/ProfilePreview.tsx | 35 +----------- src/components/search/RecentSearches.tsx | 1 - src/components/search/SearchResultCell.tsx | 87 +++++++++++++++++++++++++----- src/components/search/SearchResultList.tsx | 82 ++++++++++++++++++++-------- 4 files changed, 134 insertions(+), 71 deletions(-) (limited to 'src/components') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 0021b1c6..f08335a1 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -16,6 +16,7 @@ import {loadImageFromURL} from '../../services'; import {RootState} from '../../store/rootreducer'; import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; import { + addUserToRecentlyViewed, checkIfUserIsBlocked, fetchUserX, isIPhoneX, @@ -89,39 +90,7 @@ const ProfilePreview: React.FC = ({ return; } if (previewType !== 'Comment') { - const jsonValue = await AsyncStorage.getItem( - '@recently_searched_users', - ); - let recentlySearchedList = - jsonValue != null ? JSON.parse(jsonValue) : null; - if (recentlySearchedList) { - if (recentlySearchedList.length > 0) { - if ( - recentlySearchedList.some( - (saved_user: ProfilePreviewType) => saved_user.id === id, - ) - ) { - console.log('User already in recently searched.'); - } else { - if (recentlySearchedList.length >= 10) { - recentlySearchedList.pop(); - } - recentlySearchedList.unshift(user); - } - } - } else { - recentlySearchedList = [user]; - } - - try { - let recentlySearchedListString = JSON.stringify(recentlySearchedList); - await AsyncStorage.setItem( - '@recently_searched_users', - recentlySearchedListString, - ); - } catch (e) { - console.log(e); - } + await addUserToRecentlyViewed(user) } const userXId = diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 43a26514..3925d084 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -54,7 +54,6 @@ const styles = StyleSheet.create({ marginBottom: '5%', }, clear: { - fontSize: 18, fontWeight: 'bold', color: TAGG_LIGHT_BLUE, diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 084c6afe..705fb5c9 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -1,12 +1,24 @@ +import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; +import {Alert, Image, StyleSheet, Text, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {useDispatch, useStore} from 'react-redux'; +import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings'; import {loadImageFromURL} from '../../services'; -import {ProfilePreviewType} from '../../types'; +import {RootState} from '../../store/rootReducer'; +import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; +import { + addUserToRecentlyViewed, + checkIfUserIsBlocked, + defaultUserProfile, + fetchUserX, + userXInStore, +} from '../../utils/users'; interface SearchResults { profileData: ProfilePreviewType; + loggedInUser: UserType; } const SearchResultsCell: React.FC = ({ @@ -19,8 +31,9 @@ const SearchResultsCell: React.FC = ({ thumbnail_url, category, }, + loggedInUser, }) => { - const [avatar, setAvatar] = useState(''); + const [avatar, setAvatar] = useState(undefined); useEffect(() => { (async () => { if (thumbnail_url !== undefined) { @@ -37,9 +50,60 @@ const SearchResultsCell: React.FC = ({ })(); }, [thumbnail_url]); + const dispatch = useDispatch(); + const state: RootState = useStore().getState(); + const navigation = useNavigation(); + const addToRecentlyStoredAndNavigateToProfile = async () => { + try { + //If the logged in user is blocked by the user being viewed, do not proceed. + const isUserBlocked = await checkIfUserIsBlocked( + id, + dispatch, + loggedInUser, + ); + if (isUserBlocked) { + Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE); + return; + } + + await addUserToRecentlyViewed({ + id, + first_name, + last_name, + thumbnail_url, + username, + }); + + const userXId = loggedInUser.username === username ? undefined : id; + + /** + * Dispatch an event to Fetch the user details only if we're navigating to + * a userX's profile. + * If the user is already present in store, do not fetch again. + * Finally, Navigate to profile of the user selected. + */ + if (userXId && !userXInStore(state, ScreenType.Search, id)) { + await fetchUserX( + dispatch, + {userId: id, username: username}, + ScreenType.Search, + ); + } + + navigation.navigate('Profile', { + userXId, + screenType: ScreenType.Search, + }); + } catch (e) { + console.log(e); + } + }; + const userCell = () => { return ( - + = ({ {first_name + ' ' + last_name} - + ); }; @@ -65,7 +129,7 @@ const SearchResultsCell: React.FC = ({ const categoryCell = () => { return ( - + = ({ {name} - + ); }; - return ( - <> - {name !== undefined && categoryCell()} - {name === undefined && userCell()} - - ); + return name === undefined ? userCell() : categoryCell(); }; const styles = StyleSheet.create({ diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index bf08e205..7f8073c4 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,16 +1,20 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { + Keyboard, KeyboardAvoidingView, SectionList, StyleSheet, - View + Text, + View, } from 'react-native'; -import { PreviewType, ScreenType } from '../../types'; -import { normalize, SCREEN_HEIGHT } from '../../utils'; +import {useSelector} from 'react-redux'; +import {RootState} from 'src/store/rootreducer'; +import {PreviewType, ScreenType} from '../../types'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import SearchResultsCell from './SearchResultCell'; - +import {NO_RESULTS_FOUND} from '../../constants/strings'; interface SearchResultsProps { - results: []; + results: Array | undefined; previewType: PreviewType; screenType: ScreenType; } @@ -24,34 +28,66 @@ const sectionHeader: React.FC = (showBorder: Boolean) => { const SearchResultList: React.FC = ({results}) => { const [showSection, setShowSection] = useState(true); + const [showEmptyView, setshowEmptyView] = useState(false); + const {user: loggedInUser} = useSelector((state: RootState) => state.user); + + useEffect(() => { + if (results && results.length > 0) { + setshowEmptyView( + results[0].data.length === 0 && results[1].data.length === 0, + ); + } + }, [results]); + return ( - - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title, data}}) => { - if (title === 'categories' && data.length === 0) { - setShowSection(false); - } - return sectionHeader(title !== 'categories' && showSection); - }} - /> - - + + {showEmptyView && ( + + {NO_RESULTS_FOUND} + + )} + {!showEmptyView && ( + item.id + index} + renderItem={({item}) => ( + + )} + renderSectionHeader={({section: {title, data}}) => { + if (title === 'categories' && data.length === 0) { + setShowSection(false); + } + return sectionHeader(title !== 'categories' && showSection); + }} + /> + )} + ); }; const styles = StyleSheet.create({ - container: {marginTop: SCREEN_HEIGHT * 0.02}, + container: { + marginTop: SCREEN_HEIGHT * 0.04, + }, sectionHeaderStyle: { width: '100%', height: 0.5, marginBottom: normalize(24), backgroundColor: '#C4C4C4', }, + keyboardOpen: {marginBottom: SCREEN_HEIGHT * 0.3}, + keyboardClose: {marginBottom: 20}, + noResultsTextContainer: { + justifyContent: 'center', + flexDirection: 'row', + width: SCREEN_WIDTH, + }, + noResultsTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, }); export default SearchResultList; -- cgit v1.2.3-70-g09d2