From af349a745bb00b5260f84909320d511ae9d0af2b Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 2 Mar 2021 17:28:02 -0800 Subject: updated formatting, minor changes and integration testing --- src/assets/images/bwbadges.png | Bin 0 -> 528 bytes src/assets/images/bwbadges@2x.png | Bin 0 -> 991 bytes src/assets/images/bwbadges@3x.png | Bin 0 -> 1438 bytes src/assets/images/search.png | Bin 0 -> 354 bytes src/assets/images/search@2x.png | Bin 0 -> 643 bytes src/assets/images/search@3x.png | Bin 0 -> 901 bytes src/components/search/SearchResultCell.tsx | 208 ++++++++++++++++------------- src/components/search/SearchResultList.tsx | 64 ++++----- src/constants/api.ts | 1 + src/screens/search/SearchScreen.tsx | 100 +++++++++----- src/screens/search/mock.ts | 4 + 11 files changed, 218 insertions(+), 159 deletions(-) create mode 100644 src/assets/images/bwbadges.png create mode 100644 src/assets/images/bwbadges@2x.png create mode 100644 src/assets/images/bwbadges@3x.png create mode 100644 src/assets/images/search.png create mode 100644 src/assets/images/search@2x.png create mode 100644 src/assets/images/search@3x.png (limited to 'src') diff --git a/src/assets/images/bwbadges.png b/src/assets/images/bwbadges.png new file mode 100644 index 00000000..3a337775 Binary files /dev/null and b/src/assets/images/bwbadges.png differ diff --git a/src/assets/images/bwbadges@2x.png b/src/assets/images/bwbadges@2x.png new file mode 100644 index 00000000..60c2f995 Binary files /dev/null and b/src/assets/images/bwbadges@2x.png differ diff --git a/src/assets/images/bwbadges@3x.png b/src/assets/images/bwbadges@3x.png new file mode 100644 index 00000000..874c0c4d Binary files /dev/null and b/src/assets/images/bwbadges@3x.png differ diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 00000000..ba9906ba Binary files /dev/null and b/src/assets/images/search.png differ diff --git a/src/assets/images/search@2x.png b/src/assets/images/search@2x.png new file mode 100644 index 00000000..fa133ae1 Binary files /dev/null and b/src/assets/images/search@2x.png differ diff --git a/src/assets/images/search@3x.png b/src/assets/images/search@3x.png new file mode 100644 index 00000000..3ea4ce15 Binary files /dev/null and b/src/assets/images/search@3x.png differ 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 = ({ - 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 = ({ + 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 ( - - - - - {username} - - - {first_name + ' ' + last_name} - - + } + })(); + }, [thumbnail_url]); + + const userCell = () => { + return ( + + + + {`@${username}`} + + {first_name + ' ' + last_name} + - ); - }; - - const categoryCell = () => { - return ( - + + ); + }; + + const searchIcon = () => { + return require('../../assets/images/search.png'); + }; + + const universityIcon = () => { + return require('../../assets/images/bwbadges.png'); + }; + + const categoryCell = () => { + return ( + + - - - {name} - - - ); - }; - - return ( - <> - {name !== undefined && categoryCell()} - {name === undefined && userCell()} - + + {name} + + ); }; - 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; diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 702ce7c8..c464e7b1 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,10 +1,11 @@ -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 from 'react'; +import { + SectionList, + StyleSheet, + View +} from 'react-native'; +import { PreviewType, ScreenType } from '../../types'; +import { normalize, SCREEN_HEIGHT } from '../../utils'; import SearchResultsCell from './SearchResultCell'; interface SearchResultsProps { @@ -13,37 +14,36 @@ interface SearchResultsProps { screenType: ScreenType; } +const sectionHeader: React.FC = (showBorder: Boolean) => { + if (showBorder) { + return ; + } + return null; +}; + const SearchResultList: React.FC = ({results}) => { return ( - - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title}}) => { - if (title === 'categories') { - return ; - } - return ( - - ); - }} - /> - + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title}}) => + sectionHeader(title !== 'categories') + } + /> ); }; const styles = StyleSheet.create({ - containerSearch: {flexDirection: 'column', flexWrap: 'wrap'}, - container: {flex: 1, marginTop: 24}, + container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02}, + sectionHeaderStyle: { + width: '100%', + height: 0.5, + marginBottom: normalize(24), + backgroundColor: '#C4C4C4', + }, }); export default SearchResultList; diff --git a/src/constants/api.ts b/src/constants/api.ts index 57c26824..5e23ac7e 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -18,6 +18,7 @@ export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/'; export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/'; export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/'; export const SEARCH_ENDPOINT: string = API_URL + 'search/'; +export const SEARCH_V2_ENDPOINT: string = API_URL + 'search/v2/'; export const MOMENTS_ENDPOINT: string = API_URL + 'moments/'; export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/'; export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index c3bd9fec..39b0425d 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -21,7 +21,11 @@ import { SearchResultList, TabsGradient, } from '../../components'; -import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import { + SEARCH_ENDPOINT, + SEARCH_V2_ENDPOINT, + TAGG_LIGHT_BLUE, +} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; @@ -40,7 +44,7 @@ const NO_USER: UserType = { const SearchScreen: React.FC = () => { const {recentSearches} = useSelector((state: RootState) => state.taggUsers); const [query, setQuery] = useState(''); - const [results, setResults] = useState([]); + const [results, setResults] = useState(Array()); const [recents, setRecents] = useState>( recentSearches ?? [], ); @@ -65,40 +69,62 @@ const SearchScreen: React.FC = () => { setResults([]); return; } - const loadResults = async (q: string) => { - // try { - // const token = await AsyncStorage.getItem('token'); - // const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, { - // method: 'GET', - // headers: { - // Authorization: 'Token ' + token, - // }, - // }); - // const status = response.status; - // if (status === 200) { - // let searchResults = await response.json(); - // setResults(searchResults); - // return; - // } - // setResults([]); - // } catch (error) { - // console.log(error); - // setResults([]); - // } - const searchResults = MockResults(); - const sanitizedResult = [ - { - title: 'categories', - data: searchResults.categories, - }, - { - title: 'users', - data: searchResults.users, - }, - ]; - setResults(sanitizedResult); - }; - loadResults(query); + // const loadResults = async (q: string) => { + // try { + // const token = await AsyncStorage.getItem('token'); + // const response = await fetch(`${SEARCH_V2_ENDPOINT}?query=${q}`, { + // method: 'GET', + // headers: { + // Authorization: 'Token ' + token, + // }, + // }); + // const {status} = response; + // if (status === 200) { + // const searchResults = await response.json(); + // const sanitizedResult = [ + // { + // title: 'categories', + // data: searchResults.categories, + // }, + // { + // title: 'users', + // data: searchResults.users, + // }, + // ]; + // setResults(sanitizedResult); + // } else { + // const searchResults = MockResults(); + // const sanitizedResult = [ + // { + // title: 'categories', + // data: searchResults.categories, + // }, + // { + // title: 'users', + // data: searchResults.users, + // }, + // ]; + // setResults(sanitizedResult); + // } + // setResults([]); + // } catch (error) { + // console.log(error); + // setResults([]); + // } + // }; + const searchResults = MockResults(); + const sanitizedResult = [ + { + title: 'categories', + data: searchResults.categories, + }, + { + title: 'users', + data: searchResults.users, + }, + ]; + setResults(sanitizedResult); + // loadResults(query); }, [query]); /** @@ -175,7 +201,7 @@ const SearchScreen: React.FC = () => { /> - {results && Object.keys(results).length === 0 ? ( + {results && results.length === 0 ? ( { { id: 11, name: "Brown '21", + category: 'Brown', }, { id: 12, name: "Brown '22", + category: 'Brown', }, { id: 13, name: "Brown '23", + category: null, }, { id: 14, name: "Brown '24", + category: null, }, ], users: [ -- cgit v1.2.3-70-g09d2