Merge pull request #105 from eurofurence/bug/private-message-linker

Fetch new messages when the tabs pager is opened.

Author: Requinard

src/app/MainMenu/PagerPrimary.tsx

@@ -7,6 +7,7 @@ import { Button } from "../../components/Containers/Button";
 import { Col } from "../../components/Containers/Col";
 import { Grid } from "../../components/Containers/Grid";
 import { Tab } from "../../components/Containers/Tab";
+import { useTabs } from "../../components/Containers/Tabs";
 import { useAppSelector } from "../../store";
 import { selectBrowseableMaps } from "../../store/eurofurence.selectors";
 import { RecordId } from "../../store/eurofurence.types";
@@ -30,11 +31,12 @@ export const PagerPrimary: FC<PagerMenuProps> = ({ onMessages, onLogin, onInfo,
     const { t } = useTranslation("Menu");
     const loggedIn = useAppSelector((state) => state.authorization.isLoggedIn);
     const maps = useAppSelector(selectBrowseableMaps);
+    const tabs = useTabs();
 
     return (
         <Col type="stretch">
             {loggedIn ? (
-                <PrivateMessageLinker onOpenMessages={onMessages} />
+                <PrivateMessageLinker onOpenMessages={onMessages} open={tabs.isOpen} />
             ) : (
                 <View style={{ padding: 30 }}>
                     <Label style={styles.marginBefore} type="caption">

src/app/PrivateMessages/PrivateMessageLinker.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, View } from "react-native";
 
@@ -7,27 +7,36 @@ import { Button } from "../../components/Containers/Button";
 import { useGetCommunicationsQuery } from "../../store/eurofurence.service";
 
 type PrivateMessageLinkerProps = {
+    open?: boolean;
     onOpenMessages?: () => void;
 };
 
 /**
  * Creates a link to the private messages screen
  * @constructor
  */
-export const PrivateMessageLinker: FC<PrivateMessageLinkerProps> = ({ onOpenMessages }) => {
+export const PrivateMessageLinker: FC<PrivateMessageLinkerProps> = ({ onOpenMessages, open }) => {
+    const prevOpen = useRef(open);
     const { t } = useTranslation("Menu");
-    const { unread } = useGetCommunicationsQuery(undefined, {
-        refetchOnFocus: true,
-        refetchOnMountOrArgChange: true,
-        refetchOnReconnect: true,
+    const { unread, refetch } = useGetCommunicationsQuery(undefined, {
         selectFromResult: (query) => ({
             ...query,
             unread: query.data?.filter((it) => it.ReadDateTimeUtc === null),
         }),
     });
+
+    useEffect(() => {
+        if (open === true && prevOpen.current !== open) {
+            console.debug("Fetching new private messages");
+            refetch();
+        }
+        prevOpen.current = open;
+        console.debug("Tab open has changed status", open);
+    }, [open]);
+
     return (
         <View style={{ padding: 30 }}>
-            <Label style={styles.marginBefore}>{t("messages", { count: unread?.length ?? 0 })}</Label>
+            <Label variant={unread?.length ? "bold" : undefined}>{t("messages", { count: unread?.length ?? 0 })}</Label>
             <Button style={styles.marginBefore} icon={unread?.length ? "email-multiple-outline" : "email-open-multiple-outline"} onPress={onOpenMessages}>
                 {t("open_messages")}
             </Button>

src/components/Containers/Tabs.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, ReactNode, useCallback, useImperativeHandle, useMemo, useState } from "react";
+import { noop } from "lodash";
+import { createContext, forwardRef, ReactNode, useCallback, useContext, useImperativeHandle, useMemo, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Gesture, GestureDetector, TouchableWithoutFeedback } from "react-native-gesture-handler";
 import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
@@ -98,6 +99,21 @@ export type TabsRef = {
     closeImmediately(): void;
 };
 
+/**
+ * Allow components in tabs to get access to the Tab properties.
+ */
+const TabsContext = createContext<TabsRef & { isOpen: boolean }>({
+    close: noop,
+    open: noop,
+    closeImmediately: noop,
+    isOpen: false,
+});
+
+/**
+ * Expose the Tabs Context as a hook
+ */
+export const useTabs = () => useContext(TabsContext);
+
 /**
  * A row of tabs and a "more" button.
  *
@@ -203,7 +219,7 @@ export const Tabs = forwardRef<TabsRef, TabsProps>(({ style, tabs, textMore = "M
     // TODO: Integration with back button.
 
     return (
-        <>
+        <TabsContext.Provider value={{ close, open, closeImmediately, isOpen: offset.value > 0 }}>
             {/* Dismissal area. */}
             <Animated.View style={[styles.dismiss, styleDismiss, dynamicDismiss]}>
                 <TouchableWithoutFeedback containerStyle={StyleSheet.absoluteFill} style={StyleSheet.absoluteFill} onPress={close} />
@@ -227,7 +243,7 @@ export const Tabs = forwardRef<TabsRef, TabsProps>(({ style, tabs, textMore = "M
                     </View>
                 </Animated.View>
             </GestureDetector>
-        </>
+        </TabsContext.Provider>
     );
 });
 

src/components/Managers/NotificationReceivedManager.tsx

@@ -1,4 +1,4 @@
-import { addNotificationReceivedListener, Notification, NotificationChannel, removeNotificationSubscription, scheduleNotificationAsync } from "expo-notifications";
+import { addNotificationReceivedListener, Notification, removeNotificationSubscription, scheduleNotificationAsync } from "expo-notifications";
 import moment from "moment";
 import { useEffect } from "react";