3 files changed, 95 insertions, 21 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 5e3a1e64..1a855f20 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,
@@ -13,13 +13,14 @@ 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);
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
   top: Animated.Value<number>;
+  searching: boolean;
 }
 const SearchBar: React.FC<SearchBarProps> = ({
   onFocus,
@@ -27,6 +28,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
+  searching,
   top,
 }) => {
   const handleSubmit = (
@@ -35,9 +37,76 @@ const SearchBar: React.FC<SearchBarProps> = ({
     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[] = getSearchSuggestions();
+  /*
+   * 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<number>(-1);
+  // the current placeholder
+  const [placeholder, setPlaceholder] = useState<string>(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<number> = interpolate(top, {
     inputRange: [-SCREEN_HEIGHT, 0],
@@ -59,13 +128,12 @@ const SearchBar: React.FC<SearchBarProps> = ({
         />
         <TextInput
           style={[styles.input]}
-          placeholder={'Search'}
           placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="while-editing"
           autoCapitalize="none"
           autoCorrect={false}
-          {...{value, onChangeText, onFocus, onBlur}}
+          {...{placeholder, value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
       <Animated.View style={{marginRight, opacity}}>
diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx
index 6954ff8c..70adcd94 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<SearchResults> = ({
         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<SearchResultsProps> = ({results, categories}) => {
   const {user: loggedInUser} = useSelector((state: RootState) => state.user);
   return (
     <View>
-      {categories.map((category: CategoryPreviewType) => (
-        <SearchResultsCell
-          key={category.name}
-          profileData={category}
-          {...{loggedInUser}}
-        />
-      ))}
-      {results.map((profile: ProfilePreviewType) => (
-        <SearchResultsCell
-          key={profile.id}
-          profileData={profile}
-          {...{loggedInUser}}
-        />
-      ))}
+      {categories
+        .slice(0)
+        .reverse()
+        .map((category: CategoryPreviewType) => (
+          <SearchResultsCell
+            key={category.name}
+            profileData={category}
+            {...{loggedInUser}}
+          />
+        ))}
+      {results
+        .slice(0)
+        .reverse()
+        .map((profile: ProfilePreviewType) => (
+          <SearchResultsCell
+            key={profile.id}
+            profileData={profile}
+            {...{loggedInUser}}
+          />
+        ))}
     </View>
   );
 };