diff --git a/package.json b/package.json index 67ccba88..d04b4ab0 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "jspdf": "^3.0.3", "lodash.debounce": "^4.0.8", "maplibre-gl": "^5.9.0", - "mobility-toolbox-js": "3.4.5", + "mobility-toolbox-js": "3.4.6-beta.6", "ol": "^10.6.1", "preact": "^10.27.2", "preact-custom-element": "^4.5.1", diff --git a/src/NotificationDetails/NotificationDetails.tsx b/src/NotificationDetails/NotificationDetails.tsx index 91026e49..8f298ea2 100644 --- a/src/NotificationDetails/NotificationDetails.tsx +++ b/src/NotificationDetails/NotificationDetails.tsx @@ -1,7 +1,6 @@ import { type AffectedTimeIntervalType, type PublicationType, - type SituationType, type TextualContentType, } from "mobility-toolbox-js/types"; import { twMerge } from "tailwind-merge"; @@ -10,6 +9,7 @@ import Warning from "../icons/Warning"; import ShadowOverflow from "../ShadowOverflow"; import Link from "../ui/Link"; import useI18n from "../utils/hooks/useI18n"; +import useMocoSituation from "../utils/hooks/useMocoSituation"; import type { MultilingualTextualContentType, @@ -64,30 +64,8 @@ function NotificationDetails({ feature: Feature; }) { const { locale, t } = useI18n(); - const { situation } = feature.getProperties(); - - // useEffect(() => { - // const abortController = new AbortController(); - // if (!notificationtenant) { - // setLines([]); - // } - // fetch( - // `https://tralis-tracker-api.geops.io/api/lines/${notificationtenant}/`, - // ) - // .then((res) => { - // return res.json(); - // }) - // .then((data) => { - // setLines(data); - // }) - // .catch((err) => { - // // eslint-disable-next-line no-console - // console.error("Failed to fetch lines", err); - // }); - // return () => { - // abortController?.abort(); - // }; - // }, [notificationtenant]); + const { situationId } = feature.getProperties(); + const situationParsed = useMocoSituation(situationId); // moco export v2 let textualContentMultilingual: Partial = {}; @@ -96,41 +74,36 @@ function NotificationDetails({ let publicationsToDisplay: PublicationType[] = []; let reasonsToDisplay: string[] = []; - try { - const situationParsed: SituationType = JSON.parse(situation) || {}; - const publicationsArr: PublicationType[] = - situationParsed?.publications || []; + // const situationParsed: SituationType = JSON.parse(situation) || {}; + const publicationsArr: PublicationType[] = + situationParsed?.publications || []; - // Find the current publication(s) at the current date - publicationsToDisplay = - publicationsArr?.filter(({ publicationWindows }) => { - return publicationWindows.find(({ endTime, startTime }) => { - const now = new Date(); - const startT = new Date(startTime); - const endT = new Date(endTime); - return startT <= now && now <= endT; - }); - }) || []; + // Find the current publication(s) at the current date + publicationsToDisplay = + publicationsArr?.filter(({ publicationWindows }) => { + return publicationWindows.find(({ endTime, startTime }) => { + const now = new Date(); + const startT = new Date(startTime); + const endT = new Date(endTime); + return startT <= now && now <= endT; + }); + }) || []; - // Display the current and next affected time intervals not the one in the past - timeIntervalsToDisplay = - (situationParsed?.affectedTimeIntervals || []).filter( - ({ endTime, startTime }) => { - const now = new Date(); - const startT = new Date(startTime); - const endT = new Date(endTime); - return (startT <= now && now <= endT) || now < startT; - }, - ) || []; + // Display the current and next affected time intervals not the one in the past + timeIntervalsToDisplay = + (situationParsed?.affectedTimeIntervals || []).filter( + ({ endTime, startTime }) => { + const now = new Date(); + const startT = new Date(startTime); + const endT = new Date(endTime); + return (startT <= now && now <= endT) || now < startT; + }, + ) || []; - // Display the reasons - reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => { - return name; - }); - } catch (e) { - // eslint-disable-next-line no-console - console.error("Failed to parse publications", e); - } + // Display the reasons + reasonsToDisplay = (situationParsed?.reasons || []).map(({ name }) => { + return name; + }); return ( diff --git a/src/utils/hooks/useMocoSituation.tsx b/src/utils/hooks/useMocoSituation.tsx new file mode 100644 index 00000000..344c1016 --- /dev/null +++ b/src/utils/hooks/useMocoSituation.tsx @@ -0,0 +1,54 @@ +import { useEffect, useMemo, useState } from "preact/hooks"; + +import useMapContext from "./useMapContext"; + +import type { MocoAPI } from "mobility-toolbox-js/maplibre"; +import type { + MocoExportParameters, + SituationType, +} from "mobility-toolbox-js/types"; + +function useMocoSituation(situationId?: string, params?: MocoExportParameters) { + const { lang, notificationsLayer } = useMapContext(); + const [situation, setSituation] = useState(); + + const api: MocoAPI | undefined = useMemo(() => { + return notificationsLayer?.api; + }, [notificationsLayer]); + + useEffect(() => { + const abortController = new AbortController(); + api + ?.exportById(situationId, { + contentLarge: true, + contentMedium: true, + contentSmall: true, + includeGeoms: false, + includeLines: true, + includeStops: true, + [lang]: true, + limit: 1, + ...(params || {}), + }) + .then((response) => { + setSituation(response); + }) + .catch((err) => { + // 20: AbortError + if (err.code !== 20) { + setSituation(undefined); + // eslint-disable-next-line no-console + console.error("Failed to fetch situation", err); + return; + } + }); + + return () => { + abortController.abort(); + }; + }, [api, situationId, params, lang]); + + return situation; +} + +export default useMocoSituation; diff --git a/yarn.lock b/yarn.lock index 706b98b1..7b239815 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8659,10 +8659,10 @@ mlly@^1.7.4: pkg-types "^1.3.1" ufo "^1.6.1" -mobility-toolbox-js@3.4.5: - version "3.4.5" - resolved "https://registry.yarnpkg.com/mobility-toolbox-js/-/mobility-toolbox-js-3.4.5.tgz#5359a9dc51bc49eb6d1c22908b5e56166beb12e8" - integrity sha512-xY0f42734hn7MGJ4a4m1KV9ljvYOWF+9DEyihvXD/6Cbr3K9UzsO7INgFDOE2oRVSqrH1bhv4cEFpA4uj3BpaA== +mobility-toolbox-js@3.4.6-beta.6: + version "3.4.6-beta.6" + resolved "https://registry.yarnpkg.com/mobility-toolbox-js/-/mobility-toolbox-js-3.4.6-beta.6.tgz#ff8a457069c4479cd28643fa41e49c12841d6dd5" + integrity sha512-W9T89CK3bIjkLB1LdxQHBIxhwH9U1g+yiYTylED/io9y0SbWlpuelo5tHWBUej+md9t65+Hf2JQmw+GQEf3IDQ== dependencies: "@geoblocks/ol-maplibre-layer" "^1.0.3" "@geops/geops-ui" "0.3.6" @@ -9504,7 +9504,7 @@ re-resizable@6.11.2: resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.11.2.tgz#2e8f7119ca3881d5b5aea0ffa014a80e5c1252b3" integrity sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A== -"react-dom@npm:@preact/compat@^18.3.1": +"react-dom@npm:@preact/compat@^18.3.1", "react@npm:@preact/compat@^18.3.1": version "18.3.1" resolved "https://registry.yarnpkg.com/@preact/compat/-/compat-18.3.1.tgz#9eddfe25eb1002f97a6a88fe4e9bcebe58136fe5" integrity sha512-Kog4PSRxtT4COtOXjsuQPV1vMXpUzREQfv+6Dmcy9/rMk0HOPK0HTE9fspFjAmY8R80T/T8gtgmZ68u5bOSngw== @@ -9564,11 +9564,6 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -"react@npm:@preact/compat@^18.3.1": - version "18.3.1" - resolved "https://registry.yarnpkg.com/@preact/compat/-/compat-18.3.1.tgz#9eddfe25eb1002f97a6a88fe4e9bcebe58136fe5" - integrity sha512-Kog4PSRxtT4COtOXjsuQPV1vMXpUzREQfv+6Dmcy9/rMk0HOPK0HTE9fspFjAmY8R80T/T8gtgmZ68u5bOSngw== - read-pkg-up@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02" @@ -10333,7 +10328,7 @@ string-length@^5.0.1: char-regex "^2.0.0" strip-ansi "^7.0.1" -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -10350,15 +10345,6 @@ string-width@^2.0.0, string-width@^2.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -10474,7 +10460,7 @@ stringify-package@^1.0.1: resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85" integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg== -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -10495,13 +10481,6 @@ strip-ansi@^4.0.0: dependencies: ansi-regex "^3.0.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -11369,16 +11348,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==