Revert "Maintenance: break upload code into smaller modules -- realm syncing functions (#2872)"

This reverts commit 43f9520b86.

src/components/SharedComponents/Buttons/Button.tsx

@@ -2,7 +2,7 @@ import { tailwindFontBold } from "appConstants/fontFamilies.ts";
 import classnames from "classnames";
 import { ActivityIndicator, Heading4, INatIcon } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { AccessibilityRole, GestureResponderEvent, ViewStyle } from "react-native";
 import colors from "styles/tailwindColors";
 
@@ -181,9 +181,7 @@ const Button = ( {
   const [isProcessing, setIsProcessing] = useState( false );
   const onPressRef = useRef( onPress );
 
-  useEffect( ( ) => {
-    onPressRef.current = onPress;
-  }, [onPress] );
+  onPressRef.current = onPress;
 
   const isPrimary = level === "primary";
   const isWarning = level === "warning";
@@ -210,19 +208,16 @@ const Button = ( {
 
   const handlePress = ( event?: GestureResponderEvent ) => {
     if ( !preventMultipleTaps ) {
-      onPressRef.current( event );
-      return;
+      return onPressRef.current( event );
     }
 
-    if ( isProcessing ) return;
-
     setIsProcessing( true );
-
     onPressRef.current( event );
 
     setTimeout( ( ) => {
       setIsProcessing( false );
     }, debounceTime );
+    return null;
   };
 
   const isDisabled = disabled || ( preventMultipleTaps && isProcessing );

src/components/SharedComponents/Map/CurrentLocationButton.tsx

@@ -31,6 +31,7 @@ const CurrentLocationButton = ( {
         style={DROP_SHADOW}
         accessibilityLabel={t( "Zoom-to-current-location" )}
         onPress={onPress}
+        testID="Map.CurrentLocationButton"
       />
       {renderPermissionsGate( )}
     </>

src/components/SharedComponents/Map/Map.tsx

@@ -3,6 +3,7 @@ import classnames from "classnames";
 import { Body1 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React, {
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,
@@ -53,7 +54,7 @@ interface Props {
   children?: React.ReactNode;
   className?: string;
   currentLocationButtonClassName?: string;
-  initialRegion?: boolean;
+  initialRegion?: Region;
   mapHeight?: DimensionValue; // allows for height to be defined as px or percentage
   mapType?: MapType;
   mapViewClassName?: string;
@@ -64,7 +65,7 @@ interface Props {
   onRegionChangeComplete?: ( _r: Region, _b: BoundingBox | undefined ) => void;
   openMapScreen?: () => void;
   region?: Region;
-  regionToAnimate?: Object;
+  regionToAnimate?: Region;
   scrollEnabled?: boolean;
   showCurrentLocationButton?: boolean;
   showsCompass?: boolean;
@@ -82,7 +83,7 @@ interface Props {
 
 // TODO: fallback to another map library
 // for people who don't use GMaps (i.e. users in China)
-const Map = ( {
+const Map = forwardRef( ( {
   children,
   className = "flex-1",
   currentLocationButtonClassName,
@@ -111,7 +112,7 @@ const Map = ( {
   withPressableObsTiles,
   zoomEnabled = true,
   zoomTapEnabled = true
-}: Props ) => {
+}: Props, ref ) => {
   const { isDebug } = useDebugMode( );
   const { screenWidth, screenHeight } = useDeviceOrientation( );
   const [currentZoom, setCurrentZoom] = useState( 0 );
@@ -243,7 +244,9 @@ const Map = ( {
     // If we're supposed to be showing user location but we don't have it, ask
     // for permission again, which should result in fetching the location if
     // we can
-    if ( !userLocation ) {
+    // skipping onCurrentLocationPress here because the handlers
+    // are handling the permissions request outside of this component (example: Explore MapView)
+    if ( !userLocation && onCurrentLocationPress === undefined ) {
       requestPermissions( );
       return;
     }
@@ -413,9 +416,9 @@ const Map = ( {
     : unfuzzedMapRegion;
 
   // In Android, we maintain initialRegion as state localRegion and
-  // pass null to parameter initialRegion.
+  // pass undefined to parameter initialRegion.
   const mapInitialRegion = Platform.OS === "android"
-    ? null
+    ? undefined
     : initialRegion;
 
   const renderDebugZoomLevel = ( ) => {
@@ -448,6 +451,18 @@ const Map = ( {
   const longitude = observation?.privateLongitude || observation?.longitude;
   const hasCoordinates = latitude && longitude;
 
+  const setRefs = instance => {
+    // Update our internal ref
+    mapViewRef.current = instance;
+
+    // Forward to the parent ref
+    if ( typeof ref === "function" ) {
+      ref( instance );
+    } else if ( ref ) {
+      ref.current = instance;
+    }
+  };
+
   return (
     <View
       style={mapContainerStyle}
@@ -469,7 +484,7 @@ const Map = ( {
         onRegionChangeComplete={handleRegionChangeComplete}
         onUserLocationChange={handleUserLocationChange}
         pitchEnabled={false}
-        ref={mapViewRef}
+        ref={setRefs}
         region={mapRegion}
         rotateEnabled={false}
         scrollEnabled={scrollEnabled}
@@ -529,6 +544,6 @@ const Map = ( {
       {children}
     </View>
   );
-};
+} );
 
 export default Map;

src/components/SharedComponents/SearchBar.tsx

@@ -2,7 +2,7 @@ import { fontRegular } from "appConstants/fontFamilies.ts";
 import classNames from "classnames";
 import { INatIcon, INatIconButton } from "components/SharedComponents";
 import { View } from "components/styledComponents";
-import React from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { Keyboard, TextInput as RNTextInput } from "react-native";
 import { TextInput, useTheme } from "react-native-paper";
 import { useTranslation } from "sharedHooks";
@@ -21,6 +21,7 @@ interface Props {
   placeholder?: string;
   testID?: string;
   value: string;
+  debounceTime?: number;
 }
 
 // Ensure this component is placed outside of scroll views
@@ -34,10 +35,26 @@ const SearchBar = ( {
   input,
   placeholder,
   testID,
-  value
+  value,
+  debounceTime = 300
 }: Props ) => {
   const theme = useTheme( );
   const { t } = useTranslation( );
+  const [localValue, setLocalValue] = useState( value );
+
+  const debounceTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+  const debouncedHandleTextChange = useCallback( ( text: string ) => {
+    setLocalValue( text );
+
+    if ( debounceTimeout.current ) {
+      clearTimeout( debounceTimeout.current );
+    }
+
+    debounceTimeout.current = setTimeout( ( ) => {
+      handleTextChange( text );
+    }, debounceTime );
+  }, [handleTextChange, debounceTime] );
 
   const outlineStyle = {
     borderColor: "lightgray",
@@ -76,7 +93,7 @@ const SearchBar = ( {
         dense
         keyboardType="default"
         mode="outlined"
-        onChangeText={handleTextChange}
+        onChangeText={debouncedHandleTextChange}
         outlineStyle={outlineStyle}
         placeholder={placeholder}
         selectionColor={colors.darkGray}
@@ -84,9 +101,9 @@ const SearchBar = ( {
         testID={testID}
         theme={fontTheme}
         underlineColor={colors.darkGray}
-        value={value}
+        value={localValue}
       />
-      {value?.length > 0 && clearSearch
+      {localValue?.length > 0 && clearSearch
         ? (
           <View className="absolute right-0">
             <INatIconButton
@@ -96,6 +113,7 @@ const SearchBar = ( {
               onPress={() => {
                 Keyboard.dismiss();
                 clearSearch();
+                setLocalValue( "" );
               }}
             />
           </View>