fix(accessibility): maplist (#1506)

* test(accessibilite): searchRegionByPostalCode

* test(accessibilite): extractedPoiTypesFromArticles

* fix(accessibilite): dépendance circulaire

* fix(accessibilite): ouvrir liste des POIs

* fix(accessibilte): refacto

* fix(accessibilite): retours de PR

* fix(accessibilite): retours PR

* fix(accessibilite): retours de PR

front/src/components/aroundMe/searchUserLocationOrPostalCodeCoords.component.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import type { LatLng } from "react-native-maps";
 
 import { AroundMeConstants } from "../../constants";
-import { AroundMeUtils } from "../../utils";
+import { SearchUtils } from "../../utils";
 
 interface Props {
   triggerGetUserLocation: boolean;
@@ -72,21 +72,6 @@ const SearchUserLocationOrPostalCodeCoords: FC<Props> = ({
     }
   };
 
-  const searchRegionByPostalCode = async () => {
-    if (
-      postalCodeInput.length !== AroundMeConstants.POSTAL_CODE_MAX_LENGTH ||
-      isNaN(Number(postalCodeInput))
-    ) {
-      postalCodeIsInvalid();
-      return;
-    }
-    const postalCodeCoords = await AroundMeUtils.getPostalCodeCoords(
-      postalCodeInput
-    );
-
-    setCoordinates(postalCodeCoords);
-  };
-
   useEffect(() => {
     setComponentIsInitialized(true);
   }, []);
@@ -97,7 +82,14 @@ const SearchUserLocationOrPostalCodeCoords: FC<Props> = ({
   }, [triggerGetUserLocation]);
 
   useEffect(() => {
-    if (componentIsInitialized) void searchRegionByPostalCode();
+    if (componentIsInitialized) {
+      void SearchUtils.getCoordinatesByPostalCode(
+        postalCodeInput,
+        postalCodeIsInvalid
+      ).then((coordinates) => {
+        setCoordinates(coordinates);
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [triggerGetPostalCodeCoords]);
 

front/src/components/search/aroundMePoiList.component.tsx

@@ -1,6 +1,6 @@
 import type { Poi } from "@socialgouv/nos1000jours-lib";
 import type { FC } from "react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import * as React from "react";
 import { StyleSheet } from "react-native";
 import type { Region } from "react-native-maps";
@@ -31,6 +31,10 @@ const AroundMePoiList: FC<Props> = ({
   const [triggerSearchByGpsCoords, setTriggerSearchByGpsCoords] =
     useState(false);
 
+  useEffect(() => {
+    setTriggerSearchByGpsCoords(poiArray.length == 0);
+  }, []);
+
   const handlePois = useCallback(
     (pois: Poi[]) => {
       updatePoiArray(pois);

front/src/screens/search/aroundMeMapAndList.component.tsx

@@ -1,7 +1,7 @@
 import type { RouteProp } from "@react-navigation/native";
 import type { StackNavigationProp } from "@react-navigation/stack";
 import type { Poi } from "@socialgouv/nos1000jours-lib";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import * as React from "react";
 import { StyleSheet } from "react-native";
 import type { LatLng, Region } from "react-native-maps";
@@ -10,7 +10,7 @@ import { AroundMeMap, AroundMePoiList } from "../../components";
 import { BackButton, View } from "../../components/baseComponents";
 import { Margins } from "../../styles";
 import type { TabSearchParamList } from "../../types";
-import { AccessibilityUtils } from "../../utils";
+import { AccessibilityUtils, AroundMeUtils } from "../../utils";
 
 interface Props {
   route: RouteProp<
@@ -34,7 +34,7 @@ const AroundMeMapAndList: React.FC<Props> = ({ navigation, route }) => {
   );
   const [poisArray, setPoisArray] = useState<Poi[]>([]);
   const [selectedPoiIndex, setSelectedPoiIndex] = useState(-1);
-  const [displayMap, setDisplayMap] = useState(true);
+  const [displayMap, setDisplayMap] = useState<boolean>();
   const [userLocation] = useState(
     route.params.displayUserLocation ? coordinates : undefined
   );
@@ -56,20 +56,34 @@ const AroundMeMapAndList: React.FC<Props> = ({ navigation, route }) => {
 
   const updatePoiArray = useCallback((newPoiArray: Poi[]) => {
     setPoisArray(newPoiArray);
+  }, []);
+
+  useEffect(() => {
+    checkAccessibility();
+    updateRegionManually();
+  }, []);
 
-    // Si le lecteur d'écran est activé, on affiche la liste des POI une fois que la première recherche a été faite
-    const goToListIfScreenReaderIsEnabled = async () => {
+  const checkAccessibility = useCallback(() => {
+    const checkAccessibilityMode = async () => {
       const isScreenReaderEnabled =
         await AccessibilityUtils.isScreenReaderEnabled();
-      if (isScreenReaderEnabled) {
-        setDisplayMap(false);
+
+      // Si le lecteur d'écran est activé, on affiche la liste des POI une fois que la première recherche a été faite
+      if (isScreenReaderEnabled) setDisplayMap(false);
+      else {
+        setTimeout(() => {
+          setDisplayMap(true);
+        }, 500);
       }
     };
-    setTimeout(() => {
-      void goToListIfScreenReaderIsEnabled();
-    }, 500);
+    void checkAccessibilityMode();
   }, []);
 
+  const updateRegionManually = useCallback(() => {
+    if (!displayMap && !region && coordinates)
+      setRegion(AroundMeUtils.calculateRegionManually(coordinates));
+  }, [coordinates, displayMap, region]);
+
   return (
     <View style={styles.mainContainer}>
       <View style={styles.flexStart}>

front/src/utils/aroundMe/aroundMe.util.test.ts

@@ -1,7 +1,7 @@
 import type { LatLng, Region } from "react-native-maps";
 
 import { AroundMeConstants } from "../../constants";
-import { getLatLngPoint } from "./aroundMe.util";
+import { calculateRegionManually, getLatLngPoint } from "./aroundMe.util";
 
 describe("AroundMeUtils", () => {
   describe("getLatLngPoint", () => {
@@ -56,4 +56,39 @@ describe("AroundMeUtils", () => {
       ).toEqual(expected);
     });
   });
+
+  describe("calculateRegionManually", () => {
+    it("Should return region with delta approximatively", () => {
+      const point = {
+        latitude: 47.223324097274556,
+        longitude: -1.538015529513359,
+      };
+
+      const regionByMapView: Region = {
+        latitude: 47.223324097274556,
+        latitudeDelta: 0.13430321917147126,
+        longitude: -1.538015529513359,
+        longitudeDelta: 0.13483263552188873,
+      };
+      const ERROR_MARGIN = 0.03;
+
+      const newRegion = calculateRegionManually(point);
+      expect(newRegion.latitude).toEqual(regionByMapView.latitude);
+      expect(newRegion.longitude).toEqual(regionByMapView.longitude);
+
+      expect(newRegion.longitudeDelta).toBeLessThanOrEqual(
+        regionByMapView.longitudeDelta + ERROR_MARGIN
+      );
+      expect(newRegion.longitudeDelta).toBeGreaterThanOrEqual(
+        regionByMapView.longitudeDelta - ERROR_MARGIN
+      );
+
+      expect(newRegion.latitudeDelta).toBeLessThanOrEqual(
+        regionByMapView.latitudeDelta + ERROR_MARGIN
+      );
+      expect(newRegion.latitudeDelta).toBeGreaterThanOrEqual(
+        regionByMapView.latitudeDelta - ERROR_MARGIN
+      );
+    });
+  });
 });

front/src/utils/aroundMe/aroundMe.util.ts

@@ -2,6 +2,7 @@ import type { LatLng, Region } from "react-native-maps";
 
 import { AroundMeConstants } from "../../constants";
 import { PLATFORM_IS_IOS } from "../../constants/platform.constants";
+import { deg2rad, rad2deg } from "../number/number.util";
 
 export const getPostalCodeCoords = async (
   postalCodeInput: string
@@ -99,3 +100,22 @@ export const triggerFunctionAfterTimeout = (
     PLATFORM_IS_IOS ? 1000 : 500
   );
 };
+
+export const calculateRegionManually = (coordinates: LatLng): Region => {
+  const EARTH_RADIUS_IN_KM = 6371;
+  const RADIUS_IN_KM = 12;
+  const ASPECT_RATIO = 1;
+  const radiusInRad = RADIUS_IN_KM / EARTH_RADIUS_IN_KM;
+
+  const longitudeDelta = rad2deg(
+    radiusInRad / Math.cos(deg2rad(coordinates.latitude))
+  );
+  const latitudeDelta = ASPECT_RATIO * rad2deg(radiusInRad);
+
+  return {
+    latitude: coordinates.latitude,
+    latitudeDelta: latitudeDelta,
+    longitude: coordinates.longitude,
+    longitudeDelta: longitudeDelta,
+  };
+};

front/src/utils/index.ts

@@ -15,9 +15,10 @@ import { initMonitoring, reportError } from "./logging.util";
 import * as MoodboardUtils from "./moodboard/moodboard.util";
 import * as NotificationUtils from "./notifications/notification.util";
 import * as NotificationToggleUtils from "./notifications/notificationToggle.util";
+import * as NumberUtils from "./number/number.util";
 import * as RootNavigation from "./rootNavigation.util";
 import * as ScaleNormalize from "./scaleNormalize.util";
-import * as SearchUtils from "./search.util";
+import * as SearchUtils from "./search/search.util";
 import * as StepUtils from "./step/step.util";
 import * as StorageUtils from "./storage.util";
 import * as StringUtils from "./strings/strings.util";
@@ -45,6 +46,7 @@ export {
   MoodboardUtils,
   NotificationToggleUtils,
   NotificationUtils,
+  NumberUtils,
   reportError,
   RootNavigation,
   ScaleNormalize,

front/src/utils/number/number.util.test.ts

@@ -0,0 +1,19 @@
+import { deg2rad, rad2deg } from "./number.util";
+
+describe("Number utils", () => {
+  describe("deg2rad", () => {
+    it("Should return radian", () => {
+      const deg = 180;
+      const expected = (deg / 180) * Math.PI;
+      expect(deg2rad(deg)).toEqual(expected);
+    });
+  });
+
+  describe("rad2deg", () => {
+    it("Should return degree", () => {
+      const rad = 3;
+      const expected = (rad / Math.PI) * 180;
+      expect(rad2deg(rad)).toEqual(expected);
+    });
+  });
+});

front/src/utils/number/number.util.ts

@@ -0,0 +1,2 @@
+export const deg2rad = (angle: number) => (angle / 180) * Math.PI;
+export const rad2deg = (angle: number) => (angle / Math.PI) * 180;