[TMA-25] Search Functionality (#33)

* Create tabs gradient component

* Add endpoint constant and types for search

* Create search functionality

* [TMA-19*] Abstracted out Social Icon logic (#32)

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Formatted datetime in PostHeader

* Abstracted out social icon switching logic

* Basic mostly functional implementation

Need to figure out why API is being called so much

* Hey it works now! Without a million API calls!

* Fixed bug where app would crash upon login

Also updated property names to be more appropriate

* Added post datetime and social icon

* Updated error message

* Fixed typecheck errors

I don't know that these fixes are the best since I don't think they're generalizable

* Abstracted out social icon switching logic

* Change View to TouchableOpacity

* Create tabs gradient component

* Add endpoint constant and types for search

* Create search functionality

* Change View to TouchableOpacity

Co-authored-by: Justin Shillingford <jgs272@cornell.edu>

1 files changed, 67 insertions, 38 deletions

diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 283b6d59..8bb93d54 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -2,71 +2,97 @@ import React from 'react';
 import {
   StyleSheet,
   TextInput,
-  TextInputProps,
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
   TouchableOpacity,
   Text,
   View,
+  TextInputProps,
+  Keyboard,
+  NativeSyntheticEvent,
+  TextInputSubmitEditingEventData,
 } from 'react-native';
+import Animated, {
+  interpolate,
+  interpolateColors,
+} from 'react-native-reanimated';
+import {SCREEN_HEIGHT} from '../../utils';
 import Icon from 'react-native-vector-icons/Feather';
-import Animated from 'react-native-reanimated';
 
 interface SearchBarProps extends TextInputProps {
-  active: boolean;
+  onCancel: () => void;
+  top: Animated.Value<number>;
 }
-const SearchBar: React.FC<SearchBarProps> = ({onFocus, onBlur, active}) => {
-  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    // TODO: animate Icon & View.inputContainer.borderColor color to '#000'
-    // TODO: animate background color (& page color in results ScrollView) to '#ffff' (last f for opacity)
-    // TODO: animate TextInput width and mount "Cancel" button (& animate opacity)
-    // OR
-    // TODO: just animate "Cancel" button width and opacity (this might be  easier)
-    onFocus && onFocus(e);
-  };
-  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    // TODO: animate Icon color & View.inputContainer borderColor back
-    // TODO: animate background color (and page color in ScrollView) back to '#fff3'
-    // TODO: unmount Cancel button (and animate width change)
-    onBlur && onBlur(e);
+const SearchBar: React.FC<SearchBarProps> = ({
+  onFocus,
+  onBlur,
+  onChangeText,
+  value,
+  onCancel,
+  top,
+  style,
+}) => {
+  const opacity: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [0, 1],
+  });
+  const marginRight: Animated.Node<number> = interpolate(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputRange: [0, 57],
+  });
+  const color: Animated.Node<number> = interpolateColors(top, {
+    inputRange: [-SCREEN_HEIGHT, 0],
+    outputColorRange: ['#fff', '#000'],
+  });
+  const handleSubmit = (
+    e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
+  ) => {
+    e.preventDefault();
+    Keyboard.dismiss();
   };
+  const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+  const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
   return (
-    <View style={styles.container}>
-      <Animated.View style={styles.inputContainer}>
-        <Icon name="search" size={25} color="#fff" style={styles.searchIcon} />
-        <TextInput
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          style={styles.input}
+    <View style={[styles.container, style]}>
+      <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
+        <AnimatedIcon
+          name="search"
+          color={color}
+          size={25}
+          style={styles.searchIcon}
+        />
+        <AnimatedTextInput
+          style={[styles.input, {color}]}
           placeholder={'Search...'}
+          placeholderTextColor={'#fff'}
+          onSubmitEditing={handleSubmit}
+          clearButtonMode="while-editing"
+          {...{value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      {active && (
-        <TouchableOpacity style={styles.cancelButton}>
-          <Text style={styles.cancel}>Cancel</Text>
+      <Animated.View style={{opacity, marginRight}}>
+        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+          <Text style={styles.cancelText}>Cancel</Text>
         </TouchableOpacity>
-      )}
+      </Animated.View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    alignItems: 'center',
     height: 40,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    zIndex: 2,
   },
   inputContainer: {
+    flexGrow: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    flex: 1,
-    height: '100%',
     paddingHorizontal: 8,
-    backgroundColor: '#fff3',
-    borderColor: '#fff',
     borderWidth: 1.5,
     borderRadius: 20,
+    backgroundColor: '#fff3',
   },
   searchIcon: {
     marginRight: 8,
@@ -76,9 +102,12 @@ const styles = StyleSheet.create({
     fontSize: 16,
   },
   cancelButton: {
-    marginHorizontal: 5,
+    position: 'absolute',
+    height: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: 5,
   },
-  cancel: {
+  cancelText: {
     color: '#818181',
     fontWeight: '600',
   },