From 02378dddb35a06b2aee9535530c5dc2741554ae7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 1 Oct 2024 19:04:59 +0900
Subject: [PATCH] Derive images state from composer state

Co-authored-by: Mary <git@mary.my.id>
---
 src/view/com/composer/Composer.tsx       | 19 ++++++++++---------
 src/view/com/composer/photos/Gallery.tsx | 17 ++---------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 8fafa36ace..f354f0f0dc 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -67,7 +67,7 @@ import {logger} from '#/logger'
 import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {emitPostCreated} from '#/state/events'
-import {ComposerImage, createInitialImages, pasteImage} from '#/state/gallery'
+import {ComposerImage, pasteImage} from '#/state/gallery'
 import {useModalControls} from '#/state/modals'
 import {useModals} from '#/state/modals'
 import {useRequireAltTextEnabled} from '#/state/preferences'
@@ -128,6 +128,8 @@ type CancelRef = {
   onPressCancel: () => void
 }
 
+const NO_IMAGES: ComposerImage[] = []
+
 type Props = ComposerOpts
 export const ComposePost = ({
   replyTo,
@@ -215,16 +217,16 @@ export const ComposePost = ({
     )
   const [postgate, setPostgate] = useState(createPostgateRecord({post: ''}))
 
-  const [images, setImages] = useState<ComposerImage[]>(() =>
-    createInitialImages(initImageUris),
-  )
-
-  // Not used yet.
+  // TODO: Move more state here.
   const [composerState, dispatch] = useReducer(
     composerReducer,
     {initImageUris},
     createComposerState,
   )
+  let images = NO_IMAGES
+  if (composerState.embed.media?.type === 'images') {
+    images = composerState.embed.media.images
+  }
 
   const onClose = useCallback(() => {
     closeComposer()
@@ -311,13 +313,12 @@ export const ComposePost = ({
 
   const onImageAdd = useCallback(
     (next: ComposerImage[]) => {
-      setImages(prev => prev.concat(next.slice(0, MAX_IMAGES - prev.length)))
       dispatch({
         type: 'embed_add_images',
         images: next,
       })
     },
-    [setImages, dispatch],
+    [dispatch],
   )
 
   const onPhotoPasted = useCallback(
@@ -733,7 +734,7 @@ export const ComposePost = ({
             />
           </View>
 
-          <Gallery images={images} onChange={setImages} dispatch={dispatch} />
+          <Gallery images={images} dispatch={dispatch} />
           {images.length === 0 && extLink && (
             <View style={a.relative}>
               <ExternalEmbed
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 734698d06b..5692f3d2c9 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -29,7 +29,6 @@ const IMAGE_GAP = 8
 
 interface GalleryProps {
   images: ComposerImage[]
-  onChange: (next: ComposerImage[]) => void
   dispatch: (action: ComposerAction) => void
 }
 
@@ -58,12 +57,7 @@ interface GalleryInnerProps extends GalleryProps {
   containerInfo: Dimensions
 }
 
-const GalleryInner = ({
-  images,
-  containerInfo,
-  onChange,
-  dispatch,
-}: GalleryInnerProps) => {
+const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
   const {isMobile} = useWebMediaQueries()
 
   const {altTextControlStyle, imageControlsStyle, imageStyle} =
@@ -103,7 +97,7 @@ const GalleryInner = ({
   return images.length !== 0 ? (
     <>
       <View testID="selectedPhotosView" style={styles.gallery}>
-        {images.map((image, index) => {
+        {images.map(image => {
           return (
             <GalleryItem
               key={image.source.id}
@@ -113,16 +107,9 @@ const GalleryInner = ({
               imageStyle={imageStyle}
               onChange={next => {
                 dispatch({type: 'embed_update_image', image: next})
-                onChange(
-                  images.map(i => (i.source === image.source ? next : i)),
-                )
               }}
               onRemove={() => {
-                const next = images.slice()
-                next.splice(index, 1)
-
                 dispatch({type: 'embed_remove_image', image})
-                onChange(next)
               }}
             />
           )