diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/profile/ProfilePreview.tsx | 35 | ||||
-rw-r--r-- | src/components/search/RecentSearches.tsx | 1 | ||||
-rw-r--r-- | src/components/search/SearchResultCell.tsx | 87 | ||||
-rw-r--r-- | src/components/search/SearchResultList.tsx | 82 |
4 files changed, 134 insertions, 71 deletions
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<ProfilePreviewProps> = ({ 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<SearchResults> = ({ @@ -19,8 +31,9 @@ const SearchResultsCell: React.FC<SearchResults> = ({ thumbnail_url, category, }, + loggedInUser, }) => { - const [avatar, setAvatar] = useState(''); + const [avatar, setAvatar] = useState<string | undefined>(undefined); useEffect(() => { (async () => { if (thumbnail_url !== undefined) { @@ -37,9 +50,60 @@ const SearchResultsCell: React.FC<SearchResults> = ({ })(); }, [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 ( - <View style={styles.cellContainer}> + <TouchableOpacity + onPress={addToRecentlyStoredAndNavigateToProfile} + style={styles.cellContainer}> <Image defaultSource={defaultUserProfile()} source={{uri: avatar}} @@ -51,7 +115,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({ {first_name + ' ' + last_name} </Text> </View> - </View> + </TouchableOpacity> ); }; @@ -65,7 +129,7 @@ const SearchResultsCell: React.FC<SearchResults> = ({ const categoryCell = () => { return ( - <View style={styles.cellContainer}> + <TouchableOpacity style={styles.cellContainer}> <View style={[styles.imageContainer, styles.categoryBackground]}> <Image resizeMode="contain" @@ -76,16 +140,11 @@ const SearchResultsCell: React.FC<SearchResults> = ({ <View style={styles.initialTextContainer}> <Text style={styles.initialTextStyle}>{name}</Text> </View> - </View> + </TouchableOpacity> ); }; - 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<any> | undefined; previewType: PreviewType; screenType: ScreenType; } @@ -24,34 +28,66 @@ const sectionHeader: React.FC<Boolean> = (showBorder: Boolean) => { const SearchResultList: React.FC<SearchResultsProps> = ({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 ( - <KeyboardAvoidingView style={styles.container} behavior="padding"> - <SectionList - style={styles.container} - showsVerticalScrollIndicator={false} - sections={results} - keyExtractor={(item, index) => item + index} - renderItem={({item}) => <SearchResultsCell profileData={item} />} - renderSectionHeader={({section: {title, data}}) => { - if (title === 'categories' && data.length === 0) { - setShowSection(false); - } - return sectionHeader(title !== 'categories' && showSection); - }} - /> - <View style={{height: SCREEN_HEIGHT * 0.35}} /> - </KeyboardAvoidingView> + <View style={styles.container}> + {showEmptyView && ( + <View style={styles.noResultsTextContainer}> + <Text style={styles.noResultsTextStyle}>{NO_RESULTS_FOUND}</Text> + </View> + )} + {!showEmptyView && ( + <SectionList + style={{height: SCREEN_HEIGHT, width: SCREEN_WIDTH}} + showsVerticalScrollIndicator={false} + sections={results} + keyExtractor={(item, index) => item.id + index} + renderItem={({item}) => ( + <SearchResultsCell profileData={item} loggedInUser={loggedInUser} /> + )} + renderSectionHeader={({section: {title, data}}) => { + if (title === 'categories' && data.length === 0) { + setShowSection(false); + } + return sectionHeader(title !== 'categories' && showSection); + }} + /> + )} + </View> ); }; 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; |