Merge pull request #389 from IvanIFChen/tma819-new-message-cancel-button

[TMA-819] New message cancel button

5 files changed, 20 insertions, 38 deletions

diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx
index 988c1e79..3d9c0471 100644
--- a/src/components/common/BottomDrawer.tsx
+++ b/src/components/common/BottomDrawer.tsx
@@ -6,7 +6,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Animated, {interpolateColors} from 'react-native-reanimated';
+import Animated, {interpolateColors, useValue} from 'react-native-reanimated';
 import BottomSheet from 'reanimated-bottom-sheet';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -23,7 +23,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
   const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props;
   const drawerRef = useRef<BottomSheet>(null);
   const [modalVisible, setModalVisible] = useState(isOpen);
-  const bgAlpha = new Animated.Value(isOpen ? 1 : 0);
+  const bgAlpha = useValue(isOpen ? 1 : 0);
 
   useEffect(() => {
     if (isOpen) {
@@ -54,6 +54,7 @@ const BottomDrawer: React.FC<BottomDrawerProps> = (props) => {
     inputRange: [0, 1],
     outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'],
   });
+
   return (
     <Modal
       transparent
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index d441b07b..ea36d58b 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -128,7 +128,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
           style={styles.searchIcon}
         />
         <TextInput
-          style={[styles.input]}
+          style={styles.input}
           placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="always"
diff --git a/src/screens/chat/ChatResultsCell.tsx b/src/screens/chat/ChatResultsCell.tsx
index d947c122..e1eb97dd 100644
--- a/src/screens/chat/ChatResultsCell.tsx
+++ b/src/screens/chat/ChatResultsCell.tsx
@@ -12,7 +12,7 @@ import {defaultUserProfile} from '../../utils/users';
 interface ChatResults {
   profileData: ProfilePreviewType;
   loggedInUser: UserType;
-  setChatModalVisible: Function;
+  setChatModalVisible: (open: boolean) => void;
 }
 
 const ChatResultsCell: React.FC<ChatResults> = ({
@@ -47,7 +47,7 @@ const ChatResultsCell: React.FC<ChatResults> = ({
       setChannel(channel);
       setTimeout(() => {
         navigation.navigate('Chat');
-      }, 100);
+      }, 250);
     } catch (error) {
       Alert.alert(ERROR_FAILED_TO_CREATE_CHANNEL);
     }
diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index d8aff567..3531111b 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -9,14 +9,12 @@ import {
   TextInputSubmitEditingEventData,
   TouchableOpacity,
   View,
-  ViewStyle,
 } from 'react-native';
 import {normalize} from 'react-native-elements';
-import Animated, {useAnimatedStyle} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
-  animationProgress: Animated.SharedValue<number>;
   searching: boolean;
   placeholder: string;
 }
@@ -26,7 +24,6 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
   onChangeText,
   value,
   onCancel,
-  animationProgress,
   onLayout,
   placeholder,
 }) => {
@@ -37,14 +34,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 +50,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 +74,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     backgroundColor: '#F0F0F0',
   },
-  searchIcon: {
-    marginRight: 8,
-  },
   input: {
     flex: 1,
     fontSize: 16,
@@ -97,10 +81,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..9872dd6f 100644
--- a/src/screens/chat/NewChatModal.tsx
+++ b/src/screens/chat/NewChatModal.tsx
@@ -7,7 +7,6 @@ import {
   Text,
   View,
 } from 'react-native';
-import {useSharedValue} from 'react-native-reanimated';
 import {BottomDrawer} from '../../components';
 import {
   SEARCH_ENDPOINT_MESSAGES,
@@ -27,10 +26,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 +35,20 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
     Keyboard.dismiss();
   };
   const handleCancel = () => {
-    setSearching(false);
+    setQuery('');
+    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 && (
@@ -125,7 +119,12 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
       <BottomDrawer
         initialSnapPosition={'90%'}
         isOpen={modalVisible}
-        setIsOpen={setChatModalVisible}
+        setIsOpen={(open) => {
+          if (!open) {
+            setQuery('');
+          }
+          setChatModalVisible(open);
+        }}
         showHeader={false}>
         {_modalContent()}
       </BottomDrawer>