[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>

2 files changed, 88 insertions, 58 deletions

diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 3d1ef2a8..9da9a3d8 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Cover, Content} from '../../components';
+import {Cover, Content, TabsGradient} from '../../components';
 import Animated from 'react-native-reanimated';
 import {AuthContext} from '../../routes/authentication';
 import {StatusBar} from 'react-native';
@@ -19,6 +19,7 @@ const ProfileScreen: React.FC = () => {
       <StatusBar />
       <Cover {...{y, user}} />
       <Content {...{y, user}} />
+      <TabsGradient />
     </>
   );
 };
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 8ef56b73..94b9ab41 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -1,83 +1,112 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
+import {StatusBar, StyleSheet, ScrollView, Keyboard} from 'react-native';
 import {
-  StatusBar,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-  ScrollView,
-} from 'react-native';
-import {SearchBar, SuggestedSection, SearchBackground} from '../../components';
-import {SCREEN_HEIGHT} from '../../utils';
+  SearchBackground,
+  SearchHeader,
+  SearchBar,
+  Explore,
+  SearchResultsBackground,
+  SearchResults,
+  TabsGradient,
+} from '../../components';
+import {SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
+import Animated, {Easing, timing} from 'react-native-reanimated';
+import {ProfilePreviewType} from '../../types';
+import {SEARCH_ENDPOINT} from '../../constants';
+const {Value} = Animated;
 
 /**
  * Search Screen for user recommendations and a search
  * tool to allow user to find other users
  */
+const top: Animated.Value<number> = new Value(-SCREEN_HEIGHT);
 
 const SearchScreen: React.FC = () => {
-  const sections: Array<string> = [
-    'People you follow',
-    'People you may know',
-    'Trending in sports',
-    'Trending on Tagg',
-    'Trending in music',
-  ];
-  // dummy user data
-  const users: Array<string> = [
-    'Sam Davis',
-    'Becca Smith',
-    'Ann Taylor',
-    'Clara Johnson',
-    'Sarah Jung',
-    'Lila Hernandez',
-  ];
-  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [query, setQuery] = useState<string>('');
+  const [results, setResults] = useState<Array<ProfilePreviewType>>([]);
+  useEffect(() => {
+    if (query.length < 3) {
+      setResults([]);
+      return;
+    }
+    const loadResults = async (q: string) => {
+      try {
+        const response = await fetch(`${SEARCH_ENDPOINT}?query=${q}`, {
+          method: 'GET',
+        });
+        const status = response.status;
+        if (status === 200) {
+          let searchResults = await response.json();
+          setResults(searchResults);
+          return;
+        }
+        setResults([]);
+      } catch (error) {
+        console.log(error);
+        setResults([]);
+      }
+    };
+    loadResults(query);
+  }, [query]);
+
   const handleFocus = () => {
-    setIsSearching(true);
+    const topInConfig = {
+      duration: 180,
+      toValue: 0,
+      easing: Easing.bezier(0.31, 0.14, 0.66, 0.82),
+    };
+    timing(top, topInConfig).start();
   };
   const handleBlur = () => {
-    setIsSearching(false);
+    Keyboard.dismiss();
+    const topOutConfig = {
+      duration: 180,
+      toValue: -SCREEN_HEIGHT,
+      easing: Easing.inOut(Easing.ease),
+    };
+    timing(top, topOutConfig).start();
   };
+
   return (
-    <SearchBackground style={styles.screen}>
+    <SearchBackground>
       <StatusBar />
-      <SafeAreaView>
-        <ScrollView showsVerticalScrollIndicator={false}>
-          <Text style={styles.header}>Explore</Text>
-          <SearchBar
-            active={isSearching}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          {!isSearching && (
-            <View style={styles.content}>
-              {sections.map((title) => (
-                <SuggestedSection key={title} title={title} users={users} />
-              ))}
-            </View>
-          )}
-        </ScrollView>
-      </SafeAreaView>
+      <ScrollView
+        keyboardShouldPersistTaps={'always'}
+        stickyHeaderIndices={[4]}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}>
+        <SearchHeader style={styles.header} {...{top}} />
+        <SearchBar
+          style={styles.searchBar}
+          onCancel={handleBlur}
+          onChangeText={setQuery}
+          onBlur={Keyboard.dismiss}
+          onFocus={handleFocus}
+          value={query}
+          {...{top}}
+        />
+        <Explore />
+        <SearchResultsBackground {...{top}}>
+          <SearchResults {...{results}} />
+        </SearchResultsBackground>
+      </ScrollView>
+      <TabsGradient />
     </SearchBackground>
   );
 };
 
 const styles = StyleSheet.create({
-  screen: {
-    paddingTop: 50,
-    paddingBottom: SCREEN_HEIGHT / 10,
+  contentContainer: {
+    paddingTop: StatusBarHeight,
+    paddingBottom: SCREEN_HEIGHT / 15,
     paddingHorizontal: 15,
   },
-  content: {
-    paddingVertical: 20,
+  searchBar: {
+    marginBottom: 20,
   },
   header: {
-    fontWeight: 'bold',
-    fontSize: 24,
-    color: '#fff',
-    marginBottom: 20,
-    textAlign: 'center',
+    marginVertical: 20,
+    zIndex: 1,
   },
 });
 export default SearchScreen;