Skip to content

Commit

Permalink
fix(webmail): fix unread count as string (#488)
Browse files Browse the repository at this point in the history
  • Loading branch information
emacoricciati authored May 15, 2024
1 parent a872727 commit 864c27b
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 10 deletions.
20 changes: 13 additions & 7 deletions lib/ui/components/UnreadBadge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,20 @@ interface Props {
text?: string | number;
style?: TextProps['style'];
variant?: 'outlined' | 'filled';
isNumeric?: boolean;
}

export const UnreadBadge = ({ text, style, variant = 'filled' }: Props) => {
export const UnreadBadge = ({
text,
style,
variant = 'filled',
isNumeric = false,
}: Props) => {
const { t } = useTranslation();
const { colors, palettes } = useTheme();
const styles = useStylesheet(createStyles);
const isOutlined = useMemo(() => variant === 'outlined', [variant]);
const isNumeric = isNumber(text);
const isDigit = isNumber(text);

return (
<Row
Expand All @@ -34,14 +40,14 @@ export const UnreadBadge = ({ text, style, variant = 'filled' }: Props) => {
style={[
styles.badge,
{
backgroundColor: isNumeric
? palettes.rose[600]
: palettes.orange[600],
backgroundColor:
isDigit || isNumeric ? palettes.rose[600] : palettes.orange[600],
},
!text && styles.dotBadge,
isOutlined && {
backgroundColor: colors.surface,
borderColor: isNumeric ? palettes.rose[600] : palettes.orange[600],
borderColor:
isDigit || isNumeric ? palettes.rose[600] : palettes.orange[600],

borderWidth: 2,
},
Expand All @@ -56,7 +62,7 @@ export const UnreadBadge = ({ text, style, variant = 'filled' }: Props) => {
]}
>
{text}
{isNumeric && (
{isDigit && (
<VisuallyHidden>
{t('common.newItems', { count: Number(text) })}
</VisuallyHidden>
Expand Down
9 changes: 7 additions & 2 deletions src/features/services/components/ServiceCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ interface Props extends PropsWithChildren<TouchableCardProps> {
onFavoriteChange: (favorite: boolean) => void;
linkTo?: To<any>;
onPress?: () => void;
unReadCount?: number;
unReadCount?: number | string;
}

export const ServiceCard = ({
Expand Down Expand Up @@ -81,7 +81,12 @@ export const ServiceCard = ({
<Text variant="title" style={styles.title}>
{name}
</Text>
{unReadCount > 0 && !disabled && <UnreadBadge text={unReadCount} />}
{typeof unReadCount === 'number' && unReadCount > 0 && !disabled && (
<UnreadBadge text={unReadCount} />
)}
{typeof unReadCount === 'string' && !disabled && (
<UnreadBadge text={unReadCount} isNumeric={true} />
)}
</Row>
{children}
</TouchableCard>
Expand Down
2 changes: 1 addition & 1 deletion src/features/services/screens/ServicesScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const ServicesScreen = () => {
icon: faEnvelope,
disabled: isOffline,
unReadCount: unreadEmailsQuery.data
? parseInt(unreadEmailsQuery.data.unreadEmails, 10)
? unreadEmailsQuery.data.unreadEmails
: 0,
onPress: () => {
queryClient
Expand Down

0 comments on commit 864c27b

Please sign in to comment.