(BSR): remove duplicated code

src/features/location/components/HomeLocationModal.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { LocationModal } from 'features/location/components/LocationModal'
-import { LOCATION_PLACEHOLDER } from 'features/location/constants'
 import { useLocationMode } from 'features/location/helpers/useLocationMode'
 import { useLocationState } from 'features/location/helpers/useLocationState'
 import { analytics } from 'libs/analytics'
@@ -46,7 +45,7 @@ export const HomeLocationModal = ({ visible, dismissModal }: HomeLocationModalPr
     onSubmit,
     onClose,
     shouldDirectlyValidate: true,
-    setPlaceGlobally,
+    ...locationStateProps,
   })
 
   return (
@@ -66,6 +65,7 @@ export const HomeLocationModal = ({ visible, dismissModal }: HomeLocationModalPr
       onResetPlace={onResetPlace}
       shouldShowRadiusSlider={false}
       isSubmitDisabled={!selectedPlace}
+      shouldDisplayEverywhereSection
     />
   )
 }

src/features/location/components/LocationModal.tsx

@@ -5,7 +5,6 @@ import { LocationModalButton } from 'features/location/components/LocationModalB
 import { LocationModalFooter } from 'features/location/components/LocationModalFooter'
 import { LOCATION_PLACEHOLDER } from 'features/location/constants'
 import { LocationState } from 'features/location/types'
-import { Action } from 'features/search/context/reducer'
 import { LocationLabel, LocationMode } from 'libs/location/types'
 import { SuggestedPlace } from 'libs/place/types'
 import { LocationSearchFilters } from 'shared/location/LocationSearchFilters'
@@ -20,6 +19,30 @@ import { PositionFilled } from 'ui/svg/icons/PositionFilled'
 import { WorldPosition } from 'ui/svg/icons/WorldPosition'
 import { getSpacing } from 'ui/theme'
 
+type LocationModalProps = {
+  visible: boolean
+  onSubmit: () => void
+  onClose: () => void
+  onModalHideRef: LocationState['onModalHideRef']
+  selectLocationMode: (mode: LocationMode) => () => void
+  tempLocationMode: LocationState['tempLocationMode']
+  hasGeolocPosition: LocationState['hasGeolocPosition']
+  selectedPlace: LocationState['selectedPlace']
+  setSelectedPlace: LocationState['setSelectedPlace']
+  placeQuery: LocationState['placeQuery']
+  setPlaceQuery: LocationState['setPlaceQuery']
+  onSetSelectedPlace: (place: SuggestedPlace) => void
+  onResetPlace: LocationState['onResetPlace']
+  shouldDisplayEverywhereSection: boolean
+  isSubmitDisabled: boolean
+  shouldShowRadiusSlider: boolean
+  buttonWording?: string
+  tempAroundMeRadius?: LocationState['tempAroundMeRadius']
+  onTempAroundMeRadiusValueChange?: (newValues: number[]) => void
+  tempAroundPlaceRadius?: LocationState['tempAroundPlaceRadius']
+  onTempAroundPlaceRadiusValueChange?: (newValues: number[]) => void
+}
+
 export const LocationModal = ({
   visible,
   onSubmit,
@@ -39,29 +62,10 @@ export const LocationModal = ({
   tempAroundPlaceRadius,
   onTempAroundPlaceRadiusValueChange,
   shouldShowRadiusSlider,
+  buttonWording,
   isSubmitDisabled,
-}: {
-  visible: boolean
-  onSubmit: () => void
-  onClose: () => void
-  onModalHideRef: LocationState['onModalHideRef']
-  selectLocationMode: (mode: LocationMode) => () => void
-  tempLocationMode: LocationState['tempLocationMode']
-  hasGeolocPosition: LocationState['hasGeolocPosition']
-  selectedPlace: LocationState['selectedPlace']
-  setSelectedPlace: LocationState['setSelectedPlace']
-  placeQuery: LocationState['placeQuery']
-  setPlaceQuery: LocationState['setPlaceQuery']
-  onSetSelectedPlace: (place: SuggestedPlace) => void
-  onResetPlace: LocationState['onResetPlace']
-  isSubmitDisabled: boolean
-  shouldShowRadiusSlider: boolean
-  tempAroundMeRadius?: LocationState['tempAroundMeRadius']
-  onTempAroundMeRadiusValueChange?: (newValues: number[]) => void
-  tempAroundPlaceRadius?: LocationState['tempAroundPlaceRadius']
-  onTempAroundPlaceRadiusValueChange?: (newValues: number[]) => void
-  dispatch?: React.Dispatch<Action>
-}) => {
+  shouldDisplayEverywhereSection,
+}: LocationModalProps) => {
   const isCurrentLocationMode = (target: LocationMode) => tempLocationMode === target
 
   const theme = useTheme()
@@ -110,7 +114,11 @@ export const LocationModal = ({
         </HeaderContainer>
       }
       fixedModalBottom={
-        <LocationModalFooter onSubmit={() => onSubmit()} isSubmitDisabled={isSubmitDisabled} />
+        <LocationModalFooter
+          onSubmit={() => onSubmit()}
+          isSubmitDisabled={isSubmitDisabled}
+          buttonWording={buttonWording}
+        />
       }>
       <StyledScrollView>
         <Spacer.Column numberOfSpaces={6} />
@@ -161,15 +169,19 @@ export const LocationModal = ({
             ) : null}
           </React.Fragment>
         ) : null}
-        <Spacer.Column numberOfSpaces={6} />
-        <Separator.Horizontal />
-        <Spacer.Column numberOfSpaces={6} />
-        <LocationModalButton
-          onPress={selectLocationMode(LocationMode.EVERYWHERE)}
-          icon={WorldPosition}
-          color={everywhereLocationModeColor}
-          title={LocationLabel.everywhereLabel}
-        />
+        {shouldDisplayEverywhereSection ? (
+          <React.Fragment>
+            <Spacer.Column numberOfSpaces={6} />
+            <Separator.Horizontal />
+            <Spacer.Column numberOfSpaces={6} />
+            <LocationModalButton
+              onPress={selectLocationMode(LocationMode.EVERYWHERE)}
+              icon={WorldPosition}
+              color={everywhereLocationModeColor}
+              title={LocationLabel.everywhereLabel}
+            />
+          </React.Fragment>
+        ) : null}
       </StyledScrollView>
     </AppModal>
   )

src/features/location/components/SearchLocationModal.tsx

@@ -57,7 +57,6 @@ export const SearchLocationModal = ({ visible, dismissModal }: LocationModalProp
   return (
     <LocationModal
       visible={visible}
-      dispatch={dispatch}
       onSubmit={onSubmit}
       hasGeolocPosition={hasGeolocPosition}
       tempLocationMode={tempLocationMode}
@@ -76,6 +75,7 @@ export const SearchLocationModal = ({ visible, dismissModal }: LocationModalProp
       onTempAroundPlaceRadiusValueChange={onTempAroundPlaceRadiusValueChange}
       tempAroundMeRadius={tempAroundMeRadius}
       isSubmitDisabled={!selectedPlace && tempLocationMode !== LocationMode.AROUND_ME}
+      shouldDisplayEverywhereSection
     />
   )
 }

src/features/location/components/VenueMapLocationModal.tsx

@@ -1,10 +1,7 @@
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import styled, { useTheme } from 'styled-components/native'
 
-import { LocationModalButton } from 'features/location/components/LocationModalButton'
-import { LocationModalFooter } from 'features/location/components/LocationModalFooter'
-import { LOCATION_PLACEHOLDER } from 'features/location/constants'
+import { LocationModal } from 'features/location/components/LocationModal'
 import { useLocationMode } from 'features/location/helpers/useLocationMode'
 import { useLocationState } from 'features/location/helpers/useLocationState'
 import { useLocationSubmit } from 'features/location/helpers/useLocationSubmit'
@@ -15,16 +12,6 @@ import { useInitialVenuesActions } from 'features/venueMap/store/initialVenuesSt
 import { useSelectedVenueActions } from 'features/venueMap/store/selectedVenueStore'
 import { analytics } from 'libs/analytics'
 import { LocationMode } from 'libs/location/types'
-import { LocationSearchFilters } from 'shared/location/LocationSearchFilters'
-import { LocationSearchInput } from 'shared/location/LocationSearchInput'
-import { AppModal } from 'ui/components/modals/AppModal'
-import { ModalHeader } from 'ui/components/modals/ModalHeader'
-import { Separator } from 'ui/components/Separator'
-import { Spacer } from 'ui/components/spacer/Spacer'
-import { Close } from 'ui/svg/icons/Close'
-import { MagnifyingGlassFilled } from 'ui/svg/icons/MagnifyingGlassFilled'
-import { PositionFilled } from 'ui/svg/icons/PositionFilled'
-import { getSpacing } from 'ui/theme'
 
 interface LocationModalProps {
   visible: boolean
@@ -57,17 +44,22 @@ export const VenueMapLocationModal = ({
     tempAroundPlaceRadius,
     tempAroundMeRadius,
   } = locationStateProps
+
   const locationSubmitProps = useLocationSubmit({
     dismissModal,
     from: 'venueMap',
     ...locationStateProps,
   })
   const { onSubmit, onClose } = locationSubmitProps
-  const { onTempAroundRadiusPlaceValueChange, onTempAroundMeRadiusValueChange } = useRadiusChange({
+
+  const {
+    onTempAroundRadiusPlaceValueChange: onTempAroundPlaceRadiusValueChange,
+    onTempAroundMeRadiusValueChange,
+  } = useRadiusChange({
     visible,
     ...locationStateProps,
   })
-  const { onPlaceSelection } = usePlaceSelection({
+  const { onPlaceSelection: onSetSelectedPlace } = usePlaceSelection({
     ...locationStateProps,
   })
   const { selectLocationMode } = useLocationMode({
@@ -76,18 +68,9 @@ export const VenueMapLocationModal = ({
     ...locationStateProps,
     ...locationSubmitProps,
   })
+
   const { removeSelectedVenue } = useSelectedVenueActions()
   const { setInitialVenues } = useInitialVenuesActions()
-  const isCurrentLocationMode = (target: LocationMode) => tempLocationMode === target
-  const theme = useTheme()
-
-  const geolocationModeColor = isCurrentLocationMode(LocationMode.AROUND_ME)
-    ? theme.colors.primary
-    : theme.colors.black
-
-  const customLocationModeColor = isCurrentLocationMode(LocationMode.AROUND_PLACE)
-    ? theme.colors.primary
-    : theme.colors.black
 
   useEffect(() => {
     setInitialVenues([])
@@ -104,88 +87,28 @@ export const VenueMapLocationModal = ({
   }
 
   return (
-    <AppModal
+    <LocationModal
       visible={visible}
-      title=""
-      noPadding
-      isUpToStatusBar
-      scrollEnabled={false}
-      onModalHide={onModalHideRef.current}
-      keyboardShouldPersistTaps="handled"
-      customModalHeader={
-        <HeaderContainer>
-          <ModalHeader
-            title="Localisation"
-            rightIconAccessibilityLabel="Fermer la modale"
-            rightIcon={Close}
-            onRightIconPress={onClose}
-          />
-        </HeaderContainer>
-      }
-      fixedModalBottom={
-        <LocationModalFooter
-          onSubmit={handleSubmit}
-          isSubmitDisabled={!selectedPlace && tempLocationMode !== LocationMode.AROUND_ME}
-          buttonWording="Valider et voir sur la carte"
-        />
-      }>
-      <StyledScrollView>
-        <Spacer.Column numberOfSpaces={6} />
-        <LocationModalButton
-          onPress={selectLocationMode(LocationMode.AROUND_ME)}
-          icon={PositionFilled}
-          color={geolocationModeColor}
-          title="Utiliser ma position actuelle"
-          subtitle={hasGeolocPosition ? undefined : 'Géolocalisation désactivée'}
-        />
-        {isCurrentLocationMode(LocationMode.AROUND_ME) ? (
-          <React.Fragment>
-            <Spacer.Column numberOfSpaces={4} />
-            <LocationSearchFilters
-              aroundRadius={tempAroundMeRadius}
-              onValuesChange={onTempAroundMeRadiusValueChange}
-            />
-          </React.Fragment>
-        ) : null}
-        <Spacer.Column numberOfSpaces={6} />
-        <Separator.Horizontal />
-        <Spacer.Column numberOfSpaces={6} />
-        <LocationModalButton
-          onPress={selectLocationMode(LocationMode.AROUND_PLACE)}
-          icon={MagnifyingGlassFilled}
-          color={customLocationModeColor}
-          title="Choisir une localisation"
-          subtitle={LOCATION_PLACEHOLDER}
-        />
-        {isCurrentLocationMode(LocationMode.AROUND_PLACE) ? (
-          <React.Fragment>
-            <LocationSearchInput
-              selectedPlace={selectedPlace}
-              setSelectedPlace={setSelectedPlace}
-              placeQuery={placeQuery}
-              setPlaceQuery={setPlaceQuery}
-              onResetPlace={onResetPlace}
-              onSetSelectedPlace={onPlaceSelection}
-            />
-            <Spacer.Column numberOfSpaces={4} />
-            {selectedPlace ? (
-              <LocationSearchFilters
-                aroundRadius={tempAroundPlaceRadius}
-                onValuesChange={onTempAroundRadiusPlaceValueChange}
-              />
-            ) : null}
-          </React.Fragment>
-        ) : null}
-      </StyledScrollView>
-    </AppModal>
+      onSubmit={handleSubmit}
+      hasGeolocPosition={hasGeolocPosition}
+      tempLocationMode={tempLocationMode}
+      onClose={onClose}
+      selectLocationMode={selectLocationMode}
+      onModalHideRef={onModalHideRef}
+      selectedPlace={selectedPlace}
+      setSelectedPlace={setSelectedPlace}
+      placeQuery={placeQuery}
+      setPlaceQuery={setPlaceQuery}
+      onSetSelectedPlace={onSetSelectedPlace}
+      onResetPlace={onResetPlace}
+      shouldShowRadiusSlider
+      isSubmitDisabled={!selectedPlace && tempLocationMode !== LocationMode.AROUND_ME}
+      tempAroundPlaceRadius={tempAroundPlaceRadius}
+      onTempAroundMeRadiusValueChange={onTempAroundMeRadiusValueChange}
+      onTempAroundPlaceRadiusValueChange={onTempAroundPlaceRadiusValueChange}
+      tempAroundMeRadius={tempAroundMeRadius}
+      buttonWording="Valider et voir sur la carte"
+      shouldDisplayEverywhereSection={false}
+    />
   )
 }
-
-const StyledScrollView = styled.ScrollView({
-  paddingHorizontal: getSpacing(6),
-})
-
-const HeaderContainer = styled.View({
-  padding: getSpacing(4),
-  width: '100%',
-})