From c92ef2fe31c6fcafa9bcb398562bc10191b3f4e4 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 18 Jun 2024 17:33:17 -0500
Subject: [PATCH] Better handling of blocks in `KnownFollowers` (#4563)

* Better handle nested conditionals, use renderable items to determine UI

* Better translate

* Fix translation and fix missing case in the process

* Clarify naming

* Add safeguard

* Remove unneeded msg

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 src/components/KnownFollowers.tsx | 67 ++++++++++++++++++++++---------
 1 file changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/components/KnownFollowers.tsx b/src/components/KnownFollowers.tsx
index 63f61ce8..7b861dc6 100644
--- a/src/components/KnownFollowers.tsx
+++ b/src/components/KnownFollowers.tsx
@@ -100,7 +100,15 @@ function KnownFollowersInner({
       moderation,
     }
   })
-  const count = cachedKnownFollowers.count
+
+  // Does not have blocks applied. Always >= slices.length
+  const serverCount = cachedKnownFollowers.count
+
+  /*
+   * We check above too, but here for clarity and a reminder to _check for
+   * valid indices_
+   */
+  if (slice.length === 0) return null
 
   return (
     <Link
@@ -164,31 +172,54 @@ function KnownFollowersInner({
               },
             ]}
             numberOfLines={2}>
-            {count > 2 ? (
-              <Trans>
-                Followed by{' '}
-                <Text key={slice[0].profile.did} style={textStyle}>
-                  {slice[0].profile.displayName}
-                </Text>
-                ,{' '}
-                <Text key={slice[1].profile.did} style={textStyle}>
-                  {slice[1].profile.displayName}
-                </Text>
-                , and{' '}
-                <Plural value={count - 2} one="# other" other="# others" />
-              </Trans>
-            ) : count === 2 ? (
+            {slice.length >= 2 ? (
+              // 2-n followers, including blocks
+              serverCount > 2 ? (
+                <Trans>
+                  Followed by{' '}
+                  <Text key={slice[0].profile.did} style={textStyle}>
+                    {slice[0].profile.displayName}
+                  </Text>
+                  ,{' '}
+                  <Text key={slice[1].profile.did} style={textStyle}>
+                    {slice[1].profile.displayName}
+                  </Text>
+                  , and{' '}
+                  <Plural
+                    value={serverCount - 2}
+                    one="# other"
+                    other="# others"
+                  />
+                </Trans>
+              ) : (
+                // only 2
+                <Trans>
+                  Followed by{' '}
+                  <Text key={slice[0].profile.did} style={textStyle}>
+                    {slice[0].profile.displayName}
+                  </Text>{' '}
+                  and{' '}
+                  <Text key={slice[1].profile.did} style={textStyle}>
+                    {slice[1].profile.displayName}
+                  </Text>
+                </Trans>
+              )
+            ) : serverCount > 1 ? (
+              // 1-n followers, including blocks
               <Trans>
                 Followed by{' '}
                 <Text key={slice[0].profile.did} style={textStyle}>
                   {slice[0].profile.displayName}
                 </Text>{' '}
                 and{' '}
-                <Text key={slice[1].profile.did} style={textStyle}>
-                  {slice[1].profile.displayName}
-                </Text>
+                <Plural
+                  value={serverCount - 1}
+                  one="# other"
+                  other="# others"
+                />
               </Trans>
             ) : (
+              // only 1
               <Trans>
                 Followed by{' '}
                 <Text key={slice[0].profile.did} style={textStyle}>