From 594de4668248bac9b744e6882329183c95ac339c Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Wed, 10 Mar 2021 18:15:26 -0500 Subject: Add utils, fix ordering of recent searches --- src/components/search/SearchResultCell.tsx | 4 ++-- src/components/search/SearchResults.tsx | 34 ++++++++++++++++++------------ 2 files changed, 22 insertions(+), 16 deletions(-) (limited to 'src/components') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 5cba6d2f..f274bfb9 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -14,11 +14,11 @@ import { } from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import { - addUserToRecentlyViewed, checkIfUserIsBlocked, defaultUserProfile, fetchUserX, userXInStore, + addUserToRecentlySearched, addCategoryToRecentlySearched, } from '../../utils/users'; @@ -74,7 +74,7 @@ const SearchResultsCell: React.FC = ({ return; } - addUserToRecentlyViewed({ + addUserToRecentlySearched({ id, first_name, last_name, diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index 277b3454..ef518d8b 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -23,20 +23,26 @@ const SearchResults: React.FC = ({results, categories}) => { const {user: loggedInUser} = useSelector((state: RootState) => state.user); return ( - {categories.map((category: CategoryPreviewType) => ( - - ))} - {results.map((profile: ProfilePreviewType) => ( - - ))} + {categories + .slice(0) + .reverse() + .map((category: CategoryPreviewType) => ( + + ))} + {results + .slice(0) + .reverse() + .map((profile: ProfilePreviewType) => ( + + ))} ); }; -- cgit v1.2.3-70-g09d2 From f7557073cc3a5a70b8514c7cb041952d54aa31a1 Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Wed, 10 Mar 2021 19:02:29 -0500 Subject: Add simple, non-animated dynamic placeholder --- src/components/search/SearchBar.tsx | 83 +++++++++++++++++++++++++++++++++++-- src/screens/search/SearchScreen.tsx | 2 +- 2 files changed, 80 insertions(+), 5 deletions(-) (limited to 'src/components') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 5e3a1e64..61d7582f 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect} from 'react'; import { StyleSheet, TextInput, @@ -20,6 +20,7 @@ const AnimatedIcon = Animated.createAnimatedComponent(Icon); interface SearchBarProps extends TextInputProps { onCancel: () => void; top: Animated.Value; + searching: boolean; } const SearchBar: React.FC = ({ onFocus, @@ -27,6 +28,7 @@ const SearchBar: React.FC = ({ onChangeText, value, onCancel, + searching, top, }) => { const handleSubmit = ( @@ -35,9 +37,83 @@ const SearchBar: React.FC = ({ e.preventDefault(); Keyboard.dismiss(); }; + const DEFAULT_PLACEHOLDER: string = 'Search'; + // the list of suggestions to cycle through. TODO: get this from the backend + const SEARCH_SUGGESTIONS: string[] = [ + "Brown '21", + "Brown '22", + "Brown '23", + "Brown '24", + 'Trending on Tagg', + 'New to Tagg', + ]; + /* + * index & id of current placeholder, used in selecting next placeholder. -1 + * indicates DEFAULT_PLACEHOLDER. TODO: make it appear more random by tracking + * last 3-5 ids & use longer list of placeholders + */ + const [placeholderId, setPlaceholderId] = useState(-1); + // the current placeholder + const [placeholder, setPlaceholder] = useState(DEFAULT_PLACEHOLDER); + + /* + * Utility function that generates a random integer in [0, xCeil). + * + * @param xCeil - the exclusive ceiling (getRandomInt(2) => 0 or 1, not 2) + * @returns a random integer in the range [0, xCeil) + */ + const getRandomInt = (xCeil: number): number => { + return Math.floor(Math.random() * Math.floor(xCeil)); + }; + + /* + * Handler for `placeholderChangeInterval` that sets the next placeholderId. + */ + const updatePlaceholder = () => { + let nextId: number = getRandomInt(SEARCH_SUGGESTIONS.length); + while (nextId === placeholderId) { + nextId = getRandomInt(SEARCH_SUGGESTIONS.length); + } + // TODO: FIGURE OUT WHY CHANGES IN placeholderId ARE NOT REFLECTED HERE + // my thought: the value is set when the function is defined, so it keeps + // its inital value of -1 forever. + console.log(`Previous ID: ${placeholderId}`); + console.log(`Next ID: ${nextId}`); + setPlaceholderId(nextId); + }; + + /* + * Update `placeholder` when `placeholderId` is updated by the interval handler. + */ + useEffect(() => { + if (placeholderId === -1) { + setPlaceholder(DEFAULT_PLACEHOLDER); + return; + } + setPlaceholder( + DEFAULT_PLACEHOLDER.concat(` '${SEARCH_SUGGESTIONS[placeholderId]}'`), + ); + }, [placeholderId]); + + /* + * Sets the interval when the user begins searching and clears it when the user is done. + */ + useEffect(() => { + if (!searching) { + return; + } + updatePlaceholder(); + const updateInterval = setInterval(() => { + updatePlaceholder(); + }, 4000); + return () => { + clearInterval(updateInterval); + setPlaceholderId(-1); + }; + }, [searching]); /* - * CSS properties for width change animation. + * Animated nodes used in search bar activation animation. */ const marginRight: Animated.Node = interpolate(top, { inputRange: [-SCREEN_HEIGHT, 0], @@ -59,13 +135,12 @@ const SearchBar: React.FC = ({ /> diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 089e0d27..59b17f57 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -167,7 +167,7 @@ const SearchScreen: React.FC = () => { onBlur={handleBlur} onFocus={handleFocus} value={query} - {...{top}} + {...{top, searching}} /> Date: Wed, 10 Mar 2021 23:00:12 -0500 Subject: Utilize util to get search suggestions list --- src/components/search/SearchBar.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) (limited to 'src/components') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index 61d7582f..1a855f20 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -13,7 +13,7 @@ import { import Animated, {interpolate} from 'react-native-reanimated'; import Icon from 'react-native-vector-icons/Feather'; import {normalize} from 'react-native-elements'; -import {SCREEN_HEIGHT} from '../../utils'; +import {SCREEN_HEIGHT, getSearchSuggestions} from '../../utils'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); @@ -39,14 +39,7 @@ const SearchBar: React.FC = ({ }; const DEFAULT_PLACEHOLDER: string = 'Search'; // the list of suggestions to cycle through. TODO: get this from the backend - const SEARCH_SUGGESTIONS: string[] = [ - "Brown '21", - "Brown '22", - "Brown '23", - "Brown '24", - 'Trending on Tagg', - 'New to Tagg', - ]; + const SEARCH_SUGGESTIONS: string[] = getSearchSuggestions(); /* * index & id of current placeholder, used in selecting next placeholder. -1 * indicates DEFAULT_PLACEHOLDER. TODO: make it appear more random by tracking -- cgit v1.2.3-70-g09d2 From 3c1e9ee07e6cc09cf9ac4d28fb9615e8e36ed14c Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 12 Mar 2021 11:24:43 -0800 Subject: Defined specific width --- src/components/search/SearchResultCell.tsx | 1 + src/components/search/SearchResultList.tsx | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 5cba6d2f..6954ff8c 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -172,6 +172,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', paddingHorizontal: 25, paddingVertical: 15, + width: SCREEN_WIDTH, }, imageContainer: { width: SCREEN_WIDTH * 0.112, diff --git a/src/components/search/SearchResultList.tsx b/src/components/search/SearchResultList.tsx index d8cf02d9..2a4d3746 100644 --- a/src/components/search/SearchResultList.tsx +++ b/src/components/search/SearchResultList.tsx @@ -51,7 +51,7 @@ const SearchResultList: React.FC = ({ {width: SCREEN_WIDTH}, keyboardVisible ? styles.keyboardOpen : {}, ]} - contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}} + contentContainerStyle={styles.sectionListContentContainer} sections={results} keyExtractor={(item, index) => item.id + index} renderItem={({section, item}) => { @@ -77,6 +77,10 @@ const styles = StyleSheet.create({ height: SCREEN_HEIGHT, paddingBottom: SCREEN_HEIGHT * 0.1, }, + sectionListContentContainer: { + paddingBottom: SCREEN_HEIGHT * 0.15, + width: SCREEN_WIDTH, + }, sectionHeaderStyle: { width: '100%', height: 0.5, -- cgit v1.2.3-70-g09d2