Merge pull request #3823 from inaturalist/mob-1567-make-exploresearchheader-shared

Mob 1567 make exploresearchheader shared

src/components/Explore/ExploreV2/screens/UniversalSearch.tsx

@@ -17,9 +17,9 @@ import type { UniversalSearchResultItem }
   from "components/Explore/ExploreV2/hooks/useUniversalSearch";
 import useUniversalSearch from "components/Explore/ExploreV2/hooks/useUniversalSearch";
 import EmptySearchResults from "components/Explore/SearchScreens/EmptySearchResults";
-import ExploreSearchHeader from "components/Explore/SearchScreens/ExploreSearchHeader";
 import ContainedSquareButton from "components/SharedComponents/Buttons/ContainedSquareButton";
 import INatIcon from "components/SharedComponents/INatIcon";
+import SearchHeader from "components/SharedComponents/SearchHeader";
 import Body3 from "components/SharedComponents/Typography/Body3";
 import ViewWrapper from "components/SharedComponents/ViewWrapper";
 import {
@@ -210,10 +210,10 @@ const UniversalSearch = ( ) => {
   return (
     <ViewWrapper testID="UniversalSearch">
       <View className="bg-white" style={DROP_SHADOW}>
-        <ExploreSearchHeader
+        <SearchHeader
           headerText={t( "SEARCH" )}
-          closeModal={navigation.goBack}
-          resetFilters={handleReset}
+          onClose={navigation.goBack}
+          onReset={handleReset}
           testID="UniversalSearch.back"
         />
         <View className="px-4 pb-4">

src/components/Explore/SearchScreens/ExploreLocationSearch.tsx

@@ -5,6 +5,7 @@ import {
   ButtonBar,
   List2,
   SearchBar,
+  SearchHeader,
   ViewWrapper,
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
@@ -24,7 +25,6 @@ import type { RenderLocationPermissionsGateFunction } from "sharedHooks/useLocat
 import { getShadow } from "styles/global";
 
 import EmptySearchResults from "./EmptySearchResults";
-import ExploreSearchHeader from "./ExploreSearchHeader";
 
 const DROP_SHADOW = getShadow( {
   offsetHeight: 4,
@@ -152,10 +152,10 @@ const ExploreLocationSearch = ( {
 
   return (
     <ViewWrapper testID="explore-location-search">
-      <ExploreSearchHeader
-        closeModal={closeModal}
+      <SearchHeader
+        onClose={closeModal}
         headerText={t( "SEARCH-LOCATION" )}
-        resetFilters={resetPlace}
+        onReset={resetPlace}
         testID="ExploreLocationSearch.close"
       />
       <View

src/components/Explore/SearchScreens/ExploreProjectSearch.tsx

@@ -4,6 +4,7 @@ import type { ApiProjectSummary } from "api/types";
 import ProjectList from "components/ProjectList/ProjectList";
 import {
   SearchBar,
+  SearchHeader,
   ViewWrapper,
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
@@ -15,7 +16,6 @@ import { useInfiniteScroll, useTranslation } from "sharedHooks";
 import { getShadow } from "styles/global";
 
 import EmptySearchResults from "./EmptySearchResults";
-import ExploreSearchHeader from "./ExploreSearchHeader";
 
 const DROP_SHADOW = getShadow( {
   offsetHeight: 4,
@@ -71,10 +71,10 @@ const ExploreProjectSearch = ( { closeModal, updateProject }: Props ) => {
 
   return (
     <ViewWrapper>
-      <ExploreSearchHeader
-        closeModal={closeModal}
+      <SearchHeader
+        onClose={closeModal}
         headerText={t( "SEARCH-PROJECTS" )}
-        resetFilters={resetProject}
+        onReset={resetProject}
         testID="ExploreProjectSearch.close"
       />
       <View

src/components/Explore/SearchScreens/ExploreTaxonSearch.js

@@ -1,6 +1,7 @@
 // @flow
 
 import {
+  SearchHeader,
   TaxonResult,
   TaxonSearch,
   ViewWrapper,
@@ -13,8 +14,6 @@ import React, {
 import { useTranslation } from "sharedHooks";
 import useTaxonSearch from "sharedHooks/useTaxonSearch";
 
-import ExploreSearchHeader from "./ExploreSearchHeader";
-
 type Props = {
   closeModal: Function,
   onPressInfo?: Function,
@@ -65,10 +64,10 @@ const ExploreTaxonSearch = ( {
 
   return (
     <ViewWrapper>
-      <ExploreSearchHeader
-        closeModal={closeModal}
+      <SearchHeader
+        onClose={closeModal}
         headerText={t( "SEARCH-TAXA" )}
-        resetFilters={resetTaxon}
+        onReset={resetTaxon}
         testID="ExploreTaxonSearch.close"
       />
       <TaxonSearch

src/components/Explore/SearchScreens/ExploreUserSearch.js

@@ -3,6 +3,7 @@
 import {
   ButtonBar,
   SearchBar,
+  SearchHeader,
   ViewWrapper,
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
@@ -20,7 +21,6 @@ import {
 import { getShadow } from "styles/global";
 
 import EmptySearchResults from "./EmptySearchResults";
-import ExploreSearchHeader from "./ExploreSearchHeader";
 
 const DROP_SHADOW = getShadow( {
   offsetHeight: 4,
@@ -101,10 +101,10 @@ const ExploreUserSearch = ( { closeModal, updateUser }: Props ): Node => {
 
   return (
     <ViewWrapper>
-      <ExploreSearchHeader
-        closeModal={closeModal}
+      <SearchHeader
+        onClose={closeModal}
         headerText={t( "SEARCH-USERS" )}
-        resetFilters={resetUser}
+        onReset={resetUser}
         testID="ExploreUserSearch.close"
       />
       <View

src/components/MyObservations/Search/SearchMyObservationsTaxon.tsx

@@ -1,10 +1,7 @@
 import { useNavigation } from "@react-navigation/native";
 import type { ApiTaxon } from "api/types";
-// TODO: ExploreSearchHeader is a generic back/title/reset button header that previously
-// was only used in explore. It should be promoted to components/SharedComponents now that it's
-// shared. The cross-feature import below works for now but will be fixed in a follow-up.
-import ExploreSearchHeader from "components/Explore/SearchScreens/ExploreSearchHeader";
 import {
+  SearchHeader,
   TaxonResult,
   TaxonSearch,
   ViewWrapper,
@@ -86,10 +83,10 @@ const SearchMyObservationsTaxon = ( ) => {
 
   return (
     <ViewWrapper>
-      <ExploreSearchHeader
-        closeModal={closeScreen}
+      <SearchHeader
+        onClose={closeScreen}
         headerText={t( "SEARCH" )}
-        resetFilters={resetSearch}
+        onReset={resetSearch}
         resetDisabled={!searchedTaxon}
         testID="SearchMyObservationsTaxon.close"
       />

src/components/SharedComponents/SearchHeader.tsx

@@ -9,17 +9,17 @@ import React from "react";
 import { useTranslation } from "sharedHooks";
 
 interface Props {
-  closeModal: ( ) => void;
+  onClose: ( ) => void;
   headerText: string;
-  resetFilters: ( ) => void;
+  onReset: ( ) => void;
   resetDisabled?: boolean;
   testID: string;
 }
 
-const ExploreSearchHeader = ( {
-  closeModal,
+const SearchHeader = ( {
+  onClose,
   headerText,
-  resetFilters,
+  onReset,
   resetDisabled = false,
   testID,
 }: Props ) => {
@@ -30,7 +30,7 @@ const ExploreSearchHeader = ( {
       <View className="w-[50px]">
         <BackButton
           testID={testID}
-          onPress={closeModal}
+          onPress={onClose}
           accessibilityLabel={headerText}
         />
       </View>
@@ -40,7 +40,7 @@ const ExploreSearchHeader = ( {
           "w-[50px] items-end",
           { "opacity-50": resetDisabled },
         )}
-        onPress={resetFilters}
+        onPress={onReset}
         disabled={resetDisabled}
         accessibilityRole="button"
         accessibilityLabel={t( "Reset-verb" )}
@@ -54,4 +54,4 @@ const ExploreSearchHeader = ( {
   );
 };
 
-export default ExploreSearchHeader;
+export default SearchHeader;

src/components/SharedComponents/index.ts

@@ -56,6 +56,7 @@ export { default as RadioButtonRow } from "./RadioButtonRow";
 export { default as ScrollableWithStickyHeader } from "./ScrollableWithStickyHeader";
 export { default as ScrollViewWrapper } from "./ScrollViewWrapper";
 export { default as SearchBar } from "./SearchBar";
+export { default as SearchHeader } from "./SearchHeader";
 export { default as BottomSheet } from "./Sheets/BottomSheet";
 export { default as BottomSheetStandardBackdrop } from "./Sheets/BottomSheetStandardBackdrop";
 export { default as BottomSheetV2 } from "./Sheets/BottomSheetV2";