From 19813bb8c241ee8cbf4cc6ad8dc2084cfb90b16b Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 02:40:59 -0500 Subject: Prune unused imports and variables --- src/services/SocialLinkingService.ts | 1 - src/services/SuggestedPeopleService.ts | 2 +- src/services/UserFriendsService.ts | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) (limited to 'src') diff --git a/src/services/SocialLinkingService.ts b/src/services/SocialLinkingService.ts index d1c5c2ff..90b26c96 100644 --- a/src/services/SocialLinkingService.ts +++ b/src/services/SocialLinkingService.ts @@ -13,7 +13,6 @@ import { LINK_TWITTER_OAUTH, } from '../constants'; import {COMING_SOON_MSG, ERROR_LINK, SUCCESS_LINK} from '../constants/strings'; -import {CategorySelection} from '../screens'; // A list of endpoint strings for all the integrated socials export const integratedEndpoints: {[social: string]: [string, string]} = { diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts index c57de59d..d0032458 100644 --- a/src/services/SuggestedPeopleService.ts +++ b/src/services/SuggestedPeopleService.ts @@ -99,7 +99,7 @@ export const getSuggestedPeopleProfile = async (userId: string) => { } }; -export const getMutualBadgeHolders = async (badgeId: string) => { +export const getMutualBadgeHolders = async () => { try { const token = await AsyncStorage.getItem('token'); const response = await fetch(SP_MUTUAL_BADGE_HOLDERS_ENDPOINT, { diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts index a0bf7ac7..dbec1974 100644 --- a/src/services/UserFriendsService.ts +++ b/src/services/UserFriendsService.ts @@ -25,7 +25,6 @@ export const loadFriends = async (userId: string, token: string) => { }; export const friendOrUnfriendUser = async ( - user: string, friend: string, token: string, friendship_status: FriendshipStatusType, -- cgit v1.2.3-70-g09d2 From 3489cb3cf0adc8593fe4f64e0fccb2b6e4228ef5 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 03:18:58 -0500 Subject: Add small note for explore service --- src/services/ExploreService.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts index 33b79b4a..56a2e3d1 100644 --- a/src/services/ExploreService.ts +++ b/src/services/ExploreService.ts @@ -51,6 +51,7 @@ export const getAllExploreSections = async () => { return EMPTY_PROFILE_PREVIEW_LIST; } const data = await response.json(); + // TODO (if we return to original explore format): get keys from backend API const exploreSections: Record = { 'New to Tagg': data.categories.new_to_tagg, 'People You May Know': data.categories.people_you_may_know, -- cgit v1.2.3-70-g09d2 From 9c101786697df2c3fe79a2d9186a7f79530b7283 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 03:20:02 -0500 Subject: Create CategoryPreviewType --- src/types/types.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src') diff --git a/src/types/types.ts b/src/types/types.ts index 186cb4d5..7839e3f5 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -14,6 +14,11 @@ export interface ProfilePreviewType { thumbnail_url: string; } +export interface CategoryPreviewType { + name: string; + category: string; +} + export type FriendshipStatusType = 'friends' | 'requested' | 'no_record'; export interface ProfileType { -- cgit v1.2.3-70-g09d2 From 46a578b5cc9c3230448e8d9db0ba6ff75d5b8852 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 03:20:38 -0500 Subject: Create util for saving recently-searched categories --- src/utils/users.ts | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) (limited to 'src') diff --git a/src/utils/users.ts b/src/utils/users.ts index 653c941e..efae6d20 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -19,6 +19,7 @@ import {AppDispatch} from './../store/configureStore'; import {RootState} from './../store/rootReducer'; import { ProfilePreviewType, + CategoryPreviewType, ProfileType, ScreenType, UserType, @@ -196,3 +197,36 @@ export const addUserToRecentlyViewed = async (user: ProfilePreviewType) => { console.log(e); } }; + +/* + * Stores `category` in AsyncStorage as a recently searched category. + */ +export const addCategoryToRecentlySearched = async ( + category: CategoryPreviewType, +) => { + const recentlySearchedCategoriesKey = '@recently_searched_categories'; + let categories: CategoryPreviewType[]; + // retrieve recently-searched categories and set new list + try { + const categoriesJSON = await AsyncStorage.getItem( + recentlySearchedCategoriesKey, + ); + if (categoriesJSON) { + categories = JSON.parse(categoriesJSON); + categories.push(category); + } else { + categories = [category]; + } + // store updated list of recently-searched categories + try { + AsyncStorage.setItem( + recentlySearchedCategoriesKey, + JSON.stringify(categories), + ); + } catch (e) { + console.log(e); + } + } catch (e) { + console.log(e); + } +}; -- cgit v1.2.3-70-g09d2 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') 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') 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:48:09 -0500 Subject: Fix duplicate stores of a category --- src/utils/users.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src') diff --git a/src/utils/users.ts b/src/utils/users.ts index efae6d20..15107c99 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -213,6 +213,8 @@ export const addCategoryToRecentlySearched = async ( ); if (categoriesJSON) { categories = JSON.parse(categoriesJSON); + // TODO: make this more efficient by comparing shorter key + if (categories.find((c) => c.name === category.name)) return; categories.push(category); } else { categories = [category]; -- cgit v1.2.3-70-g09d2 From 32bf3bf2cfa2f4499711225b2f1da5f3ed274832 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> 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') 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') 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 01800876e7441d0cc8e7ed77ac1ec9915c15a613 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Mon, 8 Mar 2021 05:54:45 -0500 Subject: Fix conditional for displaying categories --- src/screens/search/SearchScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index f9ad7711..39feee3b 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -179,7 +179,8 @@ const SearchScreen: React.FC = () => { /> - {results === undefined && recents.length !== 0 ? ( + {results === undefined && + recents.length + recentCategories.length !== 0 ? ( Date: Mon, 8 Mar 2021 06:39:28 -0500 Subject: Move setQuery('') to animation callback to hide re-render --- src/screens/search/SearchScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 39feee3b..835a5622 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -112,14 +112,13 @@ const SearchScreen: React.FC = () => { setSearching(true); }; const handleCancel = () => { - setQuery(''); Keyboard.dismiss(); const topOutConfig = { duration: 180, toValue: -SCREEN_HEIGHT, easing: Easing.inOut(Easing.ease), }; - timing(top, topOutConfig).start(); + timing(top, topOutConfig).start(() => setQuery('')); setSearching(false); }; -- 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') 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