🚸 - Remove urgent messages upon viewing (#385)

The behaviour is after the user closes the urgent modal, the red bar will still be shown. It will be hidden upon re-opening the app.

app/components/announcements/announcement-card.tsx

@@ -45,7 +45,7 @@ type AnnouncementCardProps = {
   title?: string
   body: string
   link?: string
-  type: "normal" | "notification"
+  type?: "normal" | "notification"
 }
 
 export const AnnouncementCard = ({ title, body, link, type }: AnnouncementCardProps) => (

app/components/announcements/urgent-announcements.tsx

@@ -1,25 +1,44 @@
-import React from "react"
+import { useEffect, useState } from "react"
 import { Platform, View } from "react-native"
 import { useQuery } from "react-query"
+import { uniqBy } from "lodash"
 import { userLocale } from "../../i18n"
 import { PopUpMessage, railApi } from "../../services/api"
 import { spacing } from "../../theme"
-import { Text } from "../text/text"
-import { Screen } from "../screen/screen"
+import { Screen, Text } from ".."
 import { useIsDarkMode } from "../../hooks"
+import { useStores } from "../../models"
 import { AnnouncementCard } from "./announcement-card"
-import { removeHtmlTagsAndEntities } from "./announcements-utils"
 
 export const UrgentAnnouncements = () => {
+  const { settings } = useStores()
   const isDarkMode = useIsDarkMode()
+
   const { data: messages } = useQuery<PopUpMessage[]>(["announcements", "urgent"], () => railApi.getPopupMessages(userLocale))
+  const [unseenUrgentMessages, setUnseenUrgentMessages] = useState<PopUpMessage[]>([])
+
+  useEffect(() => {
+    if (messages) {
+      const unseenUrgentMessages = settings.filterUnseenUrgentMessages(messages)
+      setUnseenUrgentMessages(unseenUrgentMessages)
+
+      if (unseenUrgentMessages.length > 0) {
+        // Delay to avoid hiding the urgent announcement bar while the modal is opening.
+        // For some reason, the timeout also prevents the rerender of planner screen header.
+        setTimeout(() => {
+          settings.setSeenUrgentMessagesIds(unseenUrgentMessages.map((message) => message.id))
+        }, 1000)
+      }
+    }
+  }, [messages])
 
   return (
     <Screen unsafe statusBar={Platform.select({ ios: "light-content" })} statusBarBackgroundColor={isDarkMode ? "#000" : "#fff"}>
       <Text style={{ fontSize: 48, textAlign: "center", marginVertical: spacing[4] }}>📣</Text>
       <View style={{ paddingHorizontal: spacing[4] }}>
-        {messages?.map((message, index) => (
-          <AnnouncementCard body={message.messageBody} key={index} />
+        {/* we use uniqBy to avoid duplicate messages, as the API usually returns the same message twice */}
+        {uniqBy(unseenUrgentMessages, "title").map((message) => (
+          <AnnouncementCard body={message.messageBody} key={message.id} />
         ))}
       </View>
     </Screen>

app/models/settings/settings.ts

@@ -1,11 +1,13 @@
 import { Instance, SnapshotOut, types } from "mobx-state-tree"
 import { translate, TxKeyPath } from "../../i18n"
+import { PopUpMessage } from "../../services/api"
 
 export const SettingsModel = types
   .model("Settings")
   .props({
     stationsNotifications: types.optional(types.array(types.string), []),
     seenNotificationsScreen: types.optional(types.boolean, false),
+    seenUrgentMessagesIds: types.optional(types.array(types.number), []),
     profileCode: types.optional(types.number, 1),
     totalTip: types.optional(types.number, 0),
   })
@@ -41,6 +43,14 @@ export const SettingsModel = types
       self.totalTip = self.totalTip + amount
     },
   }))
+  .actions((self) => ({
+    setSeenUrgentMessagesIds(messagesIds: number[]) {
+      self.seenUrgentMessagesIds.replace(messagesIds)
+    },
+    filterUnseenUrgentMessages(messages: PopUpMessage[]) {
+      return messages.filter((message) => !self.seenUrgentMessagesIds.includes(message.id))
+    },
+  }))
 
 type SettingsType = Instance<typeof SettingsModel>
 export interface Settings extends SettingsType {}

app/screens/planner/planner-screen-header.tsx

@@ -49,15 +49,17 @@ const SETTINGS_ICON = require("../../../assets/settings.png")
 type NavigationProps = StackNavigationProp<RootParamList, "mainStack">
 
 export const PlannerScreenHeader = observer(function PlannerScreenHeader() {
-  const { routePlan, ride } = useStores()
+  const { routePlan, ride, settings } = useStores()
   const navigation = useNavigation<NavigationProps>()
   const [displayNewBadge, setDisplayNewBadge] = useState(false)
 
   const { data: popupMessages } = useQuery<PopUpMessage[]>(["announcements", "urgent"], () => {
     return railApi.getPopupMessages(userLocale)
   })
 
-  const showUrgentBar = !isEmpty(popupMessages)
+  // Filter unseen urgent messages from the popup messages
+  const unseenUrgentMessages = popupMessages ? settings.filterUnseenUrgentMessages(popupMessages) : []
+  const showUrgentBar = !isEmpty(unseenUrgentMessages)
 
   useEffect(() => {
     // display the "new" badge if the user has stations selected (not the initial launch),