From 7a5ae728ee96acdf6b52fefa6ebaf7640a8724a1 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Tue, 2 Mar 2021 13:04:27 -0800 Subject: TMA-663-Updated Search init --- src/components/search/RecentSearches.tsx | 2 + src/components/search/SearchResultCell.tsx | 100 +++++++++++++++++++ src/components/search/SearchResultList.tsx | 49 ++++++++++ src/components/search/SearchResultsBackground.tsx | 1 - src/components/search/index.ts | 1 + src/screens/search/SearchScreen.tsx | 58 ++++++----- src/screens/search/mock.ts | 114 ++++++++++++++++++++++ src/utils/users.ts | 5 + 8 files changed, 307 insertions(+), 23 deletions(-) create mode 100644 src/components/search/SearchResultCell.tsx create mode 100644 src/components/search/SearchResultList.tsx create mode 100644 src/screens/search/mock.ts (limited to 'src') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index bebf6bcf..43a26514 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -42,6 +42,7 @@ const RecentSearches: React.FC = (props) => { const styles = StyleSheet.create({ mainContainer: { marginLeft: '3%', + padding : 20, }, container: { flexDirection: 'row', @@ -53,6 +54,7 @@ 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 new file mode 100644 index 00000000..46d5ee44 --- /dev/null +++ b/src/components/search/SearchResultCell.tsx @@ -0,0 +1,100 @@ +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'; + + +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 userCell = () => { + return ( + + + + + {username} + + + {first_name + ' ' + last_name} + + + + ); + }; + + const categoryCell = () => { + return ( + + + + + {name} + + + + ); + }; + + return ( + <> + {name !== undefined && categoryCell()} + {name === undefined && userCell()} + + ); + }; + + export default SearchResultsCell \ No newline at end of file diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx new file mode 100644 index 00000000..702ce7c8 --- /dev/null +++ b/src/components/search/SearchResultList.tsx @@ -0,0 +1,49 @@ +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 SearchResultsCell from './SearchResultCell'; + +interface SearchResultsProps { + results: []; + previewType: PreviewType; + screenType: ScreenType; +} + +const SearchResultList: React.FC = ({results}) => { + return ( + + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title}}) => { + if (title === 'categories') { + return ; + } + return ( + + ); + }} + /> + + ); +}; + +const styles = StyleSheet.create({ + containerSearch: {flexDirection: 'column', flexWrap: 'wrap'}, + container: {flex: 1, marginTop: 24}, +}); + +export default SearchResultList; diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index 77b1821d..fa4e18ca 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -34,7 +34,6 @@ const styles = StyleSheet.create({ flex: 1, height: SCREEN_HEIGHT, width: SCREEN_WIDTH, - padding: 20, position: 'absolute', backgroundColor: '#fff', zIndex: 0, diff --git a/src/components/search/index.ts b/src/components/search/index.ts index 08052f77..7418f0ba 100644 --- a/src/components/search/index.ts +++ b/src/components/search/index.ts @@ -3,5 +3,6 @@ export {default as SearchHeader} from './SearchHeader'; export {default as SearchBar} from './SearchBar'; export {default as Explore} from './Explore'; export {default as SearchResultsBackground} from './SearchResultsBackground'; +export {default as SearchResultList} from './SearchResultList'; export {default as SearchResults} from './SearchResults'; export {default as DiscoverUsers} from './DiscoverUsers'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 84efa931..c3bd9fec 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -18,6 +18,7 @@ import { SearchHeader, SearchResults, SearchResultsBackground, + SearchResultList, TabsGradient, } from '../../components'; import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; @@ -25,6 +26,7 @@ import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import MockResults from './mock'; const NO_USER: UserType = { userId: '', username: '', @@ -38,7 +40,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([]); const [recents, setRecents] = useState>( recentSearches ?? [], ); @@ -64,25 +66,37 @@ const SearchScreen: React.FC = () => { 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([]); - } + // 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); }, [query]); @@ -161,7 +175,7 @@ const SearchScreen: React.FC = () => { /> - {results.length === 0 && recents.length !== 0 ? ( + {results && Object.keys(results).length === 0 ? ( { screenType={ScreenType.Search} /> ) : ( - { + return { + categories: [ + { + id: 11, + name: "Brown '21", + }, + { + id: 12, + name: "Brown '22", + }, + { + id: 13, + name: "Brown '23", + }, + { + id: 14, + name: "Brown '24", + }, + ], + users: [ + { + id: 'd5295557-59ce-49fc-aa8a-442874dbffc3', + username: 'foobar', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-d5295557-59ce-49fc-aa8a-442874dbffc3-thumbnail.jpg', + }, + { + id: '31e93eb5-ccc9-4743-b053-eff368e23fa8', + username: 'foobar2', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-31e93eb5-ccc9-4743-b053-eff368e23fa8-thumbnail.jpg', + }, + { + id: 'b1b68df9-97ac-48de-b00d-eab10a6a644a', + username: 'foobar3', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b1b68df9-97ac-48de-b00d-eab10a6a644a-thumbnail.jpg', + }, + { + id: 'b89c88b3-6b2f-4b6c-85d9-a03ff5396113', + username: 'foobar4', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-b89c88b3-6b2f-4b6c-85d9-a03ff5396113-thumbnail.jpg', + }, + { + id: '73b4496a-0aa8-4115-98da-2070bf326134', + username: 'foobar5', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-73b4496a-0aa8-4115-98da-2070bf326134-thumbnail.jpg', + }, + { + id: '329763b8-931e-4d4d-8a07-003374d38497', + username: 'foobar6', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-329763b8-931e-4d4d-8a07-003374d38497-thumbnail.jpg', + }, + { + id: '9e82fea2-cddc-41e1-be05-6873f58138ca', + username: 'foobar7', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-9e82fea2-cddc-41e1-be05-6873f58138ca-thumbnail.jpg', + }, + { + id: '6e5b8892-4384-45a1-bc0a-8f2c9d614fbc', + username: 'foobar8', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-6e5b8892-4384-45a1-bc0a-8f2c9d614fbc-thumbnail.jpg', + }, + { + id: 'c49b01c6-9151-4654-8fae-834adfa15727', + username: 'foobar9', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-c49b01c6-9151-4654-8fae-834adfa15727-thumbnail.jpg', + }, + { + id: '5b394d5b-62e3-405e-8ecd-7433517ef688', + username: 'foobar10', + first_name: 'Foo', + last_name: 'Bar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-5b394d5b-62e3-405e-8ecd-7433517ef688-thumbnail.jpg', + }, + { + id: '698e38f0-24ed-404c-9f0c-6a24e43af576', + username: 'fooo', + first_name: 'wefwef', + last_name: 'wefwef', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-698e38f0-24ed-404c-9f0c-6a24e43af576-thumbnail.jpg', + }, + ], + }; +}; + +export default MockResults; diff --git a/src/utils/users.ts b/src/utils/users.ts index ca917ae4..b8faf206 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -159,3 +159,8 @@ export const checkIfUserIsBlocked = async ( } return await isUserBlocked(userId, loggedInUser.userId, token); }; + +export const defaultUserProfile = () => { + const defaultImage = require('../assets/images/avatar-placeholder.png'); + return defaultImage; +}; -- cgit v1.2.3-70-g09d2 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 From 95bc850b9db986b9f462f19d7801218027307d58 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Wed, 3 Mar 2021 12:34:33 -0800 Subject: TMA-663-Search Integration --- src/components/search/ExploreSection.tsx | 2 +- src/components/search/SearchResultCell.tsx | 12 ++-- src/components/search/SearchResultList.tsx | 32 +++++---- src/screens/search/SearchScreen.tsx | 107 ++++++++++++----------------- 4 files changed, 70 insertions(+), 83 deletions(-) (limited to 'src') diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx index 025c8c3c..e888370e 100644 --- a/src/components/search/ExploreSection.tsx +++ b/src/components/search/ExploreSection.tsx @@ -14,7 +14,7 @@ interface ExploreSectionProps { users: ProfilePreviewType[]; } const ExploreSection: React.FC = ({title, users}) => { - return users.length !== 0 ? ( + return users && users.length !== 0 ? ( {title} = (showBorder: Boolean) => { }; const SearchResultList: React.FC = ({results}) => { + const [showSection, setShowSection] = useState(true); return ( - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title}}) => - sectionHeader(title !== 'categories') - } - /> + + item + index} + renderItem={({item}) => } + renderSectionHeader={({section: {title, data}}) => { + if (title === 'categories' && data.length === 0) { + setShowSection(false); + } + return sectionHeader(title !== 'categories' && showSection); + }} + /> + + ); }; const styles = StyleSheet.create({ - container: {flex: 1, marginTop: SCREEN_HEIGHT * 0.02}, + container: {marginTop: SCREEN_HEIGHT * 0.02}, sectionHeaderStyle: { width: '100%', height: 0.5, diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 39b0425d..a66a2cbc 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -16,21 +16,15 @@ import { SearchBackground, SearchBar, SearchHeader, - SearchResults, - SearchResultsBackground, SearchResultList, + SearchResultsBackground, TabsGradient, } from '../../components'; -import { - SEARCH_ENDPOINT, - SEARCH_V2_ENDPOINT, - TAGG_LIGHT_BLUE, -} from '../../constants'; +import {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'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; -import MockResults from './mock'; const NO_USER: UserType = { userId: '', username: '', @@ -69,62 +63,45 @@ const SearchScreen: React.FC = () => { setResults([]); return; } - // 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); + 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, + }, + ]; + + if ( + searchResults.categories.length !== 0 || + searchResults.users.length !== 0 + ) { + if (query.length > 3) { + setResults(sanitizedResult); + return; + } + } + } + } catch (error) { + console.log(error); + } + setResults([]); + }; + loadResults(query); }, [query]); /** @@ -200,6 +177,7 @@ const SearchScreen: React.FC = () => { {...{top, searching}} /> + {results && results.length === 0 ? ( { )} + ); -- cgit v1.2.3-70-g09d2 From 79396f899fe25f611d790d918e8ae4275a61e43c Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Thu, 4 Mar 2021 16:06:21 -0800 Subject: TMA-663-Changes for empty view --- src/components/profile/ProfilePreview.tsx | 35 +-------- src/components/search/RecentSearches.tsx | 1 - src/components/search/SearchResultCell.tsx | 87 ++++++++++++++++++---- src/components/search/SearchResultList.tsx | 82 +++++++++++++++------ src/constants/api.ts | 3 +- src/constants/strings.ts | 1 + src/screens/search/SearchScreen.tsx | 114 +++++++++++++++-------------- src/services/SearchService.ts | 22 ++++++ src/services/index.ts | 1 + src/utils/users.ts | 32 ++++++++ 10 files changed, 249 insertions(+), 129 deletions(-) create mode 100644 src/services/SearchService.ts (limited to 'src') 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 = ({ 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 = ({ @@ -19,8 +31,9 @@ const SearchResultsCell: React.FC = ({ thumbnail_url, category, }, + loggedInUser, }) => { - const [avatar, setAvatar] = useState(''); + const [avatar, setAvatar] = useState(undefined); useEffect(() => { (async () => { if (thumbnail_url !== undefined) { @@ -37,9 +50,60 @@ const SearchResultsCell: React.FC = ({ })(); }, [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 ( - + = ({ {first_name + ' ' + last_name} - + ); }; @@ -65,7 +129,7 @@ const SearchResultsCell: React.FC = ({ const categoryCell = () => { return ( - + = ({ {name} - + ); }; - 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 | undefined; previewType: PreviewType; screenType: ScreenType; } @@ -24,34 +28,66 @@ const sectionHeader: React.FC = (showBorder: Boolean) => { const SearchResultList: React.FC = ({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 ( - - item + index} - renderItem={({item}) => } - renderSectionHeader={({section: {title, data}}) => { - if (title === 'categories' && data.length === 0) { - setShowSection(false); - } - return sectionHeader(title !== 'categories' && showSection); - }} - /> - - + + {showEmptyView && ( + + {NO_RESULTS_FOUND} + + )} + {!showEmptyView && ( + item.id + index} + renderItem={({item}) => ( + + )} + renderSectionHeader={({section: {title, data}}) => { + if (title === 'categories' && data.length === 0) { + setShowSection(false); + } + return sectionHeader(title !== 'categories' && showSection); + }} + /> + )} + ); }; 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; diff --git a/src/constants/api.ts b/src/constants/api.ts index 5e23ac7e..1463683f 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -17,8 +17,7 @@ export const PROFILE_PHOTO_THUMBNAIL_ENDPOINT: string = 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 SEARCH_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/constants/strings.ts b/src/constants/strings.ts index 104cc198..7652fccd 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -49,6 +49,7 @@ export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; +export const NO_RESULTS_FOUND = 'No Results Found!'; export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index a66a2cbc..b6841480 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -3,10 +3,12 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import { Keyboard, + KeyboardAvoidingView, RefreshControl, ScrollView, StatusBar, StyleSheet, + SafeAreaView, } from 'react-native'; import Animated, {Easing, timing} from 'react-native-reanimated'; import {useDispatch, useSelector} from 'react-redux'; @@ -20,11 +22,12 @@ import { SearchResultsBackground, TabsGradient, } from '../../components'; -import {SEARCH_V2_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {loadSearchResults} from '../../services'; const NO_USER: UserType = { userId: '', username: '', @@ -38,14 +41,27 @@ const NO_USER: UserType = { const SearchScreen: React.FC = () => { const {recentSearches} = useSelector((state: RootState) => state.taggUsers); const [query, setQuery] = useState(''); - const [results, setResults] = useState(Array()); + const [results, setResults] = useState | undefined>(undefined); const [recents, setRecents] = useState>( recentSearches ?? [], ); const [searching, setSearching] = useState(false); const top = Animated.useValue(-SCREEN_HEIGHT); const [refreshing, setRefreshing] = useState(false); + const [keyboardVisible, setKeyboardVisible] = React.useState( + 'keyboardVisible', + ); + useEffect(() => { + const showKeyboard = () => setKeyboardVisible('keyboardVisibleTrue'); + Keyboard.addListener('keyboardWillShow', showKeyboard); + return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); + }, []); + useEffect(() => { + const hideKeyboard = () => setKeyboardVisible('keyboardVisibleFalse'); + Keyboard.addListener('keyboardWillHide', hideKeyboard); + return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard); + }, []); const dispatch = useDispatch(); const onRefresh = useCallback(() => { @@ -60,48 +76,31 @@ const SearchScreen: React.FC = () => { useEffect(() => { if (query.length < 3) { - setResults([]); + setResults(undefined); return; } - 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, + (async () => { + const searchResults = await loadSearchResults( + `${SEARCH_ENDPOINT}?query=${query}`, + ); + if (query.length > 2) { + const categories = searchResults?.categories; + const users = searchResults?.users; + const sanitizedResult = [ + { + title: 'categories', + data: categories, }, - }); - const {status} = response; - if (status === 200) { - const searchResults = await response.json(); - const sanitizedResult = [ - { - title: 'categories', - data: searchResults.categories, - }, - { - title: 'users', - data: searchResults.users, - }, - ]; - - if ( - searchResults.categories.length !== 0 || - searchResults.users.length !== 0 - ) { - if (query.length > 3) { - setResults(sanitizedResult); - return; - } - } - } - } catch (error) { - console.log(error); + { + title: 'users', + data: users, + }, + ]; + setResults(sanitizedResult); + } else { + setResults(undefined); } - setResults([]); - }; - loadResults(query); + })(); }, [query]); /** @@ -179,24 +178,27 @@ const SearchScreen: React.FC = () => { - {results && results.length === 0 ? ( - - ) : ( - - )} + + {results === undefined && recents.length !== 0 ? ( + + ) : ( + + )} + - ); diff --git a/src/services/SearchService.ts b/src/services/SearchService.ts new file mode 100644 index 00000000..7b97f9a7 --- /dev/null +++ b/src/services/SearchService.ts @@ -0,0 +1,22 @@ +import AsyncStorage from '@react-native-community/async-storage'; + +export const loadSearchResults = async (url: string) => { + try { + const token = await AsyncStorage.getItem('token'); + const response = await fetch(url, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + const {status} = response; + if (status === 200) { + const searchResults = await response.json(); + return searchResults; + } + } catch (error) { + console.log(error); + throw error; + } + return {}; +}; diff --git a/src/services/index.ts b/src/services/index.ts index ef71233a..28e03e0e 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -12,3 +12,4 @@ export * from './WaitlistUserService'; export * from './CommonService'; export * from './CommentService'; export * from './SuggestedPeopleService'; +export * from './SearchService'; diff --git a/src/utils/users.ts b/src/utils/users.ts index b8faf206..653c941e 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -164,3 +164,35 @@ export const defaultUserProfile = () => { const defaultImage = require('../assets/images/avatar-placeholder.png'); return defaultImage; }; + +export const addUserToRecentlyViewed = async (user: ProfilePreviewType) => { + 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 === user.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); + } +}; -- cgit v1.2.3-70-g09d2 From 7cc6df961f99d5828f6cbe39c7509e17bae7d93c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Mar 2021 16:14:15 -0500 Subject: fixed padding issue --- src/components/search/RecentSearches.tsx | 10 +++-- src/components/search/SearchResultList.tsx | 28 +++++++------- src/components/search/SearchResultsBackground.tsx | 8 ++-- src/screens/search/SearchScreen.tsx | 45 +++++++++-------------- 4 files changed, 42 insertions(+), 49 deletions(-) (limited to 'src') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 3925d084..6fb9fca9 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -5,10 +5,12 @@ import { TouchableOpacity, StyleSheet, TouchableOpacityProps, + ScrollView, } from 'react-native'; import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; import {TAGG_LIGHT_BLUE} from '../../constants'; import SearchResults from './SearchResults'; +import {SCREEN_HEIGHT} from '../../utils'; interface RecentSearchesProps extends TouchableOpacityProps { sectionTitle: PreviewType; @@ -21,7 +23,9 @@ interface RecentSearchesProps extends TouchableOpacityProps { */ const RecentSearches: React.FC = (props) => { return ( - + {props.sectionTitle} {props.sectionButtonTitle && ( @@ -35,14 +39,14 @@ const RecentSearches: React.FC = (props) => { previewType={props.sectionTitle} screenType={props.screenType} /> - + ); }; const styles = StyleSheet.create({ mainContainer: { marginLeft: '3%', - padding : 20, + padding: 20, }, container: { flexDirection: 'row', diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 7f8073c4..a3d9c8c5 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -1,20 +1,15 @@ import React, {useEffect, useState} from 'react'; -import { - Keyboard, - KeyboardAvoidingView, - SectionList, - StyleSheet, - Text, - View, -} from 'react-native'; +import {SectionList, StyleSheet, Text, View} from 'react-native'; import {useSelector} from 'react-redux'; import {RootState} from 'src/store/rootreducer'; +import {NO_RESULTS_FOUND} from '../../constants/strings'; 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: Array | undefined; + keyboardVisible: boolean; previewType: PreviewType; screenType: ScreenType; } @@ -26,7 +21,10 @@ const sectionHeader: React.FC = (showBorder: Boolean) => { return null; }; -const SearchResultList: React.FC = ({results}) => { +const SearchResultList: React.FC = ({ + results, + keyboardVisible, +}) => { const [showSection, setShowSection] = useState(true); const [showEmptyView, setshowEmptyView] = useState(false); const {user: loggedInUser} = useSelector((state: RootState) => state.user); @@ -48,8 +46,11 @@ const SearchResultList: React.FC = ({results}) => { )} {!showEmptyView && ( item.id + index} renderItem={({item}) => ( @@ -69,7 +70,7 @@ const SearchResultList: React.FC = ({results}) => { const styles = StyleSheet.create({ container: { - marginTop: SCREEN_HEIGHT * 0.04, + marginTop: SCREEN_HEIGHT * 0.02, }, sectionHeaderStyle: { width: '100%', @@ -78,7 +79,6 @@ const styles = StyleSheet.create({ backgroundColor: '#C4C4C4', }, keyboardOpen: {marginBottom: SCREEN_HEIGHT * 0.3}, - keyboardClose: {marginBottom: 20}, noResultsTextContainer: { justifyContent: 'center', flexDirection: 'row', diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index fa4e18ca..c5fcc6fb 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Animated, {interpolate} from 'react-native-reanimated'; import {StyleSheet} from 'react-native'; +import Animated, {interpolate} from 'react-native-reanimated'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; interface SearchResultsBackgroundProps { @@ -21,11 +21,9 @@ const SearchResultsBackground: React.FC = ({ return ( - + {children} - + ); }; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index b6841480..70733d7e 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -3,12 +3,10 @@ import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import { Keyboard, - KeyboardAvoidingView, RefreshControl, ScrollView, StatusBar, StyleSheet, - SafeAreaView, } from 'react-native'; import Animated, {Easing, timing} from 'react-native-reanimated'; import {useDispatch, useSelector} from 'react-redux'; @@ -23,15 +21,11 @@ import { TabsGradient, } from '../../components'; import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; +import {loadSearchResults} from '../../services'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ProfilePreviewType, ScreenType, UserType} from '../../types'; +import {ProfilePreviewType, ScreenType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; -import {loadSearchResults} from '../../services'; -const NO_USER: UserType = { - userId: '', - username: '', -}; /** * Search Screen for user recommendations and a search @@ -178,25 +172,22 @@ const SearchScreen: React.FC = () => { - - {results === undefined && recents.length !== 0 ? ( - - ) : ( - - )} - + {results === undefined && recents.length !== 0 ? ( + + ) : ( + + )} -- cgit v1.2.3-70-g09d2