acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Cleanups

Browse Source
This commit is contained in:
Eric Bailey
2024-10-01 10:53:47 -05:00
parent 19eab13e17
commit f285d759e4
1 changed files with 139 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/notifications/FeedItem.tsx
+79 -110
View File
@@ -170,19 +170,16 @@ let FeedItem = ({
) )
} }
const formattedCount =
authors.length > 1 ? formatCount(i18n, authors.length - 1) : ''
const firstAuthorName = sanitizeDisplayName(
authors[0].profile.displayName || authors[0].profile.handle,
)
const niceTimestamp = niceDate(i18n, item.notification.indexedAt) const niceTimestamp = niceDate(i18n, item.notification.indexedAt)
const firstAuthor = authors[0]
let a11yAuthor = firstAuthorName const firstAuthorName = sanitizeDisplayName(
let author = ( firstAuthor.profile.displayName || firstAuthor.profile.handle,
)
const firstAuthorLink = (
<TextLink <TextLink
key={authors[0].href} key={firstAuthor.href}
style={[pal.text, s.bold]} style={[pal.text, s.bold]}
href={authors[0].href} href={firstAuthor.href}
text={ text={
<Text emoji style={[pal.text, s.bold]}> <Text emoji style={[pal.text, s.bold]}>
{forceLTR(firstAuthorName)} {forceLTR(firstAuthorName)}
@@ -191,9 +188,14 @@ let FeedItem = ({
disableMismatchWarning disableMismatchWarning
/> />
) )
const additionalAuthorsCount = authors.length - 1
const hasMultipleAuthors = additionalAuthorsCount > 0
const formattedAuthorsCount = hasMultipleAuthors
? formatCount(i18n, additionalAuthorsCount)
: ''
let a11yLabel = '' let a11yLabel = ''
let action: ReactElement let notificationContent: ReactElement
let icon = ( let icon = (
<HeartIconFilled <HeartIconFilled
size="xl" size="xl"
@@ -205,56 +207,52 @@ let FeedItem = ({
) )
if (item.type === 'post-like') { if (item.type === 'post-like') {
a11yLabel = a11yLabel = hasMultipleAuthors
authors.length > 1
? _( ? _(
msg`${a11yAuthor} and ${plural(authors.length - 1, { msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
one: `${formattedCount} other`, one: `${formattedAuthorsCount} other`,
other: `${formattedCount} others`, other: `${formattedAuthorsCount} others`,
})} liked your post`, })} liked your post`,
) )
: _(msg`${a11yAuthor} liked your post`) : _(msg`${firstAuthorName} liked your post`)
action = notificationContent = hasMultipleAuthors ? (
authors.length > 1 ? (
<Trans> <Trans>
{author} and{' '} {firstAuthorLink} and{' '}
<Text style={[pal.text, s.bold]}> <Text style={[pal.text, s.bold]}>
<Plural <Plural
value={authors.length - 1} value={additionalAuthorsCount}
one={`${formattedCount} other`} one={`${formattedAuthorsCount} other`}
other={`${formattedCount} others`} other={`${formattedAuthorsCount} others`}
/> />
</Text>{' '} </Text>{' '}
liked your post liked your post
</Trans> </Trans>
) : ( ) : (
<Trans>{author} liked your post</Trans> <Trans>{firstAuthorLink} liked your post</Trans>
) )
} else if (item.type === 'repost') { } else if (item.type === 'repost') {
a11yLabel = a11yLabel = hasMultipleAuthors
authors.length > 1
? _( ? _(
msg`${a11yAuthor} and ${plural(authors.length - 1, { msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
one: `${formattedCount} other`, one: `${formattedAuthorsCount} other`,
other: `${formattedCount} others`, other: `${formattedAuthorsCount} others`,
})} reposted your post`, })} reposted your post`,
) )
: _(msg`${a11yAuthor} reposted your post`) : _(msg`${firstAuthorName} reposted your post`)
action = notificationContent = hasMultipleAuthors ? (
authors.length > 1 ? (
<Trans> <Trans>
{author} and{' '} {firstAuthorLink} and{' '}
<Text style={[pal.text, s.bold]}> <Text style={[pal.text, s.bold]}>
<Plural <Plural
value={authors.length - 1} value={additionalAuthorsCount}
one={`${formattedCount} other`} one={`${formattedAuthorsCount} other`}
other={`${formattedCount} others`} other={`${formattedAuthorsCount} others`}
/> />
</Text>{' '} </Text>{' '}
reposted your post reposted your post
</Trans> </Trans>
) : ( ) : (
<Trans>{author} reposted your post</Trans> <Trans>{firstAuthorLink} reposted your post</Trans>
) )
icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} /> icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} />
} else if (item.type === 'follow') { } else if (item.type === 'follow') {
@@ -279,111 +277,86 @@ let FeedItem = ({
} }
} }
if (isFollowBack) { if (isFollowBack && !hasMultipleAuthors) {
a11yLabel = /*
authors.length > 1 * Follow-backs are ungrouped, grouped follow-backs not supported atm,
? _( * see `src/state/queries/notifications/util.ts`
msg`${a11yAuthor} and ${plural(authors.length - 1, { */
one: `${formattedCount} other`, a11yLabel = _(msg`${firstAuthorName} followed you back`)
other: `${formattedCount} others`, notificationContent = <Trans>{firstAuthorLink} followed you back</Trans>
})} followed you back`,
)
: _(msg`${a11yAuthor} followed you back`)
action =
authors.length > 1 ? (
<Trans>
{author} and{' '}
<Text style={[pal.text, s.bold]}>
<Plural
value={authors.length - 1}
one={`${formattedCount} other`}
other={`${formattedCount} others`}
/>
</Text>{' '}
followed you back
</Trans>
) : (
<Trans>{author} followed you back</Trans>
)
} else { } else {
a11yLabel = a11yLabel = hasMultipleAuthors
authors.length > 1
? _( ? _(
msg`${a11yAuthor} and ${plural(authors.length - 1, { msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
one: `${formattedCount} other`, one: `${formattedAuthorsCount} other`,
other: `${formattedCount} others`, other: `${formattedAuthorsCount} others`,
})} followed you`, })} followed you`,
) )
: _(msg`${a11yAuthor} followed you`) : _(msg`${firstAuthorName} followed you`)
action = notificationContent = hasMultipleAuthors ? (
authors.length > 1 ? (
<Trans> <Trans>
{author} and{' '} {firstAuthorLink} and{' '}
<Text style={[pal.text, s.bold]}> <Text style={[pal.text, s.bold]}>
<Plural <Plural
value={authors.length - 1} value={additionalAuthorsCount}
one={`${formattedCount} other`} one={`${formattedAuthorsCount} other`}
other={`${formattedCount} others`} other={`${formattedAuthorsCount} others`}
/> />
</Text>{' '} </Text>{' '}
followed you followed you
</Trans> </Trans>
) : ( ) : (
<Trans>{author} followed you</Trans> <Trans>{firstAuthorLink} followed you</Trans>
) )
} }
icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} /> icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} />
} else if (item.type === 'feedgen-like') { } else if (item.type === 'feedgen-like') {
a11yLabel = a11yLabel = hasMultipleAuthors
authors.length > 1
? _( ? _(
msg`${a11yAuthor} and ${plural(authors.length - 1, { msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
one: `${formattedCount} other`, one: `${formattedAuthorsCount} other`,
other: `${formattedCount} others`, other: `${formattedAuthorsCount} others`,
})} liked your custom feed`, })} liked your custom feed`,
) )
: _(msg`${a11yAuthor} liked your custom feed`) : _(msg`${firstAuthorName} liked your custom feed`)
action = notificationContent = hasMultipleAuthors ? (
authors.length > 1 ? (
<Trans> <Trans>
{author} and{' '} {firstAuthorLink} and{' '}
<Text style={[pal.text, s.bold]}> <Text style={[pal.text, s.bold]}>
<Plural <Plural
value={authors.length - 1} value={additionalAuthorsCount}
one={`${formattedCount} other`} one={`${formattedAuthorsCount} other`}
other={`${formattedCount} others`} other={`${formattedAuthorsCount} others`}
/> />
</Text>{' '} </Text>{' '}
liked your custom feed liked your custom feed
</Trans> </Trans>
) : ( ) : (
<Trans>{author} liked your custom feed</Trans> <Trans>{firstAuthorLink} liked your custom feed</Trans>
) )
} else if (item.type === 'starterpack-joined') { } else if (item.type === 'starterpack-joined') {
a11yLabel = a11yLabel = hasMultipleAuthors
authors.length > 1
? _( ? _(
msg`${a11yAuthor} and ${plural(authors.length - 1, { msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
one: `${formattedCount} other`, one: `${formattedAuthorsCount} other`,
other: `${formattedCount} others`, other: `${formattedAuthorsCount} others`,
})} signed up with your starter pack`, })} signed up with your starter pack`,
) )
: _(msg`${a11yAuthor} signed up with your starter pack`) : _(msg`${firstAuthorName} signed up with your starter pack`)
action = notificationContent = hasMultipleAuthors ? (
authors.length > 1 ? (
<Trans> <Trans>
{author} and{' '} {firstAuthorLink} and{' '}
<Text style={[pal.text, s.bold]}> <Text style={[pal.text, s.bold]}>
<Plural <Plural
value={authors.length - 1} value={additionalAuthorsCount}
one={`${formattedCount} other`} one={`${formattedAuthorsCount} other`}
other={`${formattedCount} others`} other={`${formattedAuthorsCount} others`}
/> />
</Text>{' '} </Text>{' '}
signed up with your starter pack signed up with your starter pack
</Trans> </Trans>
) : ( ) : (
<Trans>{author} signed up with your starter pack</Trans> <Trans>{firstAuthorLink} signed up with your starter pack</Trans>
) )
icon = ( icon = (
<View style={{height: 30, width: 30}}> <View style={{height: 30, width: 30}}>
@@ -416,7 +389,7 @@ let FeedItem = ({
accessibilityLabel={a11yLabel} accessibilityLabel={a11yLabel}
accessible={!isAuthorsExpanded} accessible={!isAuthorsExpanded}
accessibilityActions={ accessibilityActions={
authors.length > 1 hasMultipleAuthors
? [ ? [
{ {
name: 'toggleAuthorsExpanded', name: 'toggleAuthorsExpanded',
@@ -445,14 +418,10 @@ let FeedItem = ({
} }
}} }}
onBeforePress={onBeforePress}> onBeforePress={onBeforePress}>
<View style={[styles.layoutIcon, a.pr_sm]}> <View style={[styles.layoutIcon, a.pr_sm]}>{icon}</View>
{/* TODO: Prevent conditional rendering and move toward composable
notifications for clearer accessibility labeling */}
{icon}
</View>
<View style={styles.layoutContent}> <View style={styles.layoutContent}>
<ExpandListPressable <ExpandListPressable
hasMultipleAuthors={authors.length > 1} hasMultipleAuthors={hasMultipleAuthors}
onToggleAuthorsExpanded={onToggleAuthorsExpanded}> onToggleAuthorsExpanded={onToggleAuthorsExpanded}>
<CondensedAuthorsList <CondensedAuthorsList
visible={!isAuthorsExpanded} visible={!isAuthorsExpanded}
@@ -465,7 +434,7 @@ let FeedItem = ({
style={[styles.meta, a.self_start, pal.text]} style={[styles.meta, a.self_start, pal.text]}
accessibilityHint="" accessibilityHint=""
accessibilityLabel={a11yLabel}> accessibilityLabel={a11yLabel}>
{action} {notificationContent}
<TimeElapsed timestamp={item.notification.indexedAt}> <TimeElapsed timestamp={item.notification.indexedAt}>
{({timeElapsed}) => ( {({timeElapsed}) => (
<> <>