[🐴] Error recovery (#4036)

* Handle block state when sending messages * Handle different pending failures * Use existing profile data to handle blocks * Better cleanup, leave room for more * Attempt recover upon next send * Reset pending failure * Capture unexpected error * Gracefully handle network errors and recovery * Re-align error components and types * Include history fetching in recoverable states
bluesky-social · May 16, 2024 · 4bceabc · 4bceabc
1 parent dff6bd7
commit 4bceabc
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 113 deletions.
diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
@@ -202,7 +202,7 @@ let MessageItemMetadata = ({
         )}
       </TimeElapsed>
 
-      {item.type === 'pending-message' && item.retry && (
+      {item.type === 'pending-message' && item.failed && (
         <>
           {' '}
           &middot;{' '}
@@ -214,15 +214,20 @@ let MessageItemMetadata = ({
               },
             ]}>
             {_(msg`Failed to send`)}
-          </Text>{' '}
-          &middot;{' '}
-          <InlineLinkText
-            label={_(msg`Click to retry failed message`)}
-            to="#"
-            onPress={handleRetry}
-            style={[a.text_xs]}>
-            {_(msg`Retry`)}
-          </InlineLinkText>
+          </Text>
+          {item.retry && (
+            <>
+              {' '}
+              &middot;{' '}
+              <InlineLinkText
+                label={_(msg`Click to retry failed message`)}
+                to="#"
+                onPress={handleRetry}
+                style={[a.text_xs]}>
+                {_(msg`Retry`)}
+              </InlineLinkText>
+            </>
+          )}
         </>
       )}
     </Text>

diff --git a/src/screens/Messages/Conversation/MessageListError.tsx b/src/screens/Messages/Conversation/MessageListError.tsx
@@ -5,27 +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-recoverable'}
-}) {
+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.Network]: _(
-        msg`There was an issue connecting to the chat.`,
-      ),
-      [ConvoItemError.FirehoseFailed]: _(
-        msg`This chat was disconnected due to a network error.`,
-      ),
-      [ConvoItemError.HistoryFailed]: _(msg`Failed to load past messages.`),
+      [ConvoItemError.FirehoseFailed]: {
+        description: _(msg`This chat was disconnected`),
+        help: _(msg`Press to attempt reconnection`),
+        cta: _(msg`Reconnect`),
+      },
+      [ConvoItemError.HistoryFailed]: {
+        description: _(msg`Failed to load past messages`),
+        help: _(msg`Press to retry`),
+        cta: _(msg`Retry`),
+      },
     }[item.code]
   }, [_, item.code])
 
@@ -36,37 +34,31 @@ export function MessageListError({
           a.flex_row,
           a.align_center,
           a.justify_between,
-          a.gap_lg,
-          a.py_md,
-          a.px_lg,
-          a.rounded_md,
-          t.atoms.bg_contrast_25,
+          a.gap_sm,
+          a.pb_lg,
           {maxWidth: 400},
         ]}>
-        <View style={[a.flex_row, a.align_start, a.justify_between, a.gap_sm]}>
-          <CircleInfo
-            size="sm"
-            fill={t.palette.negative_400}
-            style={[{top: 3}]}
-          />
-          <View style={[a.flex_1, {maxWidth: 200}]}>
-            <Text style={[a.leading_snug]}>{message}</Text>
-          </View>
-        </View>
+        <CircleInfo
+          size="sm"
+          fill={t.palette.negative_400}
+          style={[{top: 3}]}
+        />
 
-        <Button
-          label={_(msg`Press to retry`)}
-          size="small"
-          variant="ghost"
-          color="secondary"
-          onPress={e => {
-            e.preventDefault()
-            item.retry()
-            return false
-          }}>
-          <ButtonText>{_(msg`Retry`)}</ButtonText>
-          <ButtonIcon icon={Refresh} position="right" />
-        </Button>
+        <Text style={[a.leading_snug, a.flex_1, t.atoms.text_contrast_medium]}>
+          {description} &middot;{' '}
+          {item.retry && (
+            <InlineLinkText
+              to="#"
+              label={help}
+              onPress={e => {
+                e.preventDefault()
+                item.retry?.()
+                return false
+              }}>
+              {cta}
+            </InlineLinkText>
+          )}
+        </Text>
       </View>
     </View>
   )

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -46,7 +46,7 @@ function renderItem({item}: {item: ConvoItem}) {
     return <MessageItem item={item} />
   } else if (item.type === 'deleted-message') {
     return <Text>Deleted message</Text>
-  } else if (item.type === 'error-recoverable') {
+  } else if (item.type === 'error') {
     return <MessageListError item={item} />
   }