Rework variable naming, logic for rendering chat requests (#8737)

src/screens/Messages/ChatList.tsx

@@ -55,7 +55,7 @@ type ListItem =
 function renderItem({item}: {item: ListItem}) {
   switch (item.type) {
     case 'INBOX':
-      return <InboxPreview count={item.count} profiles={item.profiles} />
+      return <InboxPreview profiles={item.profiles} />
     case 'CONVERSATION':
       return <ChatListItem convo={item.conversation} />
   }
@@ -140,22 +140,24 @@ export function MessagesScreenInner({navigation, route}: Props) {
 
   const leftConvos = useLeftConvos()
 
-  const inboxPreviewConvos = useMemo(() => {
+  const inboxAllConvos =
-    const inbox =
+    inboxData?.pages
-      inboxData?.pages
+      .flatMap(page => page.convos)
-        .flatMap(page => page.convos)
+      .filter(
-        .filter(
+        convo =>
-          convo =>
+          !leftConvos.includes(convo.id) &&
-            !leftConvos.includes(convo.id) &&
+          !convo.muted &&
-            !convo.muted &&
+          convo.members.every(member => member.handle !== 'missing.invalid'),
-            convo.unreadCount > 0 &&
+      ) ?? []
-            convo.members.every(member => member.handle !== 'missing.invalid'),
+  const hasInboxConvos = inboxAllConvos?.length > 0
-        ) ?? []
 
-    return inbox
+  const inboxUnreadConvos = inboxAllConvos.filter(
-      .map(x => x.members.find(y => y.did !== currentAccount?.did))
+    convo => convo.unreadCount > 0,
-      .filter(x => !!x)
+  )
-  }, [inboxData, leftConvos, currentAccount?.did])
+
+  const inboxUnreadConvoMembers = inboxUnreadConvos
+    .map(x => x.members.find(y => y.did !== currentAccount?.did))
+    .filter(x => !!x)
 
   const conversations = useMemo(() => {
     if (data?.pages) {
@@ -164,15 +166,13 @@ export function MessagesScreenInner({navigation, route}: Props) {
         // filter out convos that are actively being left
         .filter(convo => !leftConvos.includes(convo.id))
 
-      const hasInboxRequests = inboxPreviewConvos?.length > 0
-
       return [
-        ...(hasInboxRequests
+        ...(hasInboxConvos
           ? [
               {
                 type: 'INBOX' as const,
-                count: inboxPreviewConvos.length,
+                count: inboxUnreadConvoMembers.length,
-                profiles: inboxPreviewConvos.slice(0, 3),
+                profiles: inboxUnreadConvoMembers.slice(0, 3),
               },
             ]
           : []),
@@ -182,7 +182,7 @@ export function MessagesScreenInner({navigation, route}: Props) {
       ] satisfies ListItem[]
     }
     return []
-  }, [data, leftConvos, inboxPreviewConvos])
+  }, [data, leftConvos, hasInboxConvos, inboxUnreadConvoMembers])
 
   const onRefresh = useCallback(async () => {
     setIsPTRing(true)
@@ -231,21 +231,17 @@ export function MessagesScreenInner({navigation, route}: Props) {
 
   // NOTE(APiligrim)
   // Show empty state only if there are no conversations at all
-  const actualConversations = conversations.filter(
+  const activeConversations = conversations.filter(
     item => item.type === 'CONVERSATION',
   )
-  const hasInboxRequests = inboxPreviewConvos?.length > 0
 
-  if (actualConversations.length === 0) {
+  if (activeConversations.length === 0) {
     return (
       <Layout.Screen>
         <Header newChatControl={newChatControl} />
         <Layout.Center>
-          {hasInboxRequests && (
+          {!isLoading && hasInboxConvos && (
-            <InboxPreview
+            <InboxPreview profiles={inboxUnreadConvoMembers} />
-              count={inboxPreviewConvos.length}
-              profiles={inboxPreviewConvos}
-            />
           )}
           {isLoading ? (
             <ChatListLoadingPlaceholder />

src/screens/Messages/components/InboxPreview.tsx

@@ -1,5 +1,5 @@
 import {View} from 'react-native'
-import {ChatBskyActorDefs} from '@atproto/api'
+import {type ChatBskyActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -12,10 +12,8 @@ import {Link} from '#/components/Link'
 
 export function InboxPreview({
   profiles,
-}: // count,
+}: {
-{
   profiles: ChatBskyActorDefs.ProfileViewBasic[]
-  count: number
 }) {
   const {_} = useLingui()
   const t = useTheme()