Skip to content

Commit

Permalink
fix: Auth issues and reload on profile logout
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
lukashaertel committed Sep 13, 2024
1 parent bd199a9 commit f11e0aa
Showing 14 changed files with 178 additions and 76 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
30 changes: 15 additions & 15 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 8 additions & 1 deletion src/components/dealers/DealerCard.tsx
Original file line number Diff line number Diff line change
@@ -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}>
2 changes: 1 addition & 1 deletion src/components/events/EventCard.tsx
Original file line number Diff line number Diff line change
@@ -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}>
4 changes: 4 additions & 0 deletions src/components/generic/containers/Col.tsx
Original file line number Diff line number Diff line change
@@ -37,6 +37,10 @@ const types = StyleSheet.create({
flexDirection: "column",
alignItems: "flex-start",
},
start: {
flexDirection: "row",
alignItems: "flex-start",
},
center: {
flexDirection: "column",
alignItems: "center",
4 changes: 4 additions & 0 deletions src/components/generic/containers/Row.tsx
Original file line number Diff line number Diff line change
@@ -37,6 +37,10 @@ const types = StyleSheet.create({
flexDirection: "row",
alignItems: "center",
},
start: {
flexDirection: "row",
alignItems: "flex-start",
},
center: {
flexDirection: "row",
alignItems: "center",
49 changes: 29 additions & 20 deletions src/components/mainmenu/PagerPrimary.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
});
58 changes: 50 additions & 8 deletions src/components/pm/PrivateMessageLinker.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
});
Loading

0 comments on commit f11e0aa

Please sign in to comment.