MobX removal take 2 (#5381)

* mobx removal take 2

* Actually rm mobx

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 16 insertions, 13 deletions

diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx
index ba489cde7..c711f73a5 100644
--- a/src/view/com/modals/AltImage.tsx
+++ b/src/view/com/modals/AltImage.tsx
@@ -13,6 +13,7 @@ import {LinearGradient} from 'expo-linear-gradient'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {ComposerImage} from '#/state/gallery'
 import {useModalControls} from '#/state/modals'
 import {MAX_ALT_TEXT} from 'lib/constants'
 import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
@@ -21,21 +22,21 @@ import {enforceLen} from 'lib/strings/helpers'
 import {gradients, s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {isAndroid, isWeb} from 'platform/detection'
-import {ImageModel} from 'state/models/media/image'
 import {Text} from '../util/text/Text'
 import {ScrollView, TextInput} from './util'
 
 export const snapPoints = ['100%']
 
 interface Props {
-  image: ImageModel
+  image: ComposerImage
+  onChange: (next: ComposerImage) => void
 }
 
-export function Component({image}: Props) {
+export function Component({image, onChange}: Props) {
   const pal = usePalette('default')
   const theme = useTheme()
   const {_} = useLingui()
-  const [altText, setAltText] = useState(image.altText)
+  const [altText, setAltText] = useState(image.alt)
   const windim = useWindowDimensions()
   const {closeModal} = useModalControls()
   const inputRef = React.useRef<RNTextInput>(null)
@@ -60,7 +61,8 @@ export function Component({image}: Props) {
 
   const imageStyles = useMemo<ImageStyle>(() => {
     const maxWidth = isWeb ? 450 : windim.width
-    if (image.height > image.width) {
+    const media = image.transformed ?? image.source
+    if (media.height > media.width) {
       return {
         resizeMode: 'contain',
         width: '100%',
@@ -70,7 +72,7 @@ export function Component({image}: Props) {
     }
     return {
       width: '100%',
-      height: (maxWidth / image.width) * image.height,
+      height: (maxWidth / media.width) * media.height,
       borderRadius: 8,
     }
   }, [image, windim])
@@ -79,15 +81,18 @@ export function Component({image}: Props) {
     (v: string) => {
       v = enforceLen(v, MAX_ALT_TEXT)
       setAltText(v)
-      image.setAltText(v)
     },
-    [setAltText, image],
+    [setAltText],
   )
 
   const onPressSave = useCallback(() => {
-    image.setAltText(altText)
+    onChange({
+      ...image,
+      alt: altText,
+    })
+
     closeModal()
-  }, [closeModal, image, altText])
+  }, [closeModal, image, altText, onChange])
 
   return (
     <ScrollView
@@ -101,9 +106,7 @@ export function Component({image}: Props) {
           <Image
             testID="selectedPhotoImage"
             style={imageStyles}
-            source={{
-              uri: image.cropped?.path ?? image.path,
-            }}
+            source={{uri: (image.transformed ?? image.source).path}}
             contentFit="contain"
             accessible={true}
             accessibilityIgnoresInvertColors