diff options
| -rw-r--r-- | src/components/search/SearchBar.tsx | 36 |
1 files changed, 20 insertions, 16 deletions
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index c0c228fe..61d7582f 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -37,10 +37,9 @@ const SearchBar: React.FC<SearchBarProps> = ({ e.preventDefault(); Keyboard.dismiss(); }; - // the search bar's default placeholder const DEFAULT_PLACEHOLDER: string = 'Search'; // the list of suggestions to cycle through. TODO: get this from the backend - const PLACEHOLDERS: string[] = [ + const SEARCH_SUGGESTIONS: string[] = [ "Brown '21", "Brown '22", "Brown '23", @@ -50,13 +49,11 @@ const SearchBar: React.FC<SearchBarProps> = ({ ]; /* * index & id of current placeholder, used in selecting next placeholder. -1 - * indicates no suggestion, i.e. DEFAULT_PLACEHOLDER. TODO: make it seem more - * random by tracking last 3-5 ids + * indicates DEFAULT_PLACEHOLDER. TODO: make it appear more random by tracking + * last 3-5 ids & use longer list of placeholders */ const [placeholderId, setPlaceholderId] = useState<number>(-1); - /* - * the current placeholder, i.e. DEFAULT_PLACEHOLDER.concat(` ${PLACEHOLDERS[placeholderId]}`) - */ + // the current placeholder const [placeholder, setPlaceholder] = useState<string>(DEFAULT_PLACEHOLDER); /* @@ -73,11 +70,16 @@ const SearchBar: React.FC<SearchBarProps> = ({ * Handler for `placeholderChangeInterval` that sets the next placeholderId. */ const updatePlaceholder = () => { - let nextPlaceholderId = getRandomInt(PLACEHOLDERS.length); - while (nextPlaceholderId === placeholderId) { - nextPlaceholderId = getRandomInt(PLACEHOLDERS.length); + let nextId: number = getRandomInt(SEARCH_SUGGESTIONS.length); + while (nextId === placeholderId) { + nextId = getRandomInt(SEARCH_SUGGESTIONS.length); } - setPlaceholderId(nextPlaceholderId); + // 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); }; /* @@ -89,7 +91,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ return; } setPlaceholder( - DEFAULT_PLACEHOLDER.concat(` '${PLACEHOLDERS[placeholderId]}'`), + DEFAULT_PLACEHOLDER.concat(` '${SEARCH_SUGGESTIONS[placeholderId]}'`), ); }, [placeholderId]); @@ -97,13 +99,15 @@ const SearchBar: React.FC<SearchBarProps> = ({ * Sets the interval when the user begins searching and clears it when the user is done. */ useEffect(() => { - if (!searching) return; + if (!searching) { + return; + } updatePlaceholder(); - const placeholderChangeInterval = setInterval(() => { + const updateInterval = setInterval(() => { updatePlaceholder(); - }, 4500); + }, 4000); return () => { - clearInterval(placeholderChangeInterval); + clearInterval(updateInterval); setPlaceholderId(-1); }; }, [searching]); |