Pre-web image changes refactor (#560)

* Pre-web image changes refactor

* Remove unneeded async behavior

src/lib/media/alt-text.ts

@@ -1,20 +1,12 @@
 import {RootStoreModel} from 'state/index'
+import {ImageModel} from 'state/models/media/image'
 
 export async function openAltTextModal(
   store: RootStoreModel,
-  prevAltText: string,
+  image: ImageModel,
-): Promise<string> {
+) {
-  return new Promise((resolve, reject) => {
+  store.shell.openModal({
-    store.shell.openModal({
+    name: 'alt-text-image',
-      name: 'alt-text-image',
+    image,
-      prevAltText,
-      onAltTextSet: (altText?: string) => {
-        if (altText) {
-          resolve(altText)
-        } else {
-          reject(new Error('Canceled'))
-        }
-      },
-    })
   })
 }

src/state/models/media/image.ts

@@ -5,7 +5,6 @@ import {makeAutoObservable, runInAction} from 'mobx'
 import {openCropper} from 'lib/media/picker'
 import {POST_IMG_MAX} from 'lib/constants'
 import {scaleDownDimensions} from 'lib/media/util'
-import {openAltTextModal} from 'lib/media/alt-text'
 
 // TODO: EXIF embed
 // Cases to consider: ExternalEmbed
@@ -43,16 +42,8 @@ export class ImageModel implements RNImage {
     this.scaledHeight = height
   }
 
-  async setAltText() {
+  async setAltText(altText: string) {
-    try {
+    this.altText = altText
-      const altText = await openAltTextModal(this.rootStore, this.altText)
-
-      runInAction(() => {
-        this.altText = altText
-      })
-    } catch (err) {
-      this.rootStore.log.error('Failed to set alt text', err)
-    }
   }
 
   async crop() {

src/state/models/ui/shell.ts

@@ -4,6 +4,7 @@ import {makeAutoObservable} from 'mobx'
 import {ProfileModel} from '../content/profile'
 import {isObj, hasProp} from 'lib/type-guards'
 import {Image as RNImage} from 'react-native-image-crop-picker'
+import {ImageModel} from '../media/image'
 
 export interface ConfirmModal {
   name: 'confirm'
@@ -43,8 +44,7 @@ export interface CropImageModal {
 
 export interface AltTextImageModal {
   name: 'alt-text-image'
-  prevAltText: string
+  image: ImageModel
-  onAltTextSet: (altText?: string) => void
 }
 
 export interface AltTextImageReadModal {

src/view/com/composer/photos/Gallery.tsx

@@ -9,12 +9,15 @@ import {ImageModel} from 'state/models/media/image'
 import {Image} from 'expo-image'
 import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb} from 'platform/detection'
+import {openAltTextModal} from 'lib/media/alt-text'
+import {useStores} from 'state/index'
 
 interface Props {
   gallery: GalleryModel
 }
 
 export const Gallery = observer(function ({gallery}: Props) {
+  const store = useStores()
   const getImageStyle = useCallback(() => {
     let side: number
 
@@ -34,9 +37,9 @@ export const Gallery = observer(function ({gallery}: Props) {
   const handleAddImageAltText = useCallback(
     (image: ImageModel) => {
       Keyboard.dismiss()
-      gallery.setAltText(image)
+      openAltTextModal(store, image)
     },
-    [gallery],
+    [store],
   )
   const handleRemovePhoto = useCallback(
     (image: ImageModel) => {

src/view/com/modals/AltImage.tsx

@@ -11,24 +11,25 @@ import {TouchableOpacity} from 'react-native-gesture-handler'
 import LinearGradient from 'react-native-linear-gradient'
 import {useStores} from 'state/index'
 import {isDesktopWeb} from 'platform/detection'
+import {ImageModel} from 'state/models/media/image'
 
 export const snapPoints = ['80%']
 
 interface Props {
-  prevAltText: string
+  image: ImageModel
-  onAltTextSet: (altText?: string | undefined) => void
 }
 
-export function Component({prevAltText, onAltTextSet}: Props) {
+export function Component({image}: Props) {
   const pal = usePalette('default')
   const store = useStores()
   const theme = useTheme()
-  const [altText, setAltText] = useState(prevAltText)
+  const [altText, setAltText] = useState(image.altText)
 
   const onPressSave = useCallback(() => {
-    onAltTextSet(altText)
+    setAltText(altText)
+    image.setAltText(altText)
     store.shell.closeModal()
-  }, [store, altText, onAltTextSet])
+  }, [store, image, altText])
 
   const onPressCancel = () => {
     store.shell.closeModal()