From 604dc249185b40ab60c8c44a83e97e30194f9087 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 26 Apr 2021 17:45:20 -0400
Subject: added cancel button

---
 src/screens/chat/ChatSearchBar.tsx | 25 ++++---------------------
 src/screens/chat/NewChatModal.tsx  | 10 ++--------
 2 files changed, 6 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index d8aff567..1faf6dc0 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -16,7 +16,6 @@ import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
-  animationProgress: Animated.SharedValue<number>;
   searching: boolean;
   placeholder: string;
 }
@@ -26,7 +25,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  animationProgress,
   onLayout,
   placeholder,
 }) => {
@@ -37,14 +35,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
     Keyboard.dismiss();
   };
 
-  /*
-   * On-search marginRight style ("cancel" button slides and fades in).
-   */
-  const animatedStyles = useAnimatedStyle<ViewStyle>(() => ({
-    marginRight: animationProgress.value * 58,
-    opacity: animationProgress.value,
-  }));
-
   return (
     <View style={styles.container} onLayout={onLayout}>
       <Animated.View style={styles.inputContainer}>
@@ -61,11 +51,9 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
           {...{placeholder, value, onChangeText, onFocus, onBlur}}
         />
       </Animated.View>
-      <Animated.View style={animatedStyles}>
-        <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-          <Text style={styles.cancelText}>Cancel</Text>
-        </TouchableOpacity>
-      </Animated.View>
+      <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+        <Text style={styles.cancelText}>Cancel</Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -87,9 +75,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: '#F0F0F0',
   },
-  searchIcon: {
-    marginRight: 8,
-  },
   input: {
     flex: 1,
     fontSize: 16,
@@ -97,10 +82,8 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.5),
   },
   cancelButton: {
-    height: '100%',
-    position: 'absolute',
     justifyContent: 'center',
-    paddingHorizontal: 8,
+    paddingLeft: 10,
   },
   cancelText: {
     color: '#818181',
diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx
index 95e46ecd..3d9a1d70 100644
--- a/src/screens/chat/NewChatModal.tsx
+++ b/src/screens/chat/NewChatModal.tsx
@@ -27,10 +27,6 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
   setChatModalVisible,
 }) => {
   const [searching, setSearching] = useState(false);
-  /*
-   * Animated value
-   */
-  const animationProgress = useSharedValue<number>(0);
   const [results, setResults] = useState<SectionListData<any>[]>([]);
   const [query, setQuery] = useState<string>('');
   const handleFocus = () => {
@@ -40,21 +36,19 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
     Keyboard.dismiss();
   };
   const handleCancel = () => {
-    setSearching(false);
+    setChatModalVisible(false);
   };
 
   const getDefaultSuggested = async () => {
     const searchResults = await loadSearchResults(
       `${SEARCH_ENDPOINT_SUGGESTED}`,
     );
-    console.log(searchResults);
     const sanitizedResult = [
       {
         title: 'users',
         data: searchResults?.users,
       },
     ];
-    console.log(searchResults, sanitizedResult);
     setResults(sanitizedResult);
   };
 
@@ -102,7 +96,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
           onBlur={handleBlur}
           onFocus={handleFocus}
           value={query}
-          {...{animationProgress, searching}}
+          searching={searching}
           placeholder={''}
         />
         {results.length > 0 && (
-- 
cgit v1.2.3-70-g09d2