fixed search filters and added naf params in url

Author: enguerranws

front/src/app/components/forms/autocomplete/AppellationAutocomplete.tsx

@@ -45,11 +45,9 @@ export const AppellationAutocomplete = ({
   const [options, setOptions] = useState<AppellationMatchDto[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const debounceSearchTerm = useDebounce(searchTerm);
-  useEffect(() => {
-    if (initialOption && selectedOption === null) {
-      setSelectedOption(initialOption);
-    }
-  }, [initialOption, selectedOption]);
+  if (initialOption && selectedOption === null) {
+    setSelectedOption(initialOption);
+  }
   useEffect(() => {
     (async () => {
       const sanitizedTerm = debounceSearchTerm.trim();
@@ -104,6 +102,12 @@ export const AppellationAutocomplete = ({
         inputId: props.selectProps?.inputId ?? "im-select__input--appellation",
         loadingMessage: () => <>Recherche de métier en cours... 🔎</>,
         inputValue: searchTerm,
+        defaultValue: initialValue
+          ? {
+              label: initialValue.appellationLabel,
+              value: initialValue,
+            }
+          : undefined,
         noOptionsMessage: () =>
           noOptionText({ isSearching, debounceSearchTerm, searchTerm }),
         placeholder:

front/src/app/components/forms/autocomplete/NafAutocomplete.tsx

@@ -12,11 +12,14 @@ import { nafSlice } from "src/core-logic/domain/naf/naf.slice";
 export type NafAutocompleteProps = RSAutocompleteComponentProps<
   "naf",
   NafSectionSuggestion
->;
+> & {
+  initialValue?: NafSectionSuggestion;
+};
 
 export const NafAutocomplete = ({
   onNafSelected,
   onNafClear,
+  initialValue,
   ...props
 }: NafAutocompleteProps) => {
   const dispatch = useDispatch();
@@ -45,6 +48,12 @@ export const NafAutocomplete = ({
             dispatch(nafSlice.actions.queryWasEmptied());
           }
         },
+        defaultValue: initialValue
+          ? {
+              label: initialValue.label,
+              value: initialValue,
+            }
+          : undefined,
         options: options.map((option) => ({
           label: option.label,
           value: option,

front/src/app/pages/search/SearchPage.tsx

@@ -99,6 +99,8 @@ export const SearchPage = ({
     longitude: undefined,
     fitForDisabledWorkers: undefined,
     currentPage: 1,
+    nafCodes: undefined,
+    nafLabel: undefined,
     ...acquisitionParams,
   };
   const [tempValue, setTempValue] = useState<SearchPageParams>(initialValues);
@@ -419,14 +421,22 @@ export const SearchPage = ({
                         onNafClear={() => {
                           setTempValue({
                             ...tempValue,
-                            nafCodes: undefined,
+                            nafCodes: initialValues.nafCodes,
+                            nafLabel: initialValues.nafLabel,
                           });
                         }}
                         selectProps={{
                           inputId: domElementIds.search.nafAutocomplete,
                         }}
                         className={fr.cx("fr-mt-2w")}
-                        initialInputValue={formValues.nafLabel}
+                        initialValue={
+                          formValues.nafLabel && formValues.nafCodes
+                            ? {
+                                label: formValues.nafLabel,
+                                nafCodes: formValues.nafCodes,
+                              }
+                            : undefined
+                        }
                       />
                     </>
                   ),

front/src/app/routes/routeParams/convention.ts

@@ -10,6 +10,7 @@ import {
   ImmersionObjective,
   InternshipKind,
   LevelOfEducation,
+  NafCode,
   ScheduleDto,
   addressDtoToString,
   addressStringToDto,
@@ -265,6 +266,11 @@ export const appellationStringSerializer: ValueSerializer<AppellationCode> = {
   stringify: (appellation) => appellation,
 };
 
+export const nafCodeSerializer: ValueSerializer<NafCode[]> = {
+  parse: (raw) => parseStringToJsonOrThrow(raw, "nafCodes"),
+  stringify: (nafCode) => JSON.stringify(nafCode),
+};
+
 export type ConventionFormKeysInUrl = keyof ConventionQueryParams;
 type ConventionQueryParams = typeof conventionValuesFromUrl;
 

front/src/app/routes/routes.ts

@@ -12,6 +12,7 @@ import {
   appellationAndRomeDtoArraySerializer,
   appellationStringSerializer,
   conventionValuesFromUrl,
+  nafCodeSerializer,
 } from "./routeParams/convention";
 import { formEstablishmentParamsInUrl } from "./routeParams/formEstablishment";
 import { standardPagesSerializer } from "./routeParams/standardPage";
@@ -75,6 +76,8 @@ export const searchParams = {
   place: param.query.optional.string,
   fitForDisabledWorkers: param.query.optional.boolean,
   currentPage: param.query.optional.number,
+  nafCodes: param.query.optional.ofType(nafCodeSerializer),
+  nafLabel: param.query.optional.string,
   ...acquisitionParams,
 };
 

libs/react-design-system/src/immersionFacile/components/search-filter/SearchFilter.tsx

@@ -51,9 +51,13 @@ export const SearchFilter = ({
       isOpened &&
       wrapperElement.current &&
       wrapperElement.current.querySelectorAll(`.${prefix}__control--is-focused`)
-        .length === 0
+        .length === 0 &&
+      wrapperElement.current.querySelector("input")
     ) {
-      wrapperElement.current.querySelector("input")?.focus();
+      const input = wrapperElement.current.querySelector("input");
+      if (input && input.value === "") {
+        input.focus();
+      }
     }
     document.body.addEventListener("click", handleClickOutside);
   });