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]);