From d1d1e218be52f3a509221f0ce4b5b42e682067cf Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Mon, 1 Mar 2021 16:40:28 -0800
Subject: Created new search screen

---
 src/components/search/Explore.tsx      | 73 ++++++++++++++++++++++++++--------
 src/components/search/SearchBar.tsx    | 46 +++++++--------------
 src/components/search/SearchHeader.tsx |  8 ++--
 3 files changed, 75 insertions(+), 52 deletions(-)

(limited to 'src/components')

diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index 2a3bc749..54bbe4b5 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -1,20 +1,30 @@
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
-import {useSelector} from 'react-redux';
-import {EXPLORE_SECTION_TITLES} from '../../constants';
-import {RootState} from '../../store/rootReducer';
-import {ExploreSectionType} from '../../types';
-import {normalize} from '../../utils';
-import ExploreSection from './ExploreSection';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_WIDTH} from '../../utils';
 
 const Explore: React.FC = () => {
-  const {explores} = useSelector((state: RootState) => state.taggUsers);
+  // Get categories from backend
+  const categories = ['Brown 21', 'Brown 22', 'Brown 23', 'Brown 24'];
+
   return (
     <View style={styles.container}>
-      <Text style={styles.header}>Search Profiles</Text>
-      {explores &&
-        EXPLORE_SECTION_TITLES.map((title: ExploreSectionType) => (
-          <ExploreSection key={title} title={title} users={explores[title]} />
+      {categories &&
+        categories.map((category) => (
+          <LinearGradient
+            colors={['#8000FF', '#00FFFF']}
+            start={{x: 0.0, y: 1.0}}
+            end={{x: 1.0, y: 1.0}}
+            style={styles.gradientContainer}>
+            <TouchableOpacity
+              style={styles.buttonContainer}
+              onPress={() => {
+                console.log('Navigate to Discover Users!');
+              }}>
+              <Text style={styles.buttonText}>{category}</Text>
+            </TouchableOpacity>
+          </LinearGradient>
         ))}
     </View>
   );
@@ -23,13 +33,42 @@ const Explore: React.FC = () => {
 const styles = StyleSheet.create({
   container: {
     zIndex: 0,
+    top: '3%',
+    alignSelf: 'center',
+    flexDirection: 'row',
+    width: SCREEN_WIDTH * 0.9,
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly',
+  },
+  gradientContainer: {
+    width: 159,
+    height: 38,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: '2.5%',
+    flexDirection: 'row',
+    alignContent: 'center',
+    borderRadius: 20,
+    borderColor: 'transparent',
+    borderWidth: 1,
+  },
+  buttonContainer: {
+    backgroundColor: 'white',
+    width: 158,
+    height: 37,
+    borderRadius: 20,
+    borderColor: 'transparent',
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignContent: 'center',
+    justifyContent: 'center',
   },
-  header: {
-    fontWeight: '700',
-    fontSize: normalize(22),
-    color: '#fff',
-    marginBottom: '2%',
-    margin: '5%',
+  buttonText: {
+    fontWeight: '400',
+    fontSize: 15,
+    lineHeight: 17.9,
+    alignSelf: 'center',
+    color: '#828282',
   },
 });
 export default Explore;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 3f666ef0..dce1b40c 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -10,14 +10,9 @@ import {
   NativeSyntheticEvent,
   TextInputSubmitEditingEventData,
 } from 'react-native';
-import Animated, {
-  interpolate,
-  interpolateColors,
-} from 'react-native-reanimated';
-import {SCREEN_HEIGHT} from '../../utils';
+import Animated from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
-
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+import {normalize} from 'react-native-elements';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -31,21 +26,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
   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>,
   ) => {
@@ -55,17 +37,17 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      <Animated.View style={[styles.inputContainer, {borderColor: color}]}>
+      <Animated.View style={[styles.inputContainer]}>
         <AnimatedIcon
           name="search"
-          color={color}
+          color={'#7E7E7E'}
           size={25}
           style={styles.searchIcon}
         />
-        <AnimatedTextInput
-          style={[styles.input, {color}]}
-          placeholder={'Search...'}
-          placeholderTextColor={'#fff'}
+        <TextInput
+          style={[styles.input]}
+          placeholder={'Search'}
+          placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="while-editing"
           autoCapitalize="none"
@@ -73,11 +55,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
           {...{value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      <Animated.View style={{opacity, marginRight}}>
+      <View style={styles.cancelButtonView}>
         <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
           <Text style={styles.cancelText}>Cancel</Text>
         </TouchableOpacity>
-      </Animated.View>
+      </View>
     </View>
   );
 };
@@ -86,6 +68,7 @@ const styles = StyleSheet.create({
   container: {
     height: 40,
     flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'stretch',
     zIndex: 2,
   },
@@ -94,9 +77,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 8,
-    borderWidth: 1.5,
     borderRadius: 20,
-    backgroundColor: '#fff3',
+    backgroundColor: '#F0F0F0',
   },
   searchIcon: {
     marginRight: 8,
@@ -104,8 +86,10 @@ const styles = StyleSheet.create({
   input: {
     flex: 1,
     fontSize: 16,
-    color: '#fff',
+    color: '#828282',
+    letterSpacing: normalize(0.5),
   },
+  cancelButtonView: {width: 70, flexDirection: 'row', justifyContent: 'center'},
   cancelButton: {
     position: 'absolute',
     height: '100%',
diff --git a/src/components/search/SearchHeader.tsx b/src/components/search/SearchHeader.tsx
index 2a022f50..0d9f5973 100644
--- a/src/components/search/SearchHeader.tsx
+++ b/src/components/search/SearchHeader.tsx
@@ -25,17 +25,17 @@ const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
   });
   return (
     <View style={[styles.container, style]}>
-      <View style={styles.headerContainer}>
+      {/* <View style={styles.headerContainer}>
         <Animated.Text
           style={[styles.header, {opacity: exploreOpacity, color}]}>
           Explore
         </Animated.Text>
-      </View>
-      <View style={styles.headerContainer}>
+      </View> */}
+      {/* <View style={styles.headerContainer}>
         <Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
           Search
         </Animated.Text>
-      </View>
+      </View> */}
     </View>
   );
 };
-- 
cgit v1.2.3-70-g09d2