fix: Auth issues and reload on profile logout (#174)

* Dealer and event card have recycling keys, flash list updated. * Col and row start mode, only col had that. * Primary pager updated (outdated name), now shows user name, buttons can grow and shrink. * Auth context uses the expiry to determine if a refresh is necessary. * Async once callback, used in auth context. * Translations adjusted. * PM read time shortened. * Don't allow refresh in profile while loading. * Package change, package lockfile change.
eurofurence · Sep 13, 2024 · cec9e45 · cec9e45
1 parent bd199a9
commit cec9e45
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@react-navigation/stack": "^6.3.17",
     "@reduxjs/toolkit": "^1.9.5",
     "@sentry/react-native": "~5.22.0",
-    "@shopify/flash-list": "1.6.4",
+    "@shopify/flash-list": "^1.7.1",
     "expo": "~51.0.31",
     "expo-application": "~5.9.1",
     "expo-asset": "~10.0.10",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/dealers/DealerCard.tsx b/src/components/dealers/DealerCard.tsx
@@ -64,7 +64,14 @@ export const DealerCard: FC<DealerCardProps> = ({ containerStyle, style, dealer,
     return (
         <TouchableOpacity containerStyle={containerStyle} style={[styles.container, appStyles.shadow, styleBackground, style]} onPress={onPressBind} onLongPress={onLongPressBind}>
             <View style={[styles.pre, stylePre]}>
-                <Image style={[avatarBackground, styles.avatarCircle]} source={avatar} contentFit="contain" placeholder={assetSource("ych")} transition={60} />
+                <Image
+                    style={[avatarBackground, styles.avatarCircle]}
+                    source={avatar}
+                    contentFit="contain"
+                    placeholder={assetSource("ych")}
+                    transition={60}
+                    recyclingKey={dealer.details.Id}
+                />
             </View>
 
             <View style={styles.main}>

diff --git a/src/components/events/EventCard.tsx b/src/components/events/EventCard.tsx
@@ -136,7 +136,7 @@ export const EventCard: FC<EventCardProps> = ({ containerStyle, style, type = "d
 
             {event.details.Banner ? (
                 <View style={styles.mainPoster}>
-                    <ImageBackground source={event.details.Banner.Url} contentFit="cover" style={StyleSheet.absoluteFill}>
+                    <ImageBackground source={event.details.Banner.Url} contentFit="cover" style={StyleSheet.absoluteFill} recyclingKey={event.details.Id}>
                         <View style={styles.tagArea2}>
                             <View style={styles.tagAreaInner}>
                                 <Label style={styles.tag} type="regular" color="white" ellipsizeMode="head" numberOfLines={1}>

diff --git a/src/components/generic/containers/Col.tsx b/src/components/generic/containers/Col.tsx
@@ -37,6 +37,10 @@ const types = StyleSheet.create({
         flexDirection: "column",
         alignItems: "flex-start",
     },
+    start: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
     center: {
         flexDirection: "column",
         alignItems: "center",

diff --git a/src/components/generic/containers/Row.tsx b/src/components/generic/containers/Row.tsx
@@ -37,6 +37,10 @@ const types = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
     },
+    start: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
     center: {
         flexDirection: "row",
         alignItems: "center",

diff --git a/src/components/mainmenu/PagerPrimary.tsx b/src/components/mainmenu/PagerPrimary.tsx
@@ -20,6 +20,7 @@ import { Row } from "../generic/containers/Row";
 import { Tab } from "../generic/containers/Tab";
 import { useTabs } from "../generic/containers/Tabs";
 import { PrivateMessageLinker } from "../pm/PrivateMessageLinker";
+import { Label } from "../generic/atoms/Label";
 
 type PagerPrimaryLoginProps = {
     loggedIn: boolean;
@@ -34,27 +35,30 @@ const PagerPrimaryLogin: FC<PagerPrimaryLoginProps> = ({ loggedIn, claim, open,
     const avatarBackground = useThemeBackground("primary");
     // TODO: Verify style of name etc.
     return (
-        <Row style={styles.padding} type="center" variant="center">
+        <Row style={styles.padding} type="start" variant="center">
             <TouchableOpacity disabled={!loggedIn || !onProfile} onPress={() => onProfile?.()}>
-                <Image
-                    style={[avatarBackground, styles.avatarCircle]}
-                    source={claim?.avatar ?? assetSource("ych")}
-                    contentFit="contain"
-                    placeholder="ych"
-                    transition={60}
-                    cachePolicy="memory"
-                    priority="high"
-                />
+                <Col type="center">
+                    <Image
+                        style={[avatarBackground, styles.avatarCircle]}
+                        source={claim?.avatar ?? assetSource("ych")}
+                        contentFit="contain"
+                        placeholder="ych"
+                        transition={60}
+                        cachePolicy="memory"
+                        priority="high"
+                    />
+                </Col>
+                {!claim?.name ? null : (
+                    <Label style={styles.name} type="minor" mt={4} ellipsizeMode="tail" numberOfLines={1}>
+                        {claim.name}
+                    </Label>
+                )}
             </TouchableOpacity>
 
-            {/*<Label style={styles.marginBefore} type="caption">*/}
-            {/*    {t("not_logged_in")}*/}
-            {/*</Label>*/}
-
             {loggedIn ? (
-                <PrivateMessageLinker containerStyle={styles.grow} style={styles.button} claims={claim} onOpenMessages={onMessages} open={open} />
+                <PrivateMessageLinker containerStyle={styles.buttonContainer} style={styles.button} onOpenMessages={onMessages} open={open} />
             ) : (
-                <Button containerStyle={styles.grow} style={styles.button} iconRight="login" onPress={onLogin}>
+                <Button containerStyle={styles.buttonContainer} style={styles.button} iconRight="login" onPress={onLogin}>
                     {t("logged_in_now")}
                 </Button>
             )}
@@ -141,15 +145,20 @@ const styles = StyleSheet.create({
         paddingHorizontal: 30,
         paddingVertical: 15,
     },
-    grow: {
+    buttonContainer: {
         flexGrow: 1,
+        flexShrink: 1,
+    },
+    name: {
+        maxWidth: 60,
+        textAlign: "center",
     },
     button: {
         marginLeft: 16,
     },
     avatarCircle: {
-        width: 32,
-        height: 32,
-        borderRadius: 16,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
     },
 });
diff --git a/src/components/pm/PrivateMessageLinker.tsx b/src/components/pm/PrivateMessageLinker.tsx
@@ -1,15 +1,16 @@
 import { FC, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { StyleProp, ViewStyle } from "react-native";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 
-import { Claims } from "../../context/AuthContext";
 import { useGetCommunicationsQuery } from "../../store/eurofurence/service";
-import { Button } from "../generic/containers/Button";
+import { Button, buttonIconSize } from "../generic/containers/Button";
+import { Icon } from "../generic/atoms/Icon";
+import { useThemeBackground, useThemeColorValue } from "../../hooks/themes/useThemeHooks";
+import { Label } from "../generic/atoms/Label";
 
 type PrivateMessageLinkerProps = {
     containerStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
-    claims: Claims | null;
     open?: boolean;
     onOpenMessages?: () => void;
 };
@@ -18,16 +19,20 @@ type PrivateMessageLinkerProps = {
  * Creates a link to the private messages screen
  * @constructor
  */
-export const PrivateMessageLinker: FC<PrivateMessageLinkerProps> = ({ containerStyle, style, claims, onOpenMessages, open }) => {
+export const PrivateMessageLinker: FC<PrivateMessageLinkerProps> = ({ containerStyle, style, onOpenMessages, open }) => {
     const prevOpen = useRef(open);
     const { t } = useTranslation("Menu");
+    const styleBackground = useThemeBackground("notification");
+
     const { unread, refetch } = useGetCommunicationsQuery(undefined, {
         selectFromResult: (query) => ({
             ...query,
             unread: query.data?.filter((it) => it.ReadDateTimeUtc === null),
         }),
     });
 
+    const iconColor = useThemeColorValue(!unread?.length ? "important" : "invImportant");
+
     useEffect(() => {
         if (open === true && prevOpen.current !== open) {
             console.debug("Fetching new private messages");
@@ -36,16 +41,53 @@ export const PrivateMessageLinker: FC<PrivateMessageLinkerProps> = ({ containerS
         prevOpen.current = open;
     }, [open, refetch]);
 
-    // TODO: New style??
     return (
         <Button
             containerStyle={containerStyle}
             style={style}
             outline={!unread?.length}
-            iconRight={unread?.length ? "email-multiple-outline" : "email-open-multiple-outline"}
+            iconRight={
+                <View>
+                    <Icon name={unread?.length ? "email-multiple-outline" : "email-open-multiple-outline"} size={buttonIconSize} color={iconColor} />
+                    {!unread?.length ? null : (
+                        <View style={styles.indicatorArea}>
+                            <View style={styles.indicatorLocator}>
+                                <Label style={[styles.indicatorContent, styleBackground]} type="cap" color="white">
+                                    {unread.length}
+                                </Label>
+                            </View>
+                        </View>
+                    )}
+                </View>
+            }
             onPress={onOpenMessages}
         >
-            {unread?.length ? t("messages", { count: unread?.length ?? 0, name: claims?.name }) : t("open_messages", { name: claims?.name })}
+            {t("open_messages")}
         </Button>
     );
 };
+
+const styles = StyleSheet.create({
+    indicatorArea: {
+        position: "absolute",
+        width: 24,
+        height: 24,
+    },
+    indicatorLocator: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    indicatorContent: {
+        fontSize: 8,
+        position: "absolute",
+        textAlignVertical: "center",
+        textAlign: "center",
+        minWidth: 20,
+        minHeight: 20,
+        padding: 4,
+        borderRadius: 99999,
+    },
+});