diff options
Diffstat (limited to 'src/components/search')
-rw-r--r-- | src/components/search/SearchResult.tsx | 172 | ||||
-rw-r--r-- | src/components/search/SearchResults.tsx | 5 |
2 files changed, 3 insertions, 174 deletions
diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx deleted file mode 100644 index 04624004..00000000 --- a/src/components/search/SearchResult.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import React, {useEffect, useState, useContext} from 'react'; -import {ProfilePreviewType} from '../../types'; -import { - View, - Text, - Image, - StyleSheet, - ViewProps, - TouchableOpacity, -} from 'react-native'; -import {useNavigation} from '@react-navigation/native'; -import RNFetchBlob from 'rn-fetch-blob'; -import AsyncStorage from '@react-native-community/async-storage'; -import {AVATAR_PHOTO_ENDPOINT} from '../../constants'; -import {UserType} from '../../types'; -import {ProfileContext} from '../../routes/viewProfile'; -const NO_USER: UserType = { - userId: '', - username: '', -}; - -interface SearchResultProps extends ViewProps { - profilePreview: ProfilePreviewType; -} -const SearchResult: React.FC<SearchResultProps> = ({ - profilePreview: {username, first_name, last_name, id}, - style, -}) => { - const navigation = useNavigation(); - const {loadProfile, updateMoments} = useContext(ProfileContext); - const [avatarURI, setAvatarURI] = useState<string | null>(null); - const [user, setUser] = useState<UserType>(NO_USER); - useEffect(() => { - let mounted = true; - const loadAvatar = async () => { - try { - const token = await AsyncStorage.getItem('token'); - if (!token) { - setUser(NO_USER); - return; - } - const response = await RNFetchBlob.config({ - fileCache: true, - appendExt: 'jpg', - }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${id}/`, { - Authorization: 'Token ' + token, - }); - const status = response.info().status; - if (status === 200) { - if (mounted) { - setAvatarURI(response.path()); - } - return; - } - if (mounted) { - setAvatarURI(''); - } - } catch (error) { - console.log(error); - } - }; - loadAvatar(); - return () => { - mounted = false; - }; - }, [id]); - - /** - * Adds a searched user to the recently searched cache if they're tapped on. - * Cache maintains 10 recently searched users, popping off the oldest one if - * needed to make space. - */ - const addToRecentlyStoredAndNavigateToProfile = async () => { - let user: ProfilePreviewType = { - id, - username, - first_name, - last_name, - }; - try { - 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]; - } - - //Load user profile and set new moments to true, navigate to Profile - //Load user profile makes sure that we actually load profile of the user the logged in user want to view - //Set new moments to true makes sure that we download the moment for the user being viewed again. - //Not sure if we should make this call before caching the search results ?? - loadProfile(user.id, user.username); - updateMoments(true); - navigation.navigate('Profile', { - isProfileView: true, - }); - - try { - let recentlySearchedListString = JSON.stringify(recentlySearchedList); - await AsyncStorage.setItem( - '@recently_searched_users', - recentlySearchedListString, - ); - } catch (e) { - console.log(e); - } - } catch (e) { - console.log(e); - } - }; - - return ( - <TouchableOpacity - onPress={addToRecentlyStoredAndNavigateToProfile} - style={[styles.container, style]}> - <Image - style={styles.avatar} - source={ - avatarURI - ? {uri: avatarURI} - : require('../../assets/images/avatar-placeholder.png') - } - /> - <View style={styles.nameContainer}> - <Text style={styles.username}>@{username}</Text> - <Text style={styles.name}>{first_name.concat(' ', last_name)}</Text> - </View> - </TouchableOpacity> - ); -}; - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - }, - avatar: { - height: 60, - width: 60, - borderRadius: 30, - marginRight: 15, - }, - nameContainer: { - justifyContent: 'space-evenly', - alignSelf: 'stretch', - }, - username: { - fontSize: 18, - fontWeight: '500', - }, - name: { - fontSize: 16, - color: '#333', - }, -}); - -export default SearchResult; diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index 16bff818..57db4167 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {ProfilePreviewType} from '../../types'; -import SearchResult from './SearchResult'; +import ProfilePreview from '../profile/ProfilePreview'; import {StyleSheet, View} from 'react-native'; interface SearchResultsProps { results: Array<ProfilePreviewType>; @@ -9,10 +9,11 @@ const SearchResults: React.FC<SearchResultsProps> = ({results}) => { return ( <View> {results.map((profilePreview) => ( - <SearchResult + <ProfilePreview style={styles.result} key={profilePreview.id} {...{profilePreview}} + isComment={false} /> ))} </View> |