From 5ad6895e17afb110d4d85388b479d875597b01a5 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 03:38:25 -0500 Subject: Add handler for category search result selection --- src/components/search/SearchResultCell.tsx | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) (limited to 'src/components/search') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 0f6f5b7d..8f7d922f 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -6,7 +6,12 @@ import {useDispatch, useStore} from 'react-redux'; import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings'; import {loadImageFromURL} from '../../services'; import {RootState} from '../../store/rootReducer'; -import {ProfilePreviewType, ScreenType, UserType} from '../../types'; +import { + ProfilePreviewType, + ScreenType, + UserType, + CategoryPreviewType, +} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import { addUserToRecentlyViewed, @@ -14,6 +19,7 @@ import { defaultUserProfile, fetchUserX, userXInStore, + addCategoryToRecentlySearched, } from '../../utils/users'; interface SearchResults { @@ -66,7 +72,7 @@ const SearchResultsCell: React.FC = ({ return; } - await addUserToRecentlyViewed({ + addUserToRecentlyViewed({ id, first_name, last_name, @@ -99,6 +105,17 @@ const SearchResultsCell: React.FC = ({ } }; + /* + * Save selected category in recently-searched categories and navigate to its Discover screen. + */ + const onPressCategory = async () => { + const categoryObj: CategoryPreviewType = {name, category}; + addCategoryToRecentlySearched(categoryObj); + navigation.navigate('DiscoverUsers', { + searchCategory: {id, name}, + }); + }; + const userCell = () => { return ( = ({ const categoryCell = () => { return ( - - navigation.navigate('DiscoverUsers', { - searchCategory: {id, name}, - }) - }> + Date: Mon, 8 Mar 2021 04:06:09 -0500 Subject: Remove incorrect documentation --- src/components/search/RecentSearches.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/components/search') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 6fb9fca9..5db1342c 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -18,9 +18,7 @@ interface RecentSearchesProps extends TouchableOpacityProps { recents: Array; screenType: ScreenType; } -/** - * An image component that returns the of the icon for a specific social media platform. - */ + const RecentSearches: React.FC = (props) => { return ( Date: Mon, 8 Mar 2021 05:49:55 -0500 Subject: Add categories to recently-searched results --- src/components/search/RecentSearches.tsx | 27 ++++++++++++----- src/components/search/SearchResults.tsx | 52 +++++++++++++++++++++----------- src/screens/search/SearchScreen.tsx | 49 ++++++++++++++++++++++++------ 3 files changed, 94 insertions(+), 34 deletions(-) (limited to 'src/components/search') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 5db1342c..89379596 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -7,7 +7,12 @@ import { TouchableOpacityProps, ScrollView, } from 'react-native'; -import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; +import { + PreviewType, + ProfilePreviewType, + ScreenType, + CategoryPreviewType, +} from '../../types'; import {TAGG_LIGHT_BLUE} from '../../constants'; import SearchResults from './SearchResults'; import {SCREEN_HEIGHT} from '../../utils'; @@ -16,26 +21,35 @@ interface RecentSearchesProps extends TouchableOpacityProps { sectionTitle: PreviewType; sectionButtonTitle: string; recents: Array; + recentCategories: CategoryPreviewType[]; screenType: ScreenType; } const RecentSearches: React.FC = (props) => { + const { + sectionTitle, + sectionButtonTitle, + recents, + recentCategories, + screenType, + } = props; return ( - {props.sectionTitle} - {props.sectionButtonTitle && ( + {sectionTitle} + {sectionButtonTitle && ( Clear all )} ); @@ -44,7 +58,6 @@ const RecentSearches: React.FC = (props) => { const styles = StyleSheet.create({ mainContainer: { marginLeft: '3%', - padding: 20, }, container: { flexDirection: 'row', diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index bf355220..798d3251 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -1,22 +1,33 @@ import React from 'react'; -import {ProfilePreviewType, PreviewType, ScreenType} from '../../types'; +import { + ProfilePreviewType, + PreviewType, + ScreenType, + CategoryPreviewType, +} from '../../types'; import ProfilePreview from '../profile/ProfilePreview'; import {StyleSheet, View} from 'react-native'; +import SearchResultsCell from './SearchResultCell'; +import {useSelector} from 'react-redux'; +import {RootState} from 'src/store/rootReducer'; interface SearchResultsProps { - results: Array; + results: ProfilePreviewType[]; previewType: PreviewType; screenType: ScreenType; + categories: CategoryPreviewType[]; } const SearchResults: React.FC = ({ results, previewType, screenType, + categories, }) => { /** * Added the following swicth case to make Results on Search and Recents screen a list * Flex is love */ - var containerStyle; + const {user: loggedInUser} = useSelector((state: RootState) => state.user); + let containerStyle; switch (previewType) { case 'Search': containerStyle = styles.containerSearch; @@ -29,25 +40,32 @@ const SearchResults: React.FC = ({ } return ( - {results && - results.map((profilePreview) => ( - - ))} + {categories.map((category: CategoryPreviewType) => ( + + ))} + {results.map((profile: ProfilePreviewType) => ( + + ))} ); }; const styles = StyleSheet.create({ - containerSearch: {flexDirection: 'column', flexWrap: 'wrap'}, - container: {flexDirection: 'row', flexWrap: 'wrap'}, - result: { - marginVertical: 10, + containerSearch: { + flexDirection: 'column', + flexWrap: 'wrap', + }, + container: { + flexDirection: 'row', + flexWrap: 'wrap', }, }); diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 223fc2b2..f9ad7711 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -17,7 +17,7 @@ import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants'; import {loadSearchResults} from '../../services'; import {resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ProfilePreviewType, ScreenType} from '../../types'; +import {ProfilePreviewType, ScreenType, CategoryPreviewType} from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** @@ -32,6 +32,9 @@ const SearchScreen: React.FC = () => { const [recents, setRecents] = useState>( recentSearches ?? [], ); + const [recentCategories, setRecentCategories] = useState< + CategoryPreviewType[] + >([]); const [searching, setSearching] = useState(false); const top = Animated.useValue(-SCREEN_HEIGHT); const [keyboardVisible, setKeyboardVisible] = React.useState( @@ -50,7 +53,18 @@ const SearchScreen: React.FC = () => { }, []); const dispatch = useDispatch(); + /* + * If user begins actively searching, refresh recently-searched list. + */ + useEffect(() => { + if (searching) loadRecentSearches(); + }, [searching]); + + /* + * Main handler for changes in query. + */ useEffect(() => { + if (!query.length) loadRecentSearches(); if (query.length < 3) { setResults(undefined); return; @@ -97,7 +111,7 @@ const SearchScreen: React.FC = () => { timing(top, topInConfig).start(); setSearching(true); }; - const handleBlur = () => { + const handleCancel = () => { setQuery(''); Keyboard.dismiss(); const topOutConfig = { @@ -108,6 +122,7 @@ const SearchScreen: React.FC = () => { timing(top, topOutConfig).start(); setSearching(false); }; + const loadRecentlySearchedUsers = async () => { try { const asyncCache = await AsyncStorage.getItem('@recently_searched_users'); @@ -116,17 +131,31 @@ const SearchScreen: React.FC = () => { console.log(e); } }; - const clearRecentlySearched = async () => { + const loadRecentlySearchedCategories = async () => { try { - await AsyncStorage.removeItem('@recently_searched_users'); - loadRecentlySearchedUsers(); + const recentCategoriesJSON = await AsyncStorage.getItem( + '@recently_searched_categories', + ); + setRecentCategories( + recentCategoriesJSON ? JSON.parse(recentCategoriesJSON) : [], + ); } catch (e) { console.log(e); } }; - const handleUpdate = async (val: string) => { - setQuery(val); + const loadRecentSearches = () => { loadRecentlySearchedUsers(); + loadRecentlySearchedCategories(); + }; + const clearRecentlySearched = async () => { + try { + AsyncStorage.removeItem('@recently_searched_users'); + AsyncStorage.removeItem('@recently_searched_categories'); + loadRecentlySearchedUsers(); + loadRecentlySearchedCategories(); + } catch (e) { + console.log(e); + } }; return ( @@ -141,8 +170,8 @@ const SearchScreen: React.FC = () => { showsVerticalScrollIndicator={false}> { sectionTitle="Recent" sectionButtonTitle="Clear all" onPress={clearRecentlySearched} - recents={recents} screenType={ScreenType.Search} + {...{recents, recentCategories}} /> ) : ( Date: Mon, 8 Mar 2021 05:50:16 -0500 Subject: Resolve styling issues --- src/components/search/SearchResultCell.tsx | 4 ++-- src/components/search/SearchResultsBackground.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/search') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 8f7d922f..30675a74 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -167,8 +167,8 @@ const SearchResultsCell: React.FC = ({ const styles = StyleSheet.create({ cellContainer: { flexDirection: 'row', - marginHorizontal: SCREEN_WIDTH * 0.08, - marginBottom: SCREEN_WIDTH * 0.08, + paddingHorizontal: 0, + paddingVertical: 15, }, imageContainer: { width: SCREEN_WIDTH * 0.112, diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index f6f40f52..94f5d59f 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -34,6 +34,7 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH, position: 'absolute', backgroundColor: '#fff', + paddingHorizontal: 25, zIndex: 0, }, contentContainer: { -- cgit v1.2.3-70-g09d2 From 973c8a03681724f2e303fcd021301764bfc4717c Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 06:40:16 -0500 Subject: Fix minor styling issues --- src/components/search/RecentSearches.tsx | 24 +++++++++++------------ src/components/search/SearchResultCell.tsx | 2 +- src/components/search/SearchResultList.tsx | 1 - src/components/search/SearchResultsBackground.tsx | 14 ++++--------- 4 files changed, 17 insertions(+), 24 deletions(-) (limited to 'src/components/search') diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx index 89379596..b4cc5483 100644 --- a/src/components/search/RecentSearches.tsx +++ b/src/components/search/RecentSearches.tsx @@ -19,7 +19,6 @@ import {SCREEN_HEIGHT} from '../../utils'; interface RecentSearchesProps extends TouchableOpacityProps { sectionTitle: PreviewType; - sectionButtonTitle: string; recents: Array; recentCategories: CategoryPreviewType[]; screenType: ScreenType; @@ -28,7 +27,6 @@ interface RecentSearchesProps extends TouchableOpacityProps { const RecentSearches: React.FC = (props) => { const { sectionTitle, - sectionButtonTitle, recents, recentCategories, screenType, @@ -36,14 +34,12 @@ const RecentSearches: React.FC = (props) => { return ( - + contentContainerStyle={styles.contentContainer}> + {sectionTitle} - {sectionButtonTitle && ( - - Clear all - - )} + + Clear all + = (props) => { const styles = StyleSheet.create({ mainContainer: { - marginLeft: '3%', + flexGrow: 1, + }, + contentContainer: { + paddingBottom: SCREEN_HEIGHT * 0.1, }, - container: { + header: { + paddingHorizontal: 25, + paddingVertical: 5, flexDirection: 'row', }, title: { fontSize: 18, fontWeight: '600', flexGrow: 1, - marginBottom: '5%', }, clear: { fontSize: 18, diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 30675a74..e0351d96 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -167,7 +167,7 @@ const SearchResultsCell: React.FC = ({ const styles = StyleSheet.create({ cellContainer: { flexDirection: 'row', - paddingHorizontal: 0, + paddingHorizontal: 25, paddingVertical: 15, }, imageContainer: { diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index 14d5de6d..41c8c8b2 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -70,7 +70,6 @@ const SearchResultList: React.FC = ({ const styles = StyleSheet.create({ container: { - marginTop: SCREEN_HEIGHT * 0.02, height: SCREEN_HEIGHT, }, sectionHeaderStyle: { diff --git a/src/components/search/SearchResultsBackground.tsx b/src/components/search/SearchResultsBackground.tsx index 94f5d59f..25dcf781 100644 --- a/src/components/search/SearchResultsBackground.tsx +++ b/src/components/search/SearchResultsBackground.tsx @@ -21,7 +21,7 @@ const SearchResultsBackground: React.FC = ({ return ( - + {children} @@ -33,16 +33,10 @@ const styles = StyleSheet.create({ height: SCREEN_HEIGHT, width: SCREEN_WIDTH, position: 'absolute', - backgroundColor: '#fff', - paddingHorizontal: 25, + backgroundColor: 'white', + paddingTop: 60, + paddingBottom: 10, zIndex: 0, }, - contentContainer: { - flexGrow: 1, - paddingBottom: SCREEN_HEIGHT / 15, - }, - results: { - marginTop: StatusBarHeight, - }, }); export default SearchResultsBackground; -- cgit v1.2.3-70-g09d2