Popup new bal already exist (#859)

.env.sample

@@ -8,4 +8,5 @@ NEXT_PUBLIC_BAN_API_DEPOT=https://plateforme-bal.adresse.data.gouv.fr/api-depot
 NEXT_PUBLIC_PEERTUBE=https://peertube.adresse.data.gouv.fr
 NEXT_PUBLIC_MATOMO_SITE_ID=
 NEXT_PUBLIC_MATOMO_TRACKER_URL=https://stats.beta.gouv.fr/
+NEXT_PUBLIC_BAL_ADMIN_URL=
 PORT=3000

components/base-locale-card/base-locale-card-content.tsx

@@ -24,14 +24,14 @@ import { CommuneApiGeoType } from "@/lib/geo-api/type";
 
 interface BaseLocaleCardContentProps {
   baseLocale: ExtendedBaseLocaleDTO;
-  commune: CommuneApiGeoType;
-  habilitation: HabilitationDTO;
+  commune?: CommuneApiGeoType;
+  habilitation?: HabilitationDTO;
   isAdmin: boolean;
   userEmail: string;
-  onSelect: () => void;
-  onRemove: () => void;
-  onHide: () => void;
-  isShownHabilitationStatus: boolean;
+  onSelect?: () => void;
+  onRemove?: (e: any) => void;
+  onHide?: () => void;
+  isShownHabilitationStatus?: boolean;
 }
 
 function BaseLocaleCardContent({

components/base-locale-card/index.tsx

@@ -29,12 +29,12 @@ const ADRESSE_URL =
 interface BaseLocaleCardProps {
   baseLocale: ExtendedBaseLocaleDTO;
   isAdmin: boolean;
-  userEmail: string;
-  onRemove: () => void;
-  onHide: () => void;
-  onSelect: () => void;
-  isDefaultOpen: boolean;
-  isShownHabilitationStatus: boolean;
+  userEmail?: string;
+  onRemove?: (e: any) => void;
+  onHide?: () => void;
+  onSelect?: () => void;
+  isDefaultOpen?: boolean;
+  isShownHabilitationStatus?: boolean;
 }
 
 function BaseLocaleCard({

components/commune-search/commune-search-field.tsx

@@ -0,0 +1,85 @@
+/* eslint react/boolean-prop-naming: off */
+import { Dispatch, SetStateAction, useMemo } from "react";
+import { FormField } from "evergreen-ui";
+
+import CommuneSearch from "@/components/commune-search/commune-search";
+import { CommuneApiGeoType } from "@/lib/geo-api/type";
+
+let idCounter = 0;
+
+interface CommuneSearchFieldProps {
+  id: string;
+  hint: string;
+  label: string;
+  description?: string;
+  validationMessage?: string;
+  inputHeight?: string | number;
+  inputWidth?: string | number;
+  disabled: boolean;
+  required: boolean;
+  isInvalid?: boolean;
+  appearance: string;
+  spellCheck?: boolean;
+
+  placeholder: string;
+  innerRef: Dispatch<SetStateAction<HTMLInputElement>>;
+  initialSelectedItem: CommuneApiGeoType;
+  onSelect: Dispatch<SetStateAction<CommuneApiGeoType>>;
+  [x: string]: any;
+}
+
+export function CommuneSearchField({
+  // We are using the id from the state
+  id: unusedId,
+  // FormField props
+  hint,
+  label,
+  description = "",
+  validationMessage = null,
+  // TextInput props
+  inputHeight = 32,
+  inputWidth = "100%",
+  disabled,
+  required,
+  isInvalid = false,
+  appearance,
+  spellCheck = true, // Rest props are spread on the FormField
+
+  placeholder = "Chercher une commune…",
+  innerRef,
+  initialSelectedItem = null,
+  onSelect,
+}: CommuneSearchFieldProps) {
+  const id = useMemo(
+    () => `CommuneSearchField-${unusedId || idCounter++}`,
+    [unusedId]
+  );
+  return (
+    <FormField
+      marginBottom={24}
+      label={label}
+      isRequired={required}
+      hint={hint}
+      description={description}
+      validationMessage={validationMessage}
+      labelFor={id}
+    >
+      <CommuneSearch
+        id={id}
+        innerRef={innerRef}
+        placeholder={placeholder}
+        initialSelectedItem={initialSelectedItem}
+        onSelect={onSelect}
+        width={inputWidth}
+        height={inputHeight}
+        disabled={disabled}
+        required={required}
+        isInvalid={isInvalid}
+        appearance={appearance}
+        spellCheck={spellCheck}
+      />
+    </FormField>
+  );
+}
+
+export default CommuneSearchField;

components/commune-search/commune-search.tsx

@@ -0,0 +1,77 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { Autocomplete, Position, SearchInput } from "evergreen-ui";
+import { useDebouncedCallback } from "use-debounce";
+
+import { ApiGeoService } from "@/lib/geo-api";
+import { CommuneApiGeoType } from "@/lib/geo-api/type";
+
+export interface CommuneSearchProps {
+  placeholder: string;
+  innerRef: Dispatch<any>;
+  initialSelectedItem: CommuneApiGeoType;
+  onSelect: Dispatch<SetStateAction<CommuneApiGeoType>>;
+  [x: string]: any;
+}
+
+function CommuneSearch({
+  placeholder = "Chercher une commune…",
+  innerRef = () => {},
+  initialSelectedItem = null,
+  onSelect = () => {},
+  ...props
+}: CommuneSearchProps) {
+  const [communes, setCommunes] = useState([]);
+
+  const onSearch = useDebouncedCallback(async (value) => {
+    const results = await ApiGeoService.searchCommunes(value, {
+      fields: "departement",
+      limit: 20,
+    });
+    const bestResults = results.filter((c) => c._score > 0.1);
+
+    setCommunes(bestResults.length > 5 ? bestResults : results);
+  }, 300);
+
+  const initRef = (ref, getRef) => {
+    if (innerRef) {
+      innerRef(ref);
+    }
+    getRef(ref);
+  };
+
+  return (
+    <Autocomplete
+      isFilterDisabled
+      initialSelectedItem={initialSelectedItem}
+      items={communes}
+      itemToString={(item) =>
+        item
+          ? `${item.nom} ${
+              item.departement
+                ? `(${item.departement.nom} - ${item.departement.code})`
+                : ""
+            }`
+          : ""
+      }
+      onChange={onSelect}
+      position={Position.BOTTOM_LEFT}
+    >
+      {({ getInputProps, getRef, inputValue }) => {
+        return (
+          <SearchInput
+            ref={(ref) => initRef(ref, getRef)}
+            autoComplete="chrome-off"
+            placeholder={placeholder}
+            value={inputValue}
+            {...getInputProps({
+              onChange: (e) => onSearch(e.target.value),
+            })}
+            {...props}
+          />
+        );
+      }}
+    </Autocomplete>
+  );
+}
+
+export default CommuneSearch;