From 30aeb2a0e41196719977900e08b12d8ae813a69a Mon Sep 17 00:00:00 2001 From: devthejo Date: Sat, 31 May 2025 09:51:22 +0200 Subject: [PATCH] feat(follow-location): overview initial position --- src/app/subscriptions/alerting/gql.js | 4 ++ src/containers/AlertInfoLines/ClosedTime.js | 8 ++- src/containers/LocationInfoSection/index.js | 51 +++++++++++++++++++ src/scenes/AlertCurOverview/index.js | 56 ++++++++++++++++++--- src/scenes/AlertCurOverview/styles.js | 16 ++++++ 5 files changed, 124 insertions(+), 11 deletions(-) create mode 100644 src/containers/LocationInfoSection/index.js diff --git a/src/app/subscriptions/alerting/gql.js b/src/app/subscriptions/alerting/gql.js index 6e2f93c..5686dc1 100644 --- a/src/app/subscriptions/alerting/gql.js +++ b/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 diff --git a/src/containers/AlertInfoLines/ClosedTime.js b/src/containers/AlertInfoLines/ClosedTime.js index ef611e3..38a6d34 100644 --- a/src/containers/AlertInfoLines/ClosedTime.js +++ b/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 ( ( - - )} - text={`Terminée ${closedAtText}`} + iconName={"clock-time-four-outline"} + labelText={`Terminée`} + valueText={closedAtText} {...props} /> ); diff --git a/src/containers/LocationInfoSection/index.js b/src/containers/LocationInfoSection/index.js new file mode 100644 index 0000000..c63c663 --- /dev/null +++ b/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 ( + <> + + {title} + + {showAddress && } + {showNear && } + {showW3w && } + + ); +} diff --git a/src/scenes/AlertCurOverview/index.js b/src/scenes/AlertCurOverview/index.js index 6706878..be5b2f2 100644 --- a/src/scenes/AlertCurOverview/index.js +++ b/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( {(!isSent || !isOpen) && } - - - - - + + {useMemo(() => { + if (isLocationsDifferent) { + return ( + <> + + + + ); + } else { + return ( + <> + + + + + ); + } + }, [alert, styles, isLocationsDifferent])} + + + + + diff --git a/src/scenes/AlertCurOverview/styles.js b/src/scenes/AlertCurOverview/styles.js index 1e06ea0..9a07c39 100644 --- a/src/scenes/AlertCurOverview/styles.js +++ b/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, + }, }));