improve search ui & ux

apps/mobile/src/components/Container/ContainerBottomButton.js

@@ -5,11 +5,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {getElevation} from '../../utils';
 import {PressableButton} from '../PressableButton';
-import {pv, SIZE, WEIGHT} from "../../utils/SizeUtils";
-import {DDS} from "../../services/DeviceDetection";
+import {normalize, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {DDS} from '../../services/DeviceDetection';
 
 export const ContainerBottomButton = ({title, onPress, color}) => {
-    const [state,] = useTracked();
+  const [state] = useTracked();
   const {colors} = state;
   const [buttonHide, setButtonHide] = useState(false);
   const insets = useSafeAreaInsets();
@@ -17,12 +17,12 @@ export const ContainerBottomButton = ({title, onPress, color}) => {
   const onKeyboardHide = () => {
     if (DDS.isTab) return;
     setButtonHide(false);
-    }
+  };
 
   const onKeyboardShow = () => {
     if (DDS.isTab) return;
     setButtonHide(true);
-    }
+  };
 
   useEffect(() => {
     Keyboard.addListener('keyboardDidShow', onKeyboardShow);
@@ -64,7 +64,7 @@ export const ContainerBottomButton = ({title, onPress, color}) => {
             width: '100%',
             padding: pv,
             borderRadius: 5,
-                        paddingVertical: pv + 5,
+            height: normalize(60),
           }}>
           <Icon
             name={title === 'Clear all trash' ? 'delete' : 'plus'}

apps/mobile/src/components/Header/HeaderLeftMenu.js

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {useTracked} from '../../provider';
-import {SIZE} from "../../utils/SizeUtils";
-import {DDS} from "../../services/DeviceDetection";
-import {ActionIcon} from "../ActionIcon";
-import NavigationService from "../../services/Navigation";
+import {SIZE} from '../../utils/SizeUtils';
+import {DDS} from '../../services/DeviceDetection';
+import {ActionIcon} from '../ActionIcon';
+import NavigationService from '../../services/Navigation';
+import {eSendEvent} from '../../services/EventManager';
+import {eClearSearch} from '../../utils/Events';
+import {BackHandler} from 'react-native';
 
 export const HeaderLeftMenu = () => {
-    const [state,] = useTracked();
-    const {colors, headerMenuState} = state;
+  const [state] = useTracked();
+  const {colors, headerMenuState, searchResults} = state;
 
   const onLeftButtonPress = () => {
+    if (searchResults.results.length > 0) {
+      eSendEvent(eClearSearch);
+      return;
+    }
     if (headerMenuState) {
       NavigationService.openDrawer();
       return;
@@ -17,6 +24,26 @@ export const HeaderLeftMenu = () => {
     NavigationService.goBack();
   };
 
+  const onBackPress = () => {
+    if (searchResults.results.length > 0) {
+      eSendEvent(eClearSearch);
+      return true;
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    if (searchResults.results.length > 0) {
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+    } else {
+      BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }
+
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    };
+  }, [searchResults.results]);
+
   return (
     <>
       {!DDS.isTab ? (
@@ -32,7 +59,11 @@ export const HeaderLeftMenu = () => {
             marginRight: 25,
           }}
           onPress={onLeftButtonPress}
-                    name={!headerMenuState ? 'arrow-left' : 'menu'}
+          name={
+            !headerMenuState || searchResults.results.length > 0
+              ? 'arrow-left'
+              : 'menu'
+          }
           size={SIZE.xxxl}
           color={colors.pri}
           iconStyle={{

apps/mobile/src/components/SearchInput/index.js

@@ -16,9 +16,10 @@ import {selection} from '../../utils';
 import Animated, {Easing} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {TextInput, Text} from 'react-native';
-import {br, SIZE, WEIGHT} from '../../utils/SizeUtils';
+import {br, normalize, SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {db} from '../../utils/DB';
 import {DDS} from '../../services/DeviceDetection';
+import {ActionIcon} from '../ActionIcon';
 const {Value, timing, block} = Animated;
 
 let searchResult = [];
@@ -54,6 +55,8 @@ const animation = (margin, opacity, border) => {
   }, 200);
 };
 
+let timeout = null;
+
 export const Search = (props) => {
   const [state, dispatch] = useTracked();
   const {colors, searchResults} = state;
@@ -142,6 +145,15 @@ export const Search = (props) => {
           keyword: null,
         },
       });
+    } else {
+      dispatch({
+        type: Actions.SEARCH_RESULTS,
+        results: {
+          results: [],
+          type: null,
+          keyword: null,
+        },
+      });
     }
   };
 
@@ -152,15 +164,22 @@ export const Search = (props) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!text || text.length === 0) {
+      clearSearch();
+    }
+  }, [text]);
+
   const onChangeText = (value) => {
     setText(value);
   };
+
   const onSubmitEditing = async () => {
     if (!text || text.length < 1) {
-      ToastEvent.show('Please enter a search keyword');
       clearSearch();
       return;
     }
+
     let type = searchState.type;
     if (!type) return;
 
@@ -208,25 +227,40 @@ export const Search = (props) => {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          paddingLeft: 12,
           width: '100%',
           alignSelf: 'center',
           borderRadius: br,
-          height: '90%',
+          height: normalize(55),
           backgroundColor: focus
             ? searchState.color
               ? searchState.color
               : colors.shade
             : colors.nav,
         }}>
+        <ActionIcon
+          customStyle={{
+            width: 50,
+            height: 50,
+          }}
+          name="magnify"
+          color={
+            focus
+              ? searchState.color
+                ? searchState.color
+                : colors.accent
+              : colors.icon
+          }
+          size={SIZE.xxl}
+        />
         <TextInput
           ref={inputRef}
           style={{
             fontFamily: WEIGHT.regular,
             color: colors.pri,
-            maxWidth: '85%',
-            width: '85%',
-            fontSize: SIZE.sm,
+            fontSize: SIZE.md,
+            flexGrow: 1,
+            flex: 1,
+            flexWrap: 'wrap',
           }}
           onChangeText={onChangeText}
           onSubmitEditing={onSubmitEditing}
@@ -242,17 +276,13 @@ export const Search = (props) => {
           placeholder={searchState.placeholder}
           placeholderTextColor={colors.icon}
         />
-        <Icon
-          style={{paddingRight: DDS.isTab ? 12 : 12}}
-          onPress={onSubmitEditing}
-          name="magnify"
-          color={
-            focus
-              ? searchState.color
-                ? searchState.color
-                : colors.accent
-              : colors.icon
-          }
+        <ActionIcon
+          customStyle={{
+            width: 50,
+            height: 50,
+          }}
+          name="tune"
+          color={colors.icon}
           size={SIZE.xxl}
         />
       </Animated.View>

apps/mobile/src/components/SimpleList/index.js

@@ -13,7 +13,12 @@ import {DataProvider, LayoutProvider, RecyclerListView} from 'recyclerlistview';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
 import {eSendEvent, ToastEvent} from '../../services/EventManager';
-import {eClearSearch, eOpenJumpToDialog, eOpenLoginDialog, eScrollEvent} from '../../utils/Events';
+import {
+  eClearSearch,
+  eOpenJumpToDialog,
+  eOpenLoginDialog,
+  eScrollEvent,
+} from '../../utils/Events';
 import {PressableButton} from '../PressableButton';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {SIZE, WEIGHT} from '../../utils/SizeUtils';
@@ -35,7 +40,7 @@ const SimpleList = ({
   refreshCallback,
   sortMenuButton,
   scrollRef,
-  jumpToDialog
+  jumpToDialog,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, messageBoardState} = state;
@@ -59,7 +64,7 @@ const SimpleList = ({
 
   useEffect(() => {
     loadData();
-  }, [listData]);
+  }, [listData, searchResults.results]);
 
   const loadData = () => {
     let mainData =
@@ -94,9 +99,9 @@ const SimpleList = ({
           styles.sectionHeader,
           {
             color: colors.accent,
-            height:30,
-            minWidth:60,
-            textAlignVertical:"bottom"
+            height: 30,
+            minWidth: 60,
+            textAlignVertical: 'bottom',
           },
         ]}>
         {item.title}
@@ -367,14 +372,7 @@ const MessageCard = ({data}) => {
 };
 
 const ListHeaderComponent = ({type, data}) => {
-  const [state] = useTracked();
-  const searchResults = {...state.searchResults};
-
-  return searchResults.type === type && searchResults.results.length > 0 ? (
-    <SearchHeader />
-  ) : (
-    <MessageCard type={type} data={data} />
-  );
+  return <MessageCard type={type} data={data} />;
 };
 
 const styles = StyleSheet.create({