diff options
Diffstat (limited to 'src/components/search/SearchResultCell.tsx')
| -rw-r--r-- | src/components/search/SearchResultCell.tsx | 208 |
1 files changed, 118 insertions, 90 deletions
diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 46d5ee44..cdeed922 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -1,100 +1,128 @@ -import React, {useEffect, useState} from 'react'; -import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; -import ProfilePreview from '../profile/ProfilePreview'; -import {Image, SectionList, StyleSheet, View, Text} from 'react-native'; -import {normalize} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; -import {loadImageFromURL} from '../../services'; +import React, { useEffect, useState } from 'react'; +import { Image, StyleSheet, Text, View } from 'react-native'; +import { loadImageFromURL } from '../../services'; +import { ProfilePreviewType } from '../../types'; +import { normalize, SCREEN_WIDTH } from '../../utils'; +import { defaultUserProfile } from '../../utils/users'; +interface SearchResults { + profileData: ProfilePreviewType; +} -const SearchResultsCell: React.FC<ProfilePreviewType> = ({ - item: {id, name, username, first_name, last_name, thumbnail_url}, - }) => { - const [avatar, setAvatar] = useState(''); - useEffect(() => { - (async () => { - const response = await loadImageFromURL(thumbnail_url); - if (response) { - setAvatar(response); +const SearchResultsCell: React.FC<SearchResults> = ({ + profileData: { + id, + name, + username, + first_name, + last_name, + thumbnail_url, + category, + }, +}) => { + const [avatar, setAvatar] = useState(''); + useEffect(() => { + (async () => { + if (thumbnail_url !== undefined) { + try { + const response = await loadImageFromURL(thumbnail_url); + if (response) { + setAvatar(response); + } + } catch (error) { + console.log('Error while downloading ', error); + throw error; } - })(); - }, []); - - const userCell = () => { - return ( - <View - style={{ - flexDirection: 'row', - marginHorizontal: 24, - marginBottom: 24, - }}> - <Image - defaultSource={defaultUserProfile()} - source={{uri: avatar}} - style={{width: 42, height: 42, borderRadius: 21}} - /> - <View - style={{ - marginLeft: 30, - flexDirection: 'column', - justifyContent: 'space-between', - }}> - <Text - style={{ - fontWeight: '500', - fontSize: normalize(14), - }}> - {username} - </Text> - <Text - style={{ - fontWeight: '500', - fontSize: normalize(14), - }}> - {first_name + ' ' + last_name} - </Text> - </View> + } + })(); + }, [thumbnail_url]); + + const userCell = () => { + return ( + <View style={styles.cellContainer}> + <Image + defaultSource={defaultUserProfile()} + source={{uri: avatar}} + style={styles.imageContainer} + /> + <View style={[styles.initialTextContainer, styles.multiText]}> + <Text style={styles.initialTextStyle}>{`@${username}`}</Text> + <Text style={styles.secondaryTextStyle}> + {first_name + ' ' + last_name} + </Text> </View> - ); - }; - - const categoryCell = () => { - return ( - <View - style={{ - flexDirection: 'row', - marginHorizontal: 24, - marginBottom: 24, - }}> + </View> + ); + }; + + const searchIcon = () => { + return require('../../assets/images/search.png'); + }; + + const universityIcon = () => { + return require('../../assets/images/bwbadges.png'); + }; + + const categoryCell = () => { + return ( + <View style={styles.cellContainer}> + <View style={[styles.imageContainer, styles.categoryBackground]}> <Image - defaultSource={defaultUserProfile()} - source={{uri: avatar}} - style={{width: 42, height: 42, borderRadius: 21}} + resizeMode="contain" + source={category === 'Brown' ? universityIcon() : searchIcon()} + style={styles.categoryImage} /> - <View - style={{ - marginLeft: 30, - flexDirection: 'column', - justifyContent: 'center', - }}> - <Text - style={{ - fontWeight: '500', - fontSize: normalize(14), - }}> - {name} - </Text> - </View> </View> - ); - }; - - return ( - <> - {name !== undefined && categoryCell()} - {name === undefined && userCell()} - </> + <View style={styles.initialTextContainer}> + <Text style={styles.initialTextStyle}>{name}</Text> + </View> + </View> ); }; - export default SearchResultsCell
\ No newline at end of file + return ( + <> + {name !== undefined && categoryCell()} + {name === undefined && userCell()} + </> + ); +}; + +const styles = StyleSheet.create({ + cellContainer: { + flexDirection: 'row', + marginHorizontal: SCREEN_WIDTH * 0.08, + marginBottom: SCREEN_WIDTH * 0.08, + }, + imageContainer: { + width: SCREEN_WIDTH * 0.112, + height: SCREEN_WIDTH * 0.112, + borderRadius: (SCREEN_WIDTH * 0.112) / 2, + }, + categoryBackground: { + backgroundColor: 'rgba(196, 196, 196, 0.45)', + justifyContent: 'center', + alignItems: 'center', + }, + categoryImage: { + width: '40%', + height: '40%', + }, + initialTextContainer: { + marginLeft: SCREEN_WIDTH * 0.08, + flexDirection: 'column', + justifyContent: 'center', + }, + initialTextStyle: { + fontWeight: '500', + fontSize: normalize(14), + }, + secondaryTextStyle: { + fontWeight: '500', + fontSize: normalize(12), + color: '#828282', + }, + multiText: {justifyContent: 'space-between'}, +}); + +export default SearchResultsCell; |