From 72e8ebc156c2f682a7c1a2a9d5161b7aeff76212 Mon Sep 17 00:00:00 2001
From: Ruxandra Machedon <ruxandra@techmatters.org>
Date: Mon, 16 Dec 2024 10:44:12 -0500
Subject: [PATCH] refactor: give better names to search box components that get
 shown/hidden

---
 .../components/search/MapSearch.tsx            | 18 +++++++++++-------
 ...ineBox.tsx => MapSearchOfflineAlertBox.tsx} |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)
 rename dev-client/src/screens/SitesScreen/components/search/{MapSearchOfflineBox.tsx => MapSearchOfflineAlertBox.tsx} (96%)

diff --git a/dev-client/src/screens/SitesScreen/components/search/MapSearch.tsx b/dev-client/src/screens/SitesScreen/components/search/MapSearch.tsx
index 144b4a097..d59db92dc 100644
--- a/dev-client/src/screens/SitesScreen/components/search/MapSearch.tsx
+++ b/dev-client/src/screens/SitesScreen/components/search/MapSearch.tsx
@@ -37,7 +37,7 @@ import {useSitesScreenContext} from 'terraso-mobile-client/context/SitesScreenCo
 import {useUpdatedForegroundPermissions} from 'terraso-mobile-client/hooks/appPermissionsHooks';
 import {useIsOffline} from 'terraso-mobile-client/hooks/connectivityHooks';
 import {useMapSuggestions} from 'terraso-mobile-client/hooks/useMapSuggestions';
-import {MapSearchOfflineBox} from 'terraso-mobile-client/screens/SitesScreen/components/search/MapSearchOfflineBox';
+import {MapSearchOfflineAlertBox} from 'terraso-mobile-client/screens/SitesScreen/components/search/MapSearchOfflineAlertBox';
 import {MapSearchSuggestionBox} from 'terraso-mobile-client/screens/SitesScreen/components/search/MapSearchSuggestionBox';
 
 type Props = {
@@ -52,7 +52,7 @@ export const MapSearch = ({zoomTo, zoomToUser, toggleMapLayer}: Props) => {
   const [query, setQuery] = useState('');
   const {coords, suggestions, querySuggestions, lookupFeature} =
     useMapSuggestions();
-  const [hideResults, setHideResults] = useState(false);
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
   const sitesScreen = useSitesScreenContext();
 
   useEffect(() => {
@@ -70,7 +70,7 @@ export const MapSearch = ({zoomTo, zoomToUser, toggleMapLayer}: Props) => {
   const selectQuery = useCallback(
     (name: string, mapboxId: string) => {
       setQuery(name);
-      setHideResults(true);
+      setShowAutocomplete(false);
       lookupFeature(mapboxId);
       Keyboard.dismiss();
     },
@@ -92,7 +92,7 @@ export const MapSearch = ({zoomTo, zoomToUser, toggleMapLayer}: Props) => {
         <View flex={1} pointerEvents="box-none">
           <Autocomplete
             data={suggestions}
-            hideResults={hideResults || isOffline}
+            hideResults={!showAutocomplete || isOffline}
             flatListProps={{
               keyboardShouldPersistTaps: 'always',
               keyExtractor: suggestion => suggestion.mapbox_id,
@@ -114,11 +114,11 @@ export const MapSearch = ({zoomTo, zoomToUser, toggleMapLayer}: Props) => {
                     querySuggestions(newText);
                   }}
                   onFocus={() => {
-                    setHideResults(false);
+                    setShowAutocomplete(true);
                     querySuggestions(query);
                   }}
                   onEndEditing={() => {
-                    setHideResults(true);
+                    setShowAutocomplete(false);
                   }}
                   value={query}
                   placeholder={t('search.placeholder')}
@@ -128,7 +128,11 @@ export const MapSearch = ({zoomTo, zoomToUser, toggleMapLayer}: Props) => {
                   }}
                   inputStyle={searchBarStyles.input}
                 />
-                {isOffline && !hideResults ? <MapSearchOfflineBox /> : <></>}
+                {isOffline && showAutocomplete ? (
+                  <MapSearchOfflineAlertBox />
+                ) : (
+                  <></>
+                )}
               </>
             )}
           />
diff --git a/dev-client/src/screens/SitesScreen/components/search/MapSearchOfflineBox.tsx b/dev-client/src/screens/SitesScreen/components/search/MapSearchOfflineAlertBox.tsx
similarity index 96%
rename from dev-client/src/screens/SitesScreen/components/search/MapSearchOfflineBox.tsx
rename to dev-client/src/screens/SitesScreen/components/search/MapSearchOfflineAlertBox.tsx
index 105542ade..a7f204606 100644
--- a/dev-client/src/screens/SitesScreen/components/search/MapSearchOfflineBox.tsx
+++ b/dev-client/src/screens/SitesScreen/components/search/MapSearchOfflineAlertBox.tsx
@@ -21,7 +21,7 @@ import {DisableableText} from 'terraso-mobile-client/components/content/typograp
 import {TranslatedContent} from 'terraso-mobile-client/components/content/typography/TranslatedContent';
 import {convertColorProp} from 'terraso-mobile-client/components/util/nativeBaseAdapters';
 
-export const MapSearchOfflineBox = () => {
+export const MapSearchOfflineAlertBox = () => {
   return (
     <View style={styles.container}>
       <DisableableText disabled={true}>