Merge pull request #457 from openforis/surveys-screen-search

Surveys screen search

package.json

@@ -26,6 +26,7 @@
     "deprecated-react-native-prop-types": "^4.0.0",
     "i18next": "^22.4.11",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "re-reselect": "^4.0.1",

src/arena-mobile-ui/components/Input/index.js

@@ -52,6 +52,7 @@ const Input = ({
   customStyle,
   lateFocus,
   editable,
+  clear,
   ...props
 }) => {
   const styles = useThemedStyles(_styles);
@@ -63,6 +64,7 @@ const Input = ({
       }, 300);
     }
   }, [lateFocus]);
+
   const textInputStyle = useMemo(() => {
     return StyleSheet.compose(
       StyleSheet.compose(
@@ -73,6 +75,12 @@ const Input = ({
     );
   }, [editable, styles, customStyle]);
 
+  useEffect(() => {
+    if (clear) {
+      inputRef?.current?.clear?.();
+    }
+  }, [clear]);
+
   return (
     <InputContainer
       title={title}

src/form/Attributes/common/SearchableForm/SearchBar/index.js

@@ -1,34 +1,54 @@
-import React from 'react';
-import {View} from 'react-native';
+import throttle from 'lodash.throttle';
+import moment from 'moment/moment';
+import React, {useCallback, useState} from 'react';
+import {Keyboard, View} from 'react-native';
 
 import Input from 'arena-mobile-ui/components/Input';
 import {TouchableIcon} from 'arena-mobile-ui/components/TouchableIcons';
 
 import styles from './styles';
 
-const SearchBar = ({handleStopToSearch, setSearchText}) => {
+const SearchBar = ({handleStopToSearch, setSearchText, autoFocus}) => {
+  const [clear, setClear] = useState(false);
+
+  const _handleStopToSearch = useCallback(() => {
+    setClear(moment().format('x'));
+    setSearchText('');
+    Keyboard.dismiss();
+    handleStopToSearch?.();
+  }, [handleStopToSearch, setSearchText]);
+
+  const deboundedSearch = useCallback(
+    text => throttle(setSearchText, 500)(text),
+    [setSearchText],
+  );
   return (
     <View style={styles.selectBarContainer}>
       <View style={styles.selectContainer}>
         <Input
-          onChangeText={setSearchText}
+          onChangeText={deboundedSearch}
           defaultValue={String('')}
-          autoFocus={true}
+          autoFocus={autoFocus}
           horizontal={true}
           stacked={false}
           customStyle={styles.searchBox}
           hasTitle={false}
           onBlur={handleStopToSearch}
           returnKeyType="done"
+          clear={clear}
         />
       </View>
       <TouchableIcon
         iconName={'close'}
-        onPress={handleStopToSearch}
+        onPress={_handleStopToSearch}
         customStyle={styles.close}
       />
     </View>
   );
 };
 
+SearchBar.defaultValue = {
+  autoFocus: true,
+};
+
 export default SearchBar;

src/screens/Surveys/components/SurveysList/component.js

@@ -2,6 +2,7 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {useSelector} from 'react-redux';
 
 import Loading from 'arena-mobile-ui/components/List/Loading';
+import SearchBar from 'form/Attributes/common/SearchableForm/SearchBar';
 import {
   hooks as surveysHooks,
   selectors as surveysSelectors,
@@ -45,6 +46,7 @@ const SurveysList = ({
   const localSurveys = useSelector(surveysSelectors.getSurveysAsList);
 
   const [sortCriteriaIndex, setSortCriteriaIndex] = useState(0);
+  const [searchText, setSearchText] = useState('');
   const sortCriteria = useMemo(
     () => SORTERS[sortCriteriaIndex],
     [sortCriteriaIndex],
@@ -75,12 +77,14 @@ const SurveysList = ({
         localSurveys,
         surveys,
         sortCriteria,
+        searchText,
       }),
-    [surveysOrigin, localSurveys, surveys, sortCriteria],
+    [surveysOrigin, localSurveys, surveys, sortCriteria, searchText],
   );
 
   return (
     <>
+      <SearchBar setSearchText={setSearchText} autoFocus={false} />
       <List
         data={_surveys}
         surveysOrigin={surveysOrigin}

src/screens/Surveys/components/SurveysList/utils.js

@@ -22,6 +22,7 @@ export const prepareSurveys = ({
   localSurveys,
   surveys,
   sortCriteria,
+  searchText,
 }) => {
   let __surveys = [...localSurveys];
   const localSurveysByUuids = localSurveys.reduce((acc, survey) => {
@@ -67,6 +68,22 @@ export const prepareSurveys = ({
 
   const sortFunction = SORT_FUNCTIONS_BY_TYPE[sortCriteria?.type] || false;
 
+  if (searchText) {
+    __surveys = __surveys.filter(survey => {
+      const surveyName = survey.props.name?.toLowerCase() || '';
+      const survyeLabel = (
+        survey.props.labels?.[survey.props.languages?.[0]] || ''
+      ).toLowerCase();
+
+      const searchTextLower = searchText?.toLowerCase();
+
+      return (
+        surveyName.includes(searchTextLower) ||
+        survyeLabel.includes(searchTextLower)
+      );
+    });
+  }
+
   if (Objects.isEmpty(sortCriteria) || sortFunction === false) {
     return __surveys;
   }

src/screens/Surveys/components/common/SurveyCard/component.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {useTranslation} from 'react-i18next';
-import {View} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import {useSelector} from 'react-redux';
 
 import CreatedAndModified from 'arena-mobile-ui/components/CreatedAndModified';
@@ -26,9 +26,15 @@ const SurveyCard = ({
   const currentServerUrl = useSelector(appSelectors.getServerUrl);
   const styles = useThemedStyles(_styles);
 
+  const containerStyle = useMemo(() => {
+    return StyleSheet.compose(
+      styles.container,
+      isLocalSurvey ? styles.selected : {},
+    );
+  }, [styles, isLocalSurvey]);
+
   return (
-    <TouchableCard
-      customStyles={[styles.container, isLocalSurvey ? styles.selected : {}]}>
+    <TouchableCard customStyles={containerStyle}>
       <View style={styles.infoContainer}>
         <View style={styles.payload}>
           <View style={styles.labelCotainer}>
@@ -53,7 +59,7 @@ const SurveyCard = ({
           )}
         </View>
         <View style={styles.moreInfo}>
-          <View style={{alignItems: 'flex-end'}}>
+          <View style={styles.activeSurveyContainer}>
             {isLocalSurvey ? (
               <CurrentItemLabel label={t('Surveys:active_survey')} />
             ) : (

src/screens/Surveys/components/common/SurveyCard/styles.js

@@ -23,6 +23,9 @@ const styles = ({baseStyles}) =>
     payload: {
       flex: 1,
     },
+    activeSurveyContainer: {
+      alignItems: 'flex-end',
+    },
   });
 
 export default styles;

yarn.lock

@@ -9915,7 +9915,7 @@ lodash.sortby@^4.7.0:
 lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
 
 lodash.topairs@^4.3.0:
   version "4.3.0"