From bd80db619b5a8c35171a8c70bdbab33d53a81371 Mon Sep 17 00:00:00 2001
From: Ollie H <renahlee@outlook.com>
Date: Tue, 2 May 2023 14:27:00 -0700
Subject: [PATCH] Pre-web image changes refactor (#560)

* Pre-web image changes refactor

* Remove unneeded async behavior
---
 src/lib/media/alt-text.ts                | 20 ++++++--------------
 src/state/models/media/image.ts          | 13 ++-----------
 src/state/models/ui/shell.ts             |  4 ++--
 src/view/com/composer/photos/Gallery.tsx |  7 +++++--
 src/view/com/modals/AltImage.tsx         | 13 +++++++------
 5 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/src/lib/media/alt-text.ts b/src/lib/media/alt-text.ts
index 77b0be44..4109f667 100644
--- a/src/lib/media/alt-text.ts
+++ b/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,
-): Promise<string> {
-  return new Promise((resolve, reject) => {
-    store.shell.openModal({
-      name: 'alt-text-image',
-      prevAltText,
-      onAltTextSet: (altText?: string) => {
-        if (altText) {
-          resolve(altText)
-        } else {
-          reject(new Error('Canceled'))
-        }
-      },
-    })
+  image: ImageModel,
+) {
+  store.shell.openModal({
+    name: 'alt-text-image',
+    image,
   })
 }
diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts
index d989380d..dcd47665 100644
--- a/src/state/models/media/image.ts
+++ b/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() {
-    try {
-      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 setAltText(altText: string) {
+    this.altText = altText
   }
 
   async crop() {
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 98e98ef8..5942ec10 100644
--- a/src/state/models/ui/shell.ts
+++ b/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
-  onAltTextSet: (altText?: string) => void
+  image: ImageModel
 }
 
 export interface AltTextImageReadModal {
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index e2d95b2a..1aa0aef7 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/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) => {
diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx
index ba05a7d6..ce0a675a 100644
--- a/src/view/com/modals/AltImage.tsx
+++ b/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
-  onAltTextSet: (altText?: string | undefined) => void
+  image: ImageModel
 }
 
-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()