feat(follow-location): overview initial position

src/app/subscriptions/alerting/gql.js

@@ -9,11 +9,15 @@ const ALERT_FIELDS_FRAGMENT = gql`
     radius
     alertTag
     location
+    initialLocation
     createdAt
     closedAt
     address
     what3Words
     nearestPlace
+    lastAddress
+    lastWhat3Words
+    lastNearestPlace
     username
     code
     notifiedCount # deprecated

src/containers/AlertInfoLines/ClosedTime.js

@@ -7,17 +7,15 @@ import useTimeDisplay from "~/hooks/useTimeDisplay";
 export default function AlertInfoLineClosedTime({ alert, ...props }) {
   const { closedAt } = alert;
   const closedAtText = useTimeDisplay(closedAt);
-
   if (!closedAt) {
     return null;
   }
 
   return (
     <AlertInfoLine
-      icon={() => (
-        <MaterialCommunityIcons name="clock-time-four-outline" size={24} />
-      )}
-      text={`Terminée ${closedAtText}`}
+      iconName={"clock-time-four-outline"}
+      labelText={`Terminée`}
+      valueText={closedAtText}
       {...props}
     />
   );

src/containers/LocationInfoSection/index.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { View } from "react-native";
+import Text from "~/components/Text";
+import AlertInfoLineAddress from "~/containers/AlertInfoLines/Address";
+import AlertInfoLineNear from "~/containers/AlertInfoLines/Near";
+import AlertInfoLineW3w from "~/containers/AlertInfoLines/W3w";
+
+/**
+ * LocationInfoSection component displays location information with a title
+ * and optional address, nearby location, and what3words information.
+ *
+ * @param {Object} props - Component props
+ * @param {string} props.title - Title to display for the location section
+ * @param {Object} props.alert - Alert object containing location information
+ * @param {boolean} [props.showAddress=true] - Whether to show the address information
+ * @param {boolean} [props.showNear=true] - Whether to show the nearby location information
+ * @param {boolean} [props.showW3w=true] - Whether to show the what3words information
+ * @param {Object} props.styles - Styles object containing locationSectionTitle and locationTitle styles
+ * @param {boolean} [props.useLastLocation=false] - Whether to use the last known location instead of current location
+ * @returns {React.ReactElement} The rendered component
+ */
+export default function LocationInfoSection({
+  title,
+  alert,
+  showAddress = true,
+  showNear = true,
+  showW3w = true,
+  styles,
+  useLastLocation = false,
+}) {
+  // Create a modified alert object with the appropriate properties
+  const displayAlert = useLastLocation
+    ? {
+        ...alert,
+        address: alert.lastAddress,
+        nearestPlace: alert.lastNearLocation,
+        what3Words: alert.lastWhat3Words,
+      }
+    : alert;
+
+  return (
+    <>
+      <View style={styles.locationSectionTitle}>
+        <Text style={styles.locationTitle}>{title}</Text>
+      </View>
+      {showAddress && <AlertInfoLineAddress alert={displayAlert} />}
+      {showNear && <AlertInfoLineNear alert={displayAlert} />}
+      {showW3w && <AlertInfoLineW3w alert={displayAlert} />}
+    </>
+  );
+}

src/scenes/AlertCurOverview/index.js

@@ -1,8 +1,9 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useMemo } from "react";
 import { View, ImageBackground, ScrollView } from "react-native";
 import { TouchableRipple, Button, Title } from "react-native-paper";
 import { useIsFocused, useNavigation } from "@react-navigation/native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { deepEqual } from "fast-equals";
 
 import withConnectivity from "~/hoc/withConnectivity";
 
@@ -21,6 +22,7 @@ import alertBigButtonBgMessagesGrey from "~/assets/img/alert-big-button-bg-messa
 
 import Text from "~/components/Text";
 import AlertInfoLineLevel from "~/containers/AlertInfoLines/Level";
+import LocationInfoSection from "~/containers/LocationInfoSection";
 import AlertInfoLineCode from "~/containers/AlertInfoLines/Code";
 import AlertInfoLineDistance from "~/containers/AlertInfoLines/Distance";
 import AlertInfoLineCreatedTime from "~/containers/AlertInfoLines/CreatedTime";
@@ -198,6 +200,14 @@ export default withConnectivity(
 
     const [parentScrollEnabled, setParentScrollEnabled] = useState(true);
 
+    const isLocationsDifferent = useMemo(() => {
+      return (
+        alert.initialLocation &&
+        alert.location &&
+        !deepEqual(alert.initialLocation, alert.location)
+      );
+    }, [alert.initialLocation, alert.location]);
+
     // if (!isFocused) {
     //   return null;
     // }
@@ -512,11 +522,45 @@ export default withConnectivity(
             <AlertInfoLineCreatedTime alert={alert} />
             <AlertInfoLineClosedTime alert={alert} />
             {(!isSent || !isOpen) && <AlertInfoLineSubject alert={alert} />}
-            <AlertInfoLineAddress alert={alert} />
-            <AlertInfoLineNear alert={alert} />
-            <AlertInfoLineW3w alert={alert} />
-            <AlertInfoLineRadius alert={alert} />
-            <AlertInfoLineSentBy alert={alert} />
+
+            {useMemo(() => {
+              if (isLocationsDifferent) {
+                return (
+                  <>
+                    <LocationInfoSection
+                      title="Position initiale"
+                      alert={alert}
+                      styles={styles}
+                    />
+                    <LocationInfoSection
+                      title={
+                        alert.followLocation
+                          ? "Position actuelle"
+                          : "Dernière position connue"
+                      }
+                      alert={alert}
+                      useLastLocation={true}
+                      styles={styles}
+                    />
+                  </>
+                );
+              } else {
+                return (
+                  <>
+                    <AlertInfoLineAddress alert={alert} />
+                    <AlertInfoLineNear alert={alert} />
+                    <AlertInfoLineW3w alert={alert} />
+                  </>
+                );
+              }
+            }, [alert, styles, isLocationsDifferent])}
+
+            <View
+              style={isLocationsDifferent ? styles.locationSeparator : null}
+            >
+              <AlertInfoLineRadius alert={alert} />
+              <AlertInfoLineSentBy alert={alert} />
+            </View>
           </View>
         </View>
       </ScrollView>

src/scenes/AlertCurOverview/styles.js

@@ -153,4 +153,20 @@ export default createStyles(({ wp, hp, scaleText, theme: { colors } }) => ({
     lineHeight: 18,
     textAlign: "center",
   },
+  locationSectionTitle: {
+    backgroundColor: colors.background,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    marginTop: 5,
+  },
+  locationTitle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    color: colors.primary,
+  },
+  locationSeparator: {
+    marginTop: 15,
+    borderTopWidth: 5,
+    borderColor: colors.background,
+  },
 }));