From f285d759e4ee80da3fb3e845fab3e730cc8ef3ec Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 1 Oct 2024 10:53:47 -0500
Subject: [PATCH] Cleanups

---
 src/view/com/notifications/FeedItem.tsx | 309 +++++++++++-------------
 1 file changed, 139 insertions(+), 170 deletions(-)

diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 53e3561fab..c773c01da6 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -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)
-
-  let a11yAuthor = firstAuthorName
-  let author = (
+  const firstAuthor = authors[0]
+  const firstAuthorName = sanitizeDisplayName(
+    firstAuthor.profile.displayName || firstAuthor.profile.handle,
+  )
+  const firstAuthorLink = (
     <TextLink
-      key={authors[0].href}
+      key={firstAuthor.href}
       style={[pal.text, s.bold]}
-      href={authors[0].href}
+      href={firstAuthor.href}
       text={
         <Text emoji style={[pal.text, s.bold]}>
           {forceLTR(firstAuthorName)}
@@ -191,9 +188,14 @@ let FeedItem = ({
       disableMismatchWarning
     />
   )
+  const additionalAuthorsCount = authors.length - 1
+  const hasMultipleAuthors = additionalAuthorsCount > 0
+  const formattedAuthorsCount = hasMultipleAuthors
+    ? formatCount(i18n, additionalAuthorsCount)
+    : ''
 
   let a11yLabel = ''
-  let action: ReactElement
+  let notificationContent: ReactElement
   let icon = (
     <HeartIconFilled
       size="xl"
@@ -205,57 +207,53 @@ let FeedItem = ({
   )
 
   if (item.type === 'post-like') {
-    a11yLabel =
-      authors.length > 1
-        ? _(
-            msg`${a11yAuthor} and ${plural(authors.length - 1, {
-              one: `${formattedCount} other`,
-              other: `${formattedCount} others`,
-            })} liked your post`,
-          )
-        : _(msg`${a11yAuthor} liked your post`)
-    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>{' '}
-          liked your post
-        </Trans>
-      ) : (
-        <Trans>{author} liked your post</Trans>
-      )
+    a11yLabel = hasMultipleAuthors
+      ? _(
+          msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
+            one: `${formattedAuthorsCount} other`,
+            other: `${formattedAuthorsCount} others`,
+          })} liked your post`,
+        )
+      : _(msg`${firstAuthorName} liked your post`)
+    notificationContent = hasMultipleAuthors ? (
+      <Trans>
+        {firstAuthorLink} and{' '}
+        <Text style={[pal.text, s.bold]}>
+          <Plural
+            value={additionalAuthorsCount}
+            one={`${formattedAuthorsCount} other`}
+            other={`${formattedAuthorsCount} others`}
+          />
+        </Text>{' '}
+        liked your post
+      </Trans>
+    ) : (
+      <Trans>{firstAuthorLink} liked your post</Trans>
+    )
   } else if (item.type === 'repost') {
-    a11yLabel =
-      authors.length > 1
-        ? _(
-            msg`${a11yAuthor} and ${plural(authors.length - 1, {
-              one: `${formattedCount} other`,
-              other: `${formattedCount} others`,
-            })} reposted your post`,
-          )
-        : _(msg`${a11yAuthor} reposted your post`)
-    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>{' '}
-          reposted your post
-        </Trans>
-      ) : (
-        <Trans>{author} reposted your post</Trans>
-      )
+    a11yLabel = hasMultipleAuthors
+      ? _(
+          msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
+            one: `${formattedAuthorsCount} other`,
+            other: `${formattedAuthorsCount} others`,
+          })} reposted your post`,
+        )
+      : _(msg`${firstAuthorName} reposted your post`)
+    notificationContent = hasMultipleAuthors ? (
+      <Trans>
+        {firstAuthorLink} and{' '}
+        <Text style={[pal.text, s.bold]}>
+          <Plural
+            value={additionalAuthorsCount}
+            one={`${formattedAuthorsCount} other`}
+            other={`${formattedAuthorsCount} others`}
+          />
+        </Text>{' '}
+        reposted your post
+      </Trans>
+    ) : (
+      <Trans>{firstAuthorLink} reposted your post</Trans>
+    )
     icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} />
   } else if (item.type === 'follow') {
     let isFollowBack = false
@@ -279,112 +277,87 @@ let FeedItem = ({
       }
     }
 
-    if (isFollowBack) {
-      a11yLabel =
-        authors.length > 1
-          ? _(
-              msg`${a11yAuthor} and ${plural(authors.length - 1, {
-                one: `${formattedCount} other`,
-                other: `${formattedCount} others`,
-              })} 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>
-        )
+    if (isFollowBack && !hasMultipleAuthors) {
+      /*
+       * Follow-backs are ungrouped, grouped follow-backs not supported atm,
+       * see `src/state/queries/notifications/util.ts`
+       */
+      a11yLabel = _(msg`${firstAuthorName} followed you back`)
+      notificationContent = <Trans>{firstAuthorLink} followed you back</Trans>
     } else {
-      a11yLabel =
-        authors.length > 1
-          ? _(
-              msg`${a11yAuthor} and ${plural(authors.length - 1, {
-                one: `${formattedCount} other`,
-                other: `${formattedCount} others`,
-              })} followed you`,
-            )
-          : _(msg`${a11yAuthor} followed you`)
-      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
-          </Trans>
-        ) : (
-          <Trans>{author} followed you</Trans>
-        )
+      a11yLabel = hasMultipleAuthors
+        ? _(
+            msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
+              one: `${formattedAuthorsCount} other`,
+              other: `${formattedAuthorsCount} others`,
+            })} followed you`,
+          )
+        : _(msg`${firstAuthorName} followed you`)
+      notificationContent = hasMultipleAuthors ? (
+        <Trans>
+          {firstAuthorLink} and{' '}
+          <Text style={[pal.text, s.bold]}>
+            <Plural
+              value={additionalAuthorsCount}
+              one={`${formattedAuthorsCount} other`}
+              other={`${formattedAuthorsCount} others`}
+            />
+          </Text>{' '}
+          followed you
+        </Trans>
+      ) : (
+        <Trans>{firstAuthorLink} followed you</Trans>
+      )
     }
     icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} />
   } else if (item.type === 'feedgen-like') {
-    a11yLabel =
-      authors.length > 1
-        ? _(
-            msg`${a11yAuthor} and ${plural(authors.length - 1, {
-              one: `${formattedCount} other`,
-              other: `${formattedCount} others`,
-            })} liked your custom feed`,
-          )
-        : _(msg`${a11yAuthor} liked your custom feed`)
-    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>{' '}
-          liked your custom feed
-        </Trans>
-      ) : (
-        <Trans>{author} liked your custom feed</Trans>
-      )
+    a11yLabel = hasMultipleAuthors
+      ? _(
+          msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
+            one: `${formattedAuthorsCount} other`,
+            other: `${formattedAuthorsCount} others`,
+          })} liked your custom feed`,
+        )
+      : _(msg`${firstAuthorName} liked your custom feed`)
+    notificationContent = hasMultipleAuthors ? (
+      <Trans>
+        {firstAuthorLink} and{' '}
+        <Text style={[pal.text, s.bold]}>
+          <Plural
+            value={additionalAuthorsCount}
+            one={`${formattedAuthorsCount} other`}
+            other={`${formattedAuthorsCount} others`}
+          />
+        </Text>{' '}
+        liked your custom feed
+      </Trans>
+    ) : (
+      <Trans>{firstAuthorLink} liked your custom feed</Trans>
+    )
   } else if (item.type === 'starterpack-joined') {
-    a11yLabel =
-      authors.length > 1
-        ? _(
-            msg`${a11yAuthor} and ${plural(authors.length - 1, {
-              one: `${formattedCount} other`,
-              other: `${formattedCount} others`,
-            })} signed up with your starter pack`,
-          )
-        : _(msg`${a11yAuthor} signed up with your starter pack`)
-    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>{' '}
-          signed up with your starter pack
-        </Trans>
-      ) : (
-        <Trans>{author} signed up with your starter pack</Trans>
-      )
+    a11yLabel = hasMultipleAuthors
+      ? _(
+          msg`${firstAuthorName} and ${plural(additionalAuthorsCount, {
+            one: `${formattedAuthorsCount} other`,
+            other: `${formattedAuthorsCount} others`,
+          })} signed up with your starter pack`,
+        )
+      : _(msg`${firstAuthorName} signed up with your starter pack`)
+    notificationContent = hasMultipleAuthors ? (
+      <Trans>
+        {firstAuthorLink} and{' '}
+        <Text style={[pal.text, s.bold]}>
+          <Plural
+            value={additionalAuthorsCount}
+            one={`${formattedAuthorsCount} other`}
+            other={`${formattedAuthorsCount} others`}
+          />
+        </Text>{' '}
+        signed up with your starter pack
+      </Trans>
+    ) : (
+      <Trans>{firstAuthorLink} signed up with your starter pack</Trans>
+    )
     icon = (
       <View style={{height: 30, width: 30}}>
         <StarterPack width={30} gradient="sky" />
@@ -416,7 +389,7 @@ let FeedItem = ({
       accessibilityLabel={a11yLabel}
       accessible={!isAuthorsExpanded}
       accessibilityActions={
-        authors.length > 1
+        hasMultipleAuthors
           ? [
               {
                 name: 'toggleAuthorsExpanded',
@@ -445,14 +418,10 @@ let FeedItem = ({
         }
       }}
       onBeforePress={onBeforePress}>
-      <View style={[styles.layoutIcon, a.pr_sm]}>
-        {/* TODO: Prevent conditional rendering and move toward composable
-        notifications for clearer accessibility labeling */}
-        {icon}
-      </View>
+      <View style={[styles.layoutIcon, a.pr_sm]}>{icon}</View>
       <View style={styles.layoutContent}>
         <ExpandListPressable
-          hasMultipleAuthors={authors.length > 1}
+          hasMultipleAuthors={hasMultipleAuthors}
           onToggleAuthorsExpanded={onToggleAuthorsExpanded}>
           <CondensedAuthorsList
             visible={!isAuthorsExpanded}
@@ -465,7 +434,7 @@ let FeedItem = ({
             style={[styles.meta, a.self_start, pal.text]}
             accessibilityHint=""
             accessibilityLabel={a11yLabel}>
-            {action}
+            {notificationContent}
             <TimeElapsed timestamp={item.notification.indexedAt}>
               {({timeElapsed}) => (
                 <>