Fix #672

Removed image focus as different clients implement this differently

src/i18n/en/screens/compose.json

@@ -153,8 +153,7 @@
         "altText": {
           "heading": "Describe media for the visually impaired",
           "placeholder": "You can add a description, sometimes called alt-text, to your media so they are accessible to even more people, including those who are blind or visually impaired.\n\nGood descriptions are concise, but present what is in your media accurately enough to understand their context."
-        },
-        "imageFocus": "Drag the focus circle to update focus point"
+        }
       }
     },
     "draftsList": {

src/screens/Compose/EditAttachment.tsx

@@ -1,12 +1,14 @@
 import haptics from '@components/haptics'
 import { HeaderLeft, HeaderRight } from '@components/Header'
+import CustomText from '@components/Text'
 import apiInstance from '@utils/api/instance'
 import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, KeyboardAvoidingView, Platform } from 'react-native'
+import { Alert, KeyboardAvoidingView, Platform, ScrollView, TextInput } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import ComposeEditAttachmentRoot from './EditAttachment/Root'
 import ComposeContext from './utils/createContext'
 
 const ComposeEditAttachment: React.FC<
@@ -17,12 +19,17 @@ const ComposeEditAttachment: React.FC<
     params: { index }
   }
 }) => {
+  const { colors } = useTheme()
   const { t } = useTranslation('screenCompose')
 
-  const { composeState } = useContext(ComposeContext)
+  const { composeState, composeDispatch } = useContext(ComposeContext)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const theAttachment = composeState.attachments.uploads[index].remote!
+  const theAttachment = composeState.attachments.uploads[index].remote
+  if (!theAttachment) {
+    navigation.goBack()
+    return null
+  }
 
   useEffect(() => {
     navigation.setOptions({
@@ -37,6 +44,12 @@ const ComposeEditAttachment: React.FC<
           content='Save'
           loading={isSubmitting}
           onPress={() => {
+            if (composeState.type === 'edit') {
+              composeDispatch({ type: 'attachment/edit', payload: { ...theAttachment } })
+              navigation.goBack()
+              return
+            }
+
             setIsSubmitting(true)
             const formData = new FormData()
             if (theAttachment.description) {
@@ -80,8 +93,53 @@ const ComposeEditAttachment: React.FC<
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       style={{ flex: 1 }}
     >
-      <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
-        <ComposeEditAttachmentRoot index={index} />
+      <SafeAreaView
+        style={{ flex: 1, padding: StyleConstants.Spacing.Global.PagePadding }}
+        edges={['left', 'right', 'bottom']}
+      >
+        <ScrollView>
+          <CustomText fontStyle='M' style={{ color: colors.primaryDefault }} fontWeight='Bold'>
+            {t('content.editAttachment.content.altText.heading')}
+          </CustomText>
+          <TextInput
+            style={{
+              height:
+                StyleConstants.Font.Size.M * 11 + StyleConstants.Spacing.Global.PagePadding * 2,
+              ...StyleConstants.FontStyle.M,
+              marginTop: StyleConstants.Spacing.M,
+              marginBottom: StyleConstants.Spacing.S,
+              padding: StyleConstants.Spacing.Global.PagePadding,
+              borderWidth: 1,
+              borderColor: colors.border,
+              color: colors.primaryDefault
+            }}
+            maxLength={1500}
+            multiline
+            onChangeText={e =>
+              composeDispatch({
+                type: 'attachment/edit',
+                payload: {
+                  ...theAttachment,
+                  description: e
+                }
+              })
+            }
+            placeholder={t('content.editAttachment.content.altText.placeholder')}
+            placeholderTextColor={colors.secondary}
+            value={theAttachment.description}
+          />
+          <CustomText
+            fontStyle='S'
+            style={{
+              textAlign: 'right',
+              marginRight: StyleConstants.Spacing.S,
+              marginBottom: StyleConstants.Spacing.M,
+              color: colors.secondary
+            }}
+          >
+            {theAttachment.description?.length || 0} / 1500
+          </CustomText>
+        </ScrollView>
       </SafeAreaView>
     </KeyboardAvoidingView>
   )