Re-align error components and types

src/screens/Messages/Conversation/MessageListError.tsx

@@ -5,26 +5,25 @@ import {useLingui} from '@lingui/react'
 
 import {ConvoItem, ConvoItemError} from '#/state/messages/convo/types'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function MessageListError({item}: {item: ConvoItem & {type: 'error'}}) {
   const t = useTheme()
   const {_} = useLingui()
-  const message = React.useMemo(() => {
+  const {description, help, cta} = React.useMemo(() => {
     return {
-      [ConvoItemError.Unknown]: _(
+      [ConvoItemError.FirehoseFailed]: {
-        msg`An unknown error occurred. If the issue persists, contact support.`,
+        description: _(msg`This chat was disconnected`),
-      ),
+        help: _(msg`Press to attempt reconnection`),
-      [ConvoItemError.FirehoseFailed]: _(
+        cta: _(msg`Reconnect`),
-        msg`This chat was disconnected due to a network error.`,
+      },
-      ),
+      [ConvoItemError.HistoryFailed]: {
-      [ConvoItemError.HistoryFailed]: _(msg`Failed to load past messages.`),
+        description: _(msg`Failed to load past messages`),
-      [ConvoItemError.UserBlocked]: _(
+        help: _(msg`Press to retry`),
-        msg`The other user in this chat has blocked you.`,
+        cta: _(msg`Retry`),
-      ),
+      },
     }[item.code]
   }, [_, item.code])
 
@@ -35,39 +34,31 @@ export function MessageListError({item}: {item: ConvoItem & {type: 'error'}}) {
           a.flex_row,
           a.align_center,
           a.justify_between,
-          a.gap_lg,
+          a.gap_sm,
-          a.py_md,
+          a.pb_lg,
-          a.px_lg,
-          a.rounded_md,
-          t.atoms.bg_contrast_25,
           {maxWidth: 400},
         ]}>
-        <View style={[a.flex_row, a.align_start, a.justify_between, a.gap_sm]}>
+        <CircleInfo
-          <CircleInfo
+          size="sm"
-            size="sm"
+          fill={t.palette.negative_400}
-            fill={t.palette.negative_400}
+          style={[{top: 3}]}
-            style={[{top: 3}]}
+        />
-          />
-          <View style={[a.flex_1, {maxWidth: 240}]}>
-            <Text style={[a.leading_snug]}>{message}</Text>
-          </View>
-        </View>
 
-        {item.retry && (
+        <Text style={[a.leading_snug, a.flex_1, t.atoms.text_contrast_medium]}>
-          <Button
+          {description} &middot;{' '}
-            label={_(msg`Press to retry`)}
+          {item.retry && (
-            size="small"
+            <InlineLinkText
-            variant="ghost"
+              to="#"
-            color="secondary"
+              label={help}
-            onPress={e => {
+              onPress={e => {
-              e.preventDefault()
+                e.preventDefault()
-              item.retry?.()
+                item.retry?.()
-              return false
+                return false
-            }}>
+              }}>
-            <ButtonText>{_(msg`Retry`)}</ButtonText>
+              {cta}
-            <ButtonIcon icon={Refresh} position="right" />
+            </InlineLinkText>
-          </Button>
+          )}
-        )}
+        </Text>
       </View>
     </View>
   )

src/screens/Messages/Conversation/MessageListFirehoseError.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {ConvoItem} from '#/state/messages/convo/types'
-import {atoms as a, useTheme} from '#/alf'
-import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
-import {InlineLinkText} from '#/components/Link'
-import {Text} from '#/components/Typography'
-
-export function MessageListFirehoseError({
-  item,
-}: {
-  item: ConvoItem & {type: 'firehose-error'}
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-
-  return (
-    <View style={[a.py_lg, a.align_center]}>
-      <View
-        style={[
-          a.flex_row,
-          a.align_center,
-          a.justify_between,
-          a.gap_sm,
-          {maxWidth: 400},
-        ]}>
-        <CircleInfo
-          size="sm"
-          fill={t.palette.negative_400}
-          style={[{top: 3}]}
-        />
-
-        <Text style={[a.leading_snug, a.flex_1, t.atoms.text_contrast_medium]}>
-          {_(msg`This chat was disconnected`)} &middot;{' '}
-          {item.retry && (
-            <InlineLinkText
-              to="#"
-              label={_(msg`Press to attempt reconnection`)}
-              onPress={e => {
-                e.preventDefault()
-                item.retry?.()
-                return false
-              }}>
-              {_(msg`Reconnect`)}
-            </InlineLinkText>
-          )}
-        </Text>
-      </View>
-    </View>
-  )
-}

src/screens/Messages/Conversation/MessagesList.tsx

@@ -15,7 +15,6 @@ import {isWeb} from 'platform/detection'
 import {List} from 'view/com/util/List'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
-import {MessageListFirehoseError} from '#/screens/Messages/Conversation/MessageListFirehoseError'
 import {atoms as a} from '#/alf'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {Loader} from '#/components/Loader'
@@ -42,8 +41,6 @@ function renderItem({item}: {item: ConvoItem}) {
     return <Text>Deleted message</Text>
   } else if (item.type === 'error') {
     return <MessageListError item={item} />
-  } else if (item.type === 'firehose-error') {
-    return <MessageListFirehoseError item={item} />
   }
 
   return null

src/state/messages/convo/agent.ts

@@ -1007,8 +1007,9 @@ export class Convo {
 
     if (this.firehoseError) {
       items.push({
-        type: 'firehose-error',
+        type: 'error',
-        key: 'firehose-error',
+        code: ConvoItemError.FirehoseFailed,
+        key: ConvoItemError.FirehoseFailed,
         retry: () => {
           this.firehoseError?.retry()
         },

src/state/messages/convo/types.ts

@@ -23,10 +23,6 @@ export enum ConvoStatus {
 }
 
 export enum ConvoItemError {
-  /**
-   * Generic error
-   */
-  Unknown = 'unknown',
   /**
    * Error connecting to event firehose
    */
@@ -35,10 +31,6 @@ export enum ConvoItemError {
    * Error fetching past messages
    */
   HistoryFailed = 'historyFailed',
-  /**
-   * Recipient is blocking the user
-   */
-  UserBlocked = 'userBlocked',
 }
 
 export enum ConvoErrorCode {
@@ -123,14 +115,6 @@ export type ConvoItem =
        */
       retry?: () => void
     }
-  | {
-      type: 'firehose-error'
-      key: string
-      /**
-       * If present, error is recoverable.
-       */
-      retry?: () => void
-    }
 
 type DeleteMessage = (messageId: string) => Promise<void>
 type SendMessage = (