aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/profile/ProfilePreview.tsx35
-rw-r--r--src/components/search/RecentSearches.tsx1
-rw-r--r--src/components/search/SearchResultCell.tsx87
-rw-r--r--src/components/search/SearchResultList.tsx82
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;