added isDebouncing in geosearch and naf slice, adjusted ui for RSAuto…

…complete
gip-inclusion · Feb 3, 2025 · 20f6e1d · 20f6e1d
1 parent 583ce3a
commit 20f6e1d
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 42 deletions.
diff --git a/front/src/app/components/forms/autocomplete/AppellationAutocomplete.tsx b/front/src/app/components/forms/autocomplete/AppellationAutocomplete.tsx
@@ -88,7 +88,7 @@ export const AppellationAutocomplete = ({
   }) => {
     if (!searchTerm) return "Saisissez un métier";
     if (searchTerm.length < ROME_AND_APPELLATION_MIN_SEARCH_TEXT_LENGTH)
-      return "Saisissez au moins 3 caractères";
+      return "Saisissez au moins 2 caractères";
     if (isSearching || searchTerm !== debounceSearchTerm) return "...";
     return "Aucun métier trouvé";
   };

diff --git a/front/src/app/components/forms/autocomplete/NafAutocomplete.tsx b/front/src/app/components/forms/autocomplete/NafAutocomplete.tsx
@@ -22,18 +22,20 @@ export const NafAutocomplete = ({
   const dispatch = useDispatch();
   const [searchTerm, setSearchTerm] = useState("");
   const isLoading = useAppSelector(nafSelectors.isLoading);
+  const isDebouncing = useAppSelector(nafSelectors.isDebouncing);
   const options = useAppSelector(nafSelectors.currentNafSections);
   return (
     <RSAutocomplete
       {...props}
       selectProps={{
         isLoading,
+        isDebouncing,
         inputValue: searchTerm,
-        noOptionsMessage: () => <>Saisissez au moins 3 caractères</>,
         placeholder: "Ex : Administration publique",
         onChange: (nafSectionSuggestion, actionMeta) => {
           if (nafSectionSuggestion && actionMeta.action === "select-option") {
             onNafSelected(nafSectionSuggestion.value);
+            dispatch(nafSlice.actions.queryWasEmptied());
           }
           if (
             actionMeta.action === "clear" ||

diff --git a/front/src/app/components/forms/autocomplete/PlaceAutocomplete.tsx b/front/src/app/components/forms/autocomplete/PlaceAutocomplete.tsx
@@ -23,6 +23,7 @@ export const PlaceAutocomplete = ({
 
   const [searchTerm, setSearchTerm] = useState<string>("");
   const isSearching: boolean = useAppSelector(geosearchSelectors.isLoading);
+  const isDebouncing: boolean = useAppSelector(geosearchSelectors.isDebouncing);
   const searchSuggestions = useAppSelector(geosearchSelectors.suggestions);
   const options = searchSuggestions.map((suggestion) => ({
     value: suggestion,
@@ -32,11 +33,11 @@ export const PlaceAutocomplete = ({
     <RSAutocomplete
       {...props}
       selectProps={{
+        isDebouncing,
         inputId: props.id ?? "im-select__input--place",
         isLoading: isSearching,
         loadingMessage: () => <>Recherche de ville en cours... 🔎</>,
         inputValue: searchTerm,
-        noOptionsMessage: () => <>Saisissez au moins 3 caractères</>,
         placeholder: "Ex : Saint-Denis, La Réunion, France",
         onChange: (searchResult, actionMeta) => {
           if (actionMeta.action === "clear") {
@@ -50,6 +51,7 @@ export const PlaceAutocomplete = ({
                 searchResult.value,
               ),
             );
+            dispatch(geosearchSlice.actions.queryWasEmptied());
           }
         },
         options,

diff --git a/front/src/app/pages/search/SearchPage.tsx b/front/src/app/pages/search/SearchPage.tsx
@@ -53,6 +53,7 @@ const radiusOptions = ["1", "2", "5", "10", "20", "50", "100"].map(
     value: distance,
   }),
 );
+const nafLabelMaxLength = 40;
 
 const getSearchRouteParam = (
   currentKey: keyof SearchPageParams,
@@ -194,7 +195,21 @@ export const SearchPage = ({
 
   const placeInputLabel = <>...dans la ville</>;
   const shouldShowInitialScreen = searchStatus === "noSearchMade";
-
+  const displayAppellationsOrNaf = () => {
+    const appellationDisplayed = formValues.appellations?.length
+      ? formValues.appellations.map(
+          (appellation) => appellation.appellationLabel,
+        )
+      : [];
+    const nafDisplayed = formValues.nafLabel
+      ? [
+          formValues.nafLabel.length > nafLabelMaxLength
+            ? `${formValues.nafLabel.substring(0, nafLabelMaxLength)}...`
+            : formValues.nafLabel,
+        ]
+      : [];
+    return [...appellationDisplayed, ...nafDisplayed].join(" - ");
+  };
   return (
     <HeaderFooterLayout>
       <MainWrapper vSpacing={0} layout="fullscreen">
@@ -337,13 +352,7 @@ export const SearchPage = ({
                 defaultValue="Tous les métiers"
                 iconId="fr-icon-briefcase-fill"
                 id={domElementIds.search.appellationFilterTag}
-                values={
-                  formValues.appellations
-                    ? formValues.appellations.map(
-                        (appellation) => appellation.appellationLabel,
-                      )
-                    : []
-                }
+                values={[displayAppellationsOrNaf()]}
                 onReset={() => {
                   const updatedValues = {
                     ...tempValue,
@@ -400,6 +409,7 @@ export const SearchPage = ({
                           setTempValue({
                             ...tempValue,
                             nafCodes: nafSectionSuggestion.nafCodes,
+                            nafLabel: nafSectionSuggestion.label,
                           });
                         }}
                         onNafClear={() => {

diff --git a/front/src/core-logic/domain/geosearch/geosearch.selectors.ts b/front/src/core-logic/domain/geosearch/geosearch.selectors.ts
@@ -1,16 +1,28 @@
+import { createSelector } from "@reduxjs/toolkit";
 import { createRootSelector } from "src/core-logic/storeConfig/store";
 
-const suggestions = createRootSelector((state) => state.geosearch.suggestions);
+const geosearchState = createRootSelector((state) => state.geosearch);
 
-const isLoading = createRootSelector((state) => state.geosearch.isLoading);
+const isDebouncing = createSelector(
+  geosearchState,
+  (state) => state.isDebouncing,
+);
 
-const query = createRootSelector((state) => state.geosearch.query);
+const suggestions = createSelector(
+  geosearchState,
+  (state) => state.suggestions,
+);
 
-const value = createRootSelector((state) => state.geosearch.value);
+const isLoading = createSelector(geosearchState, (state) => state.isLoading);
+
+const query = createSelector(geosearchState, (state) => state.query);
+
+const value = createSelector(geosearchState, (state) => state.value);
 
 export const geosearchSelectors = {
   suggestions,
   isLoading,
   query,
   value,
+  isDebouncing,
 };
diff --git a/front/src/core-logic/domain/geosearch/geosearch.slice.ts b/front/src/core-logic/domain/geosearch/geosearch.slice.ts
@@ -6,32 +6,33 @@ type GeoSearchState = {
   value: LookupSearchResult | null;
   query: string;
   isLoading: boolean;
+  isDebouncing: boolean;
 };
 
 const initialState: GeoSearchState = {
   suggestions: [],
   query: "",
   value: null,
   isLoading: false,
+  isDebouncing: false,
 };
 
 export const geosearchSlice = createSlice({
   name: "geosearch",
   initialState,
   reducers: {
-    queryWasEmptied: (state) => {
-      state.suggestions = [];
-      state.value = null;
-    },
+    queryWasEmptied: (_state) => initialState,
     queryHasChanged: (state, _action: PayloadAction<LookupLocationInput>) => {
       state.suggestions = [];
+      state.isDebouncing = true;
     },
     suggestionsHaveBeenRequested: (
       state,
       action: PayloadAction<LookupLocationInput>,
     ) => {
       state.query = action.payload;
       state.isLoading = true;
+      state.isDebouncing = false;
     },
     suggestionsSuccessfullyFetched: (
       state,

diff --git a/front/src/core-logic/domain/geosearch/geosearch.test.ts b/front/src/core-logic/domain/geosearch/geosearch.test.ts
@@ -4,6 +4,7 @@ import {
   expectObjectsToMatch,
   expectToEqual,
 } from "shared";
+import { geosearchSelectors } from "src/core-logic/domain/geosearch/geosearch.selectors";
 import {
   TestDependencies,
   createTestStore,
@@ -37,14 +38,17 @@ describe("Geosearch epic", () => {
   it("should update the searched query and reset the state", () => {
     const query = "foi";
     store.dispatch(geosearchSlice.actions.queryHasChanged(query));
+    expectDebouncingToBe(true);
     dependencies.scheduler.flush();
+    expectDebouncingToBe(false);
     expectLoadingToBe(true);
     expectQueryToBe(query);
   });
 
   it("shouldn't update the searched query if threshold is not reached", () => {
     const query = "fo";
     store.dispatch(geosearchSlice.actions.queryHasChanged(query));
+    expectDebouncingToBe(true);
     dependencies.scheduler.flush();
     expectLoadingToBe(false);
     expectQueryToBe("");
@@ -62,7 +66,9 @@ describe("Geosearch epic", () => {
       },
     ];
     store.dispatch(geosearchSlice.actions.queryHasChanged(query));
+    expectDebouncingToBe(true);
     dependencies.scheduler.flush();
+    expectDebouncingToBe(false);
     expectLoadingToBe(true);
     dependencies.addressGateway.lookupLocationResults$.next(
       expectedSuggestions,
@@ -95,15 +101,21 @@ describe("Geosearch epic", () => {
   });
 
   const expectQueryToBe = (expected: string) => {
-    expectToEqual(store.getState().geosearch.query, expected);
+    expectToEqual(geosearchSelectors.query(store.getState()), expected);
   };
   const expectLoadingToBe = (expected: boolean) => {
-    expectToEqual(store.getState().geosearch.isLoading, expected);
+    expectToEqual(geosearchSelectors.isLoading(store.getState()), expected);
+  };
+  const expectDebouncingToBe = (expected: boolean) => {
+    expectToEqual(geosearchSelectors.isDebouncing(store.getState()), expected);
   };
   const expectSuggestionsToBe = (expected: LookupSearchResult[]) => {
-    expectArraysToEqual(store.getState().geosearch.suggestions, expected);
+    expectArraysToEqual(
+      geosearchSelectors.suggestions(store.getState()),
+      expected,
+    );
   };
   const expectSelectedSuggestionToBe = (expected: LookupSearchResult) => {
-    expectObjectsToMatch(store.getState().geosearch.value, expected);
+    expectObjectsToMatch(geosearchSelectors.value(store.getState()), expected);
   };
 });
diff --git a/front/src/core-logic/domain/naf/naf.selectors.ts b/front/src/core-logic/domain/naf/naf.selectors.ts
@@ -10,7 +10,10 @@ const currentNafSections = createSelector(
   (state) => state.currentNafSections,
 );
 
+const isDebouncing = createSelector(nafState, (state) => state.isDebouncing);
+
 export const nafSelectors = {
   isLoading,
   currentNafSections,
+  isDebouncing,
 };
diff --git a/front/src/core-logic/domain/naf/naf.slice.ts b/front/src/core-logic/domain/naf/naf.slice.ts
@@ -3,11 +3,13 @@ import { NafSectionSuggestion } from "shared";
 
 export type NafState = {
   isLoading: boolean;
+  isDebouncing: boolean;
   currentNafSections: NafSectionSuggestion[];
 };
 
 export const initialState: NafState = {
   isLoading: false,
+  isDebouncing: false,
   currentNafSections: [],
 };
 
@@ -17,13 +19,15 @@ export const nafSlice = createSlice({
   reducers: {
     queryHasChanged: (state, _action: PayloadAction<string>) => {
       state.currentNafSections = [];
+      state.isDebouncing = true;
     },
     queryWasEmptied: (state) => {
       state.isLoading = false;
       state.currentNafSections = [];
     },
     searchSectionsRequested: (state, _action: PayloadAction<string>) => {
       state.isLoading = true;
+      state.isDebouncing = false;
     },
     searchSectionsSucceeded: (
       state,

diff --git a/front/src/core-logic/domain/naf/naf.test.ts b/front/src/core-logic/domain/naf/naf.test.ts
@@ -29,16 +29,23 @@ describe("naf slice", () => {
   it("should fetch naf sections and update the state", () => {
     expectToMatchState(store.getState(), initialState);
     store.dispatch(nafSlice.actions.queryHasChanged("query"));
+    expectToMatchState(store.getState(), {
+      currentNafSections: [],
+      isLoading: false,
+      isDebouncing: true,
+    });
     dependencies.scheduler.flush();
     expectToMatchState(store.getState(), {
       currentNafSections: [],
       isLoading: true,
+      isDebouncing: false,
     });
     // feed gateway
     dependencies.nafGateway.nafSuggestions$.next(expectedResults);
     expectToMatchState(store.getState(), {
       currentNafSections: expectedResults,
       isLoading: false,
+      isDebouncing: false,
     });
   });
 
@@ -49,6 +56,7 @@ describe("naf slice", () => {
     expectToMatchState(store.getState(), {
       currentNafSections: [],
       isLoading: true,
+      isDebouncing: false,
     });
     dependencies.nafGateway.nafSuggestions$.error(new Error("test"));
     expectToMatchState(store.getState(), initialState);
@@ -62,6 +70,7 @@ describe("naf slice", () => {
     expectToMatchState(store.getState(), {
       currentNafSections: expectedResults,
       isLoading: false,
+      isDebouncing: false,
     });
     store.dispatch(nafSlice.actions.queryHasChanged("qu"));
     dependencies.scheduler.flush();
@@ -76,6 +85,7 @@ describe("naf slice", () => {
     expectToMatchState(store.getState(), {
       currentNafSections: expectedResults,
       isLoading: false,
+      isDebouncing: false,
     });
     store.dispatch(nafSlice.actions.queryWasEmptied());
     dependencies.scheduler.flush();

diff --git a/libs/react-design-system/src/immersionFacile/components/rs-autocomplete/RSAutocomplete.scss b/libs/react-design-system/src/immersionFacile/components/rs-autocomplete/RSAutocomplete.scss
@@ -22,9 +22,15 @@
   }
   &__option {
     &:hover {
-      background-color: var(--hover-tint);
+      background-color: var(--background-overlap-grey-hover);
       cursor: pointer;
     }
+    &--is-focused {
+      background-color: var(--background-overlap-grey-hover);
+    }
+  }
+  &__menu-list {
+    @extend .fr-menu__list !optional;
   }
   &__menu-notice {
     color: var(--grey-425-625);