Add simple, non-animated dynamic placeholder

2 files changed, 76 insertions, 5 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 5e3a1e64..c0c228fe 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<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,79 @@ 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[] = [
+    "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 no suggestion, i.e. DEFAULT_PLACEHOLDER. TODO: make it seem more
+   * random by tracking last 3-5 ids
+   */
+  const [placeholderId, setPlaceholderId] = useState<number>(-1);
+  /*
+   * the current placeholder, i.e. DEFAULT_PLACEHOLDER.concat(` ${PLACEHOLDERS[placeholderId]}`)
+   */
+  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 nextPlaceholderId = getRandomInt(PLACEHOLDERS.length);
+    while (nextPlaceholderId === placeholderId) {
+      nextPlaceholderId = getRandomInt(PLACEHOLDERS.length);
+    }
+    setPlaceholderId(nextPlaceholderId);
+  };
+
+  /*
+   * Update `placeholder` when `placeholderId` is updated by the interval handler.
+   */
+  useEffect(() => {
+    if (placeholderId === -1) {
+      setPlaceholder(DEFAULT_PLACEHOLDER);
+      return;
+    }
+    setPlaceholder(
+      DEFAULT_PLACEHOLDER.concat(` '${PLACEHOLDERS[placeholderId]}'`),
+    );
+  }, [placeholderId]);
+
+  /*
+   * Sets the interval when the user begins searching and clears it when the user is done.
+   */
+  useEffect(() => {
+    if (!searching) return;
+    updatePlaceholder();
+    const placeholderChangeInterval = setInterval(() => {
+      updatePlaceholder();
+    }, 4500);
+    return () => {
+      clearInterval(placeholderChangeInterval);
+      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 +131,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/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}}
       />
       <ScrollView
         scrollEnabled={!searching}