Add location search in the local unit form

Author: frozenhelium

app/src/components/domain/BaseMapPointInput/index.tsx

@@ -1,6 +1,7 @@
 import {
     useCallback,
     useMemo,
+    useState,
 } from 'react';
 import { NumberInput } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -10,15 +11,19 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 import {
+    MapCenter,
     MapContainer,
     MapLayer,
     MapSource,
 } from '@togglecorp/re-map';
 import { type ObjectError } from '@togglecorp/toggle-form';
 import getBbox from '@turf/bbox';
 import {
+    type AnySourceData,
     type CircleLayer,
     type FillLayer,
+    type FitBoundsOptions,
+    type FlyToOptions,
     type LngLat,
     type Map,
     type MapboxGeoJSONFeature,
@@ -35,15 +40,34 @@ import {
 import { localUnitMapStyle } from '#utils/map';
 
 import ActiveCountryBaseMapLayer from '../ActiveCountryBaseMapLayer';
+import LocationSearchInput, { type LocationSearchResult } from '../LocationSearchInput';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+const centerOptions = {
+    zoom: 16,
+    duration: 1000,
+} satisfies FlyToOptions;
+
+const geoJsonSourceOptions = {
+    type: 'geojson',
+} satisfies AnySourceData;
+
 interface GeoPoint {
     lng: number;
     lat: number
 }
 
+const fitBoundsOptions = {
+    padding: {
+        left: 20,
+        top: 20,
+        bottom: 50,
+        right: 20,
+    },
+} satisfies FitBoundsOptions;
+
 type Value = Partial<GeoPoint>;
 
 interface Props<NAME> extends BaseMapProps {
@@ -93,17 +117,6 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
     const countryDetails = useCountry({ id: country ?? -1 });
     const strings = useTranslation(i18n);
 
-    const bounds = useMemo(
-        () => {
-            if (isNotDefined(countryDetails)) {
-                return undefined;
-            }
-
-            return getBbox(countryDetails.bbox);
-        },
-        [countryDetails],
-    );
-
     const pointGeoJson = useMemo<GeoJSON.Feature | undefined>(
         () => {
             if (isNotDefined(value) || isNotDefined(value.lng) || isNotDefined(value.lat)) {
@@ -192,6 +205,27 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
         [value, onChange, name],
     );
 
+    const bounds = useMemo(
+        () => {
+            if (isNotDefined(countryDetails)) {
+                return undefined;
+            }
+
+            return getBbox(countryDetails.bbox);
+        },
+        [countryDetails],
+    );
+
+    const [searchResult, setSearchResult] = useState<LocationSearchResult | undefined>();
+
+    const center = useMemo(() => {
+        if (isNotDefined(searchResult)) {
+            return undefined;
+        }
+
+        return [+searchResult.lon, +searchResult.lat] satisfies [number, number];
+    }, [searchResult]);
+
     return (
         <div className={_cs(styles.baseMapPointInput, className)}>
             <div className={styles.locationInputs}>
@@ -232,12 +266,21 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                     />
                 </DiffWrapper>
             </div>
+            {isDefined(countryDetails) && (
+                <div className={styles.locationSearch}>
+                    <LocationSearchInput
+                        countryIso={countryDetails.iso}
+                        onResultSelect={setSearchResult}
+                    />
+                </div>
+            )}
             <BaseMap
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...otherProps}
                 mapOptions={{
                     zoom: 18,
                     bounds,
+                    fitBoundsOptions,
                     ...mapOptions,
                 }}
                 mapStyle={mapStyle}
@@ -264,14 +307,20 @@ function BaseMapPointInput<NAME extends string>(props: Props<NAME>) {
                     <MapSource
                         sourceKey="selected-point"
                         geoJson={pointGeoJson}
-                        sourceOptions={{ type: 'geojson' }}
+                        sourceOptions={geoJsonSourceOptions}
                     >
                         <MapLayer
                             layerKey="point-circle"
                             layerOptions={circleLayerOptions}
                         />
                     </MapSource>
                 )}
+                {center && (
+                    <MapCenter
+                        center={center}
+                        centerOptions={centerOptions}
+                    />
+                )}
                 {children}
             </BaseMap>
         </div>

app/src/components/domain/BaseMapPointInput/styles.module.css

@@ -1,11 +1,23 @@
 .base-map-point-input {
     display: flex;
+    position: relative;
     flex-direction: column;
     gap: var(--go-ui-spacing-md);
+    isolation: isolate;
 
     .location-inputs {
         display: grid;
         gap: var(--go-ui-spacing-sm);
         grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
     }
+
+    .location-search {
+        position: absolute;
+        right: var(--go-ui-spacing-sm);
+        bottom: var(--go-ui-spacing-sm);
+        z-index: 1;
+        border-radius: var(--go-ui-border-radius-lg);
+        background-color: var(--go-ui-color-foreground);
+        padding: var(--go-ui-spacing-sm);
+    }
 }

app/src/components/domain/LocationSearchInput/index.tsx

@@ -0,0 +1,104 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
+import { SearchLineIcon } from '@ifrc-go/icons';
+import { SearchSelectInput } from '@ifrc-go/ui';
+import { useDebouncedValue } from '@ifrc-go/ui/hooks';
+
+import { useExternalRequest } from '#utils/restRequest';
+
+export interface LocationSearchResult {
+    addresstype: string;
+    boundingbox: string[];
+    class: string;
+    display_name: string;
+    importance: number;
+    lat: string;
+    licence: string;
+    lon: string;
+    name: string;
+    osm_id: number;
+    osm_type: string;
+    place_id: number;
+    place_rank: number;
+    type: string
+}
+
+function keySelector(result: LocationSearchResult) {
+    return String(result.osm_id);
+}
+
+function labelSelector(result: LocationSearchResult) {
+    return result.name;
+}
+
+function descriptionSelector(result: LocationSearchResult) {
+    return result.display_name;
+}
+
+interface Props {
+    className?: string;
+    onResultSelect: (result: LocationSearchResult | undefined) => void;
+    countryIso: string;
+}
+
+function LocationSearchInput(props: Props) {
+    const {
+        className,
+        onResultSelect,
+        countryIso,
+    } = props;
+
+    const [opened, setOpened] = useState(false);
+    const [searchText, setSearchText] = useState<string | undefined>(undefined);
+
+    const debouncedSearchText = useDebouncedValue(
+        searchText?.trim() ?? '',
+    );
+
+    const {
+        pending,
+        response: options,
+    } = useExternalRequest<LocationSearchResult[] | undefined>({
+        skip: !opened || debouncedSearchText.length === 0,
+        url: 'https://nominatim.openstreetmap.org/search',
+        query: {
+            q: debouncedSearchText,
+            countrycodes: countryIso,
+            format: 'json',
+        },
+    });
+
+    const handleOptionSelect = useCallback((
+        _: string | undefined,
+        __: string,
+        option: LocationSearchResult | undefined,
+    ) => {
+        onResultSelect(option);
+    }, [onResultSelect]);
+
+    return (
+        <SearchSelectInput
+            className={className}
+            name=""
+            // FIXME: use translations
+            placeholder="Search for a place"
+            options={undefined}
+            value={undefined}
+            keySelector={keySelector}
+            labelSelector={labelSelector}
+            descriptionSelector={descriptionSelector}
+            onSearchValueChange={setSearchText}
+            searchOptions={options}
+            optionsPending={pending}
+            onChange={handleOptionSelect}
+            totalOptionsCount={options?.length ?? 0}
+            onShowDropdownChange={setOpened}
+            selectedOnTop={false}
+            icons={<SearchLineIcon />}
+        />
+    );
+}
+
+export default LocationSearchInput;

app/src/utils/restRequest/go.ts

@@ -228,7 +228,17 @@ const isSuccessfulStatus = (status: number): boolean => status >= 200 && status
 
 const isContentTypeExcel = (res: Response): boolean => res.headers.get('content-type') === CONTENT_TYPE_EXCEL;
 
-const isContentTypeJson = (res: Response): boolean => res.headers.get('content-type') === CONTENT_TYPE_JSON;
+const isContentTypeJson = (res: Response): boolean => {
+    const contentTypeHeaders = res.headers.get('content-type');
+
+    if (isNotDefined(contentTypeHeaders)) {
+        return false;
+    }
+
+    const mediaTypes = contentTypeHeaders.split('; ');
+
+    return mediaTypes[0]?.toLowerCase() === CONTENT_TYPE_JSON;
+};
 
 const isLoginRedirect = (url: string): boolean => new URL(url).pathname.includes('login');
 

app/src/utils/restRequest/index.ts

@@ -15,6 +15,8 @@ import type {
     CustomLazyRequestReturn,
     CustomRequestOptions,
     CustomRequestReturn,
+    ExternalRequestOptions,
+    ExternalRequestReturn,
     VALID_METHOD,
 } from './overrideTypes';
 
@@ -70,8 +72,13 @@ const useRiskLazyRequest = useLazyRequest as <
     requestOptions: CustomLazyRequestOptions<riskApiPaths, PATH, METHOD, CONTEXT> & { apiType: 'risk' }
 ) => CustomLazyRequestReturn<riskApiPaths, PATH, METHOD, CONTEXT>;
 
+const useExternalRequest = useRequest as <RESPONSE>(
+    requestOptions: ExternalRequestOptions<RESPONSE>,
+) => ExternalRequestReturn<RESPONSE>;
+
 export {
     RequestContext,
+    useExternalRequest,
     useGoLazyRequest as useLazyRequest,
     useGoRequest as useRequest,
     useRiskLazyRequest,

app/src/utils/restRequest/overrideTypes.ts

@@ -270,6 +270,11 @@ type LazyRequestOptionsBase<PATH, METHOD, CONTEXT> = {
     OptionOmissions
 >;
 
+export type ExternalRequestOptions<RESPONSE> = Pick<
+RequestOptions<RESPONSE, TransformedError, unknown>,
+'query' | 'url' | 'skip'
+>;
+
 export type CustomRequestOptions<
     SCHEMA extends object,
     PATH extends keyof SCHEMA,
@@ -327,6 +332,8 @@ type LazyRequestReturn<RESPONSE, CONTEXT> = ReturnType<typeof useLazyRequest<
     CONTEXT
 >>;
 
+export type ExternalRequestReturn<RESPONSE> = RequestReturn<RESPONSE>;
+
 export type CustomRequestReturn<
     SCHEMA,
     PATH extends keyof SCHEMA,

app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx

@@ -217,6 +217,7 @@ function LocalUnitsForm(props: Props) {
     const {
         response: localUnitPreviousResponse,
     } = useRequest({
+        skip: isNotDefined(localUnitId),
         url: '/api/v2/local-units/{id}/latest-change-request/',
         pathVariables: isDefined(localUnitId) ? { id: localUnitId } : undefined,
     });