[Clipclops] All my clops gone (#3850)

* Handle two common errors, provide more clarity around error states

* Handle failed polling

* Remove unused error type

* format

src/screens/Messages/Conversation/MessageListError.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ConvoError, ConvoItem} from '#/state/messages/convo'
+import {ConvoItem, ConvoItemError} from '#/state/messages/convo'
 import {atoms as a, useTheme} from '#/alf'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {InlineLinkText} from '#/components/Link'
@@ -18,7 +18,13 @@ export function MessageListError({
   const {_} = useLingui()
   const message = React.useMemo(() => {
     return {
-      [ConvoError.HistoryFailed]: _(msg`Failed to load past messages.`),
+      [ConvoItemError.HistoryFailed]: _(msg`Failed to load past messages.`),
+      [ConvoItemError.ResumeFailed]: _(
+        msg`There was an issue connecting to the chat.`,
+      ),
+      [ConvoItemError.PollFailed]: _(
+        msg`This chat was disconnected due to a network error.`,
+      ),
     }[item.code]
   }, [_, item.code])
 

src/screens/Messages/Conversation/MessagesList.tsx

@@ -229,7 +229,7 @@ export function MessagesList() {
       <ScrollProvider onScroll={onScroll} onMomentumEnd={onMomentumEnd}>
         <List
           ref={flatListRef}
-          data={chat.status === ConvoStatus.Ready ? chat.items : undefined}
+          data={chat.items}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           disableVirtualization={true}
@@ -248,11 +248,7 @@ export function MessagesList() {
           onScrollToIndexFailed={onScrollToIndexFailed}
           scrollEventThrottle={100}
           ListHeaderComponent={
-            <MaybeLoader
-              isLoading={
-                chat.status === ConvoStatus.Ready && chat.isFetchingHistory
-              }
-            />
+            <MaybeLoader isLoading={chat.isFetchingHistory} />
           }
         />
       </ScrollProvider>

src/screens/Messages/Conversation/index.tsx

@@ -14,7 +14,6 @@ import {BACK_HITSLOP} from 'lib/constants'
 import {isWeb} from 'platform/detection'
 import {ChatProvider, useChat} from 'state/messages'
 import {ConvoStatus} from 'state/messages/convo'
-import {useSession} from 'state/session'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
 import {CenteredView} from 'view/com/util/Views'
 import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
@@ -43,28 +42,27 @@ export function MessagesConversationScreen({route}: Props) {
 
 function Inner() {
   const chat = useChat()
-  const {currentAccount} = useSession()
-  const myDid = currentAccount?.did
 
-  const otherProfile = React.useMemo(() => {
-    if (chat.status !== ConvoStatus.Ready) return
-    return chat.convo.members.find(m => m.did !== myDid)
-  }, [chat, myDid])
-
-  // TODO whenever we have error messages, we should use them in here -hailey
-  if (chat.status !== ConvoStatus.Ready || !otherProfile) {
-    return (
-      <ListMaybePlaceholder
-        isLoading={true}
-        isError={chat.status === ConvoStatus.Error}
-      />
-    )
+  if (
+    chat.status === ConvoStatus.Uninitialized ||
+    chat.status === ConvoStatus.Initializing
+  ) {
+    return <ListMaybePlaceholder isLoading />
   }
 
+  if (chat.status === ConvoStatus.Error) {
+    // TODO error
+    return null
+  }
+
+  /*
+   * Any other chat states (atm) are "ready" states
+   */
+
   return (
     <KeyboardProvider>
       <CenteredView style={{flex: 1}} sideBorders>
-        <Header profile={otherProfile} />
+        <Header profile={chat.recipients[0]} />
         <MessagesList />
       </CenteredView>
     </KeyboardProvider>