WIP(CX-2493): photo added in edit mode not displayed in my collection

src/app/Scenes/MyCollection/Components/MyCollectionImageView.tests.tsx

@@ -12,7 +12,6 @@ describe("MyCollectionImageView", () => {
       imageHeight: 100,
       aspectRatio: 1,
       imageURL: "https://some-url/:version.jpg",
-      artworkSlug: "some-slug",
     }
     const { getAllByTestId } = renderWithWrappersTL(<MyCollectionImageView {...props} />)
     expect(getAllByTestId("Image-Remote")).toBeDefined()
@@ -23,7 +22,6 @@ describe("MyCollectionImageView", () => {
       imageWidth: 100,
       imageHeight: 100,
       aspectRatio: 1,
-      artworkSlug: "some-slug",
     }
     const localImageStoreMock = jest.spyOn(LocalImageStore, "retrieveLocalImages")
     const localImage: LocalImage = {
@@ -50,7 +48,6 @@ describe("MyCollectionImageView", () => {
       imageWidth: 100,
       imageHeight: 100,
       aspectRatio: 1,
-      artworkSlug: "some-slug",
     }
     const localImageStoreMock = jest.spyOn(LocalImageStore, "retrieveLocalImages")
     const retrievalPromise = new Promise<LocalImage[] | null>((resolve) => {

src/app/Scenes/MyCollection/Components/MyCollectionImageView.tsx

@@ -1,45 +1,25 @@
 import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
-import { Photo } from "app/Scenes/SellWithArtsy/SubmitArtwork/UploadPhotos/validation"
-import { GlobalStore } from "app/store/GlobalStore"
-import { LocalImage, retrieveLocalImages } from "app/utils/LocalImageStore"
+import { LocalImage } from "app/utils/LocalImageStore"
 import { Flex, NoImageIcon, useColor } from "palette"
-import React, { useEffect, useState } from "react"
+import React from "react"
 import { Image as RNImage } from "react-native"
 
 export interface MyCollectionImageViewProps {
   imageURL?: string
   imageWidth: number
   imageHeight?: number
   aspectRatio?: number
-  artworkSlug: string
+  localImage?: LocalImage
 }
 
 export const MyCollectionImageView: React.FC<MyCollectionImageViewProps> = ({
   imageURL,
   imageWidth,
   imageHeight,
   aspectRatio,
-  artworkSlug,
+  localImage,
 }) => {
   const color = useColor()
-  const [localImage, setLocalImage] = useState<LocalImage | null>(null)
-  const [localImageConsignments, setLocalImageConsignments] = useState<Photo | null>(null)
-
-  useEffect(() => {
-    retrieveLocalImages(artworkSlug).then((images) => {
-      if (images && images.length > 0) {
-        setLocalImage(images[0])
-      }
-    })
-  }, [])
-  const { photos } = GlobalStore.useAppState(
-    (state) => state.artworkSubmission.submission.photosForMyCollection
-  )
-  useEffect(() => {
-    if (photos !== null && photos.length > 0) {
-      setLocalImageConsignments(photos[0])
-    }
-  }, [])
 
   const renderImage = () => {
     if (!!imageURL) {
@@ -54,7 +34,7 @@ export const MyCollectionImageView: React.FC<MyCollectionImageViewProps> = ({
           aspectRatio={aspectRatio}
         />
       )
-    } else if (localImage) {
+    } else if (!!localImage) {
       return (
         <RNImage
           testID="Image-Local"
@@ -66,25 +46,8 @@ export const MyCollectionImageView: React.FC<MyCollectionImageViewProps> = ({
           source={{ uri: localImage.path }}
         />
       )
-    } else if (localImageConsignments) {
-      return (
-        <RNImage
-          testID="Image-Local"
-          style={{
-            width: imageWidth,
-            height:
-              (imageWidth / (localImageConsignments.width || 120)) *
-              (localImageConsignments.height || 120),
-          }}
-          resizeMode="contain"
-          source={{
-            uri: localImageConsignments.path,
-          }}
-        />
-      )
     } else {
       const width = imageWidth ?? 120
-
       return (
         <Flex
           testID="Fallback"

src/app/Scenes/MyCollection/Screens/ArtworkForm/MyCollectionArtworkForm.tsx

@@ -100,7 +100,7 @@ export const MyCollectionArtworkForm: React.FC<MyCollectionArtworkFormProps> = (
         currencyPreference: preferredCurrency,
         lengthUnitPreference: preferredMetric.toUpperCase() as LengthUnitPreference,
       })
-      await updateArtwork(values, dirtyFormCheckValues, props)
+      await updateArtwork(values, dirtyFormCheckValues, props) // here
     } catch (e) {
       if (__DEV__) {
         console.error(e)
@@ -288,12 +288,18 @@ export const updateArtwork = async (
       ...explicitlyClearedFields(others, dirtyFormCheckValues),
     })
 
+    const slug = response.myCollectionUpdateArtwork?.artworkOrError?.artwork?.slug
+
     const deletedImages = deletedPhotos(dirtyFormCheckValues.photos, photos)
     for (const photo of deletedImages) {
       await deleteArtworkImage(props.artwork.internalID, photo.id)
+      if (slug) {
+        await removeLocalPhotos(slug)
+      }
     }
-    const slug = response.myCollectionUpdateArtwork?.artworkOrError?.artwork?.slug
-    if (slug) {
+    if (slug && externalImageUrls.length > 0) {
+      storeLocalPhotos(slug, photos)
+    } else if (slug) {
       removeLocalPhotos(slug)
     }
   }

src/app/Scenes/MyCollection/Screens/ArtworkList/MyCollectionArtworkGridItem.tsx

@@ -6,9 +6,10 @@ import HighDemandIcon from "app/Icons/HighDemandIcon"
 import { navigate } from "app/navigation/navigate"
 import { useFeatureFlag } from "app/store/GlobalStore"
 import { isPad } from "app/utils/hardware"
+import { LocalImage, retrieveLocalImages } from "app/utils/LocalImageStore"
 import { useScreenDimensions } from "app/utils/useScreenDimensions"
 import { Box, Flex, Text } from "palette"
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { View } from "react-native"
 import { createFragmentContainer, graphql } from "react-relay"
 import { useTracking } from "react-tracking"
@@ -26,7 +27,10 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
     (artwork.images && artwork.images[0]?.url)
   const { width } = useScreenDimensions()
 
-  const { artist, artistNames, internalID, medium, slug, title, image, date } = artwork
+  const { artist, artistNames, internalID, medium, slug, title, image, date, submissionId } =
+    artwork
+
+  const [localImage, setLocalImage] = useState<LocalImage | null>(null)
 
   // consistent with how sections are derived in InfiniteScrollArtworksGrid
   const screen = useScreenDimensions()
@@ -41,6 +45,35 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
 
   const showHighDemandIcon = isP1Artist && isHighDemand
 
+  async function getLocalImages() {
+    console.log("LOGD IN USEEFFECT")
+    const [localVanillaArtworkImages, localSubmissionArtworkImages] = await Promise.all([
+      retrieveLocalImages(slug),
+      submissionId ? retrieveLocalImages(submissionId) : undefined,
+    ])
+
+    const mappedLocalImages =
+      (localVanillaArtworkImages || localSubmissionArtworkImages)?.map((i) => ({
+        path: i.path,
+        width: i.width,
+        height: i.height,
+      })) ?? null
+    if (mappedLocalImages) {
+      setLocalImage(mappedLocalImages[0])
+    }
+  }
+
+  // LOOPS when localImage is present
+  /*   useEffect(() => {
+    getLocalImages()
+  }, [getLocalImages])  */
+
+  // Works only if I update the existed image
+  // Doesn't work when I add an image to the artrork without images or remove all images from the artwrok
+  useEffect(() => {
+    getLocalImages()
+  }, [artwork])
+
   return (
     <TouchElement
       onPress={() => {
@@ -58,11 +91,13 @@ const MyCollectionArtworkGridItem: React.FC<MyCollectionArtworkGridItemProps> =
       }}
     >
       <View>
+        {console.log("LOGD grid ")}
+
         <MyCollectionImageView
           imageWidth={imageWidth}
           imageURL={imageURL ?? undefined}
+          localImage={localImage ?? undefined}
           aspectRatio={image?.aspectRatio}
-          artworkSlug={slug}
         />
         <Box maxWidth={width} mt={1} style={{ flex: 1 }}>
           <Text lineHeight="18" weight="regular" variant="xs" numberOfLines={2}>
@@ -109,6 +144,7 @@ export const MyCollectionArtworkGridItemFragmentContainer = createFragmentContai
         artistNames
         medium
         slug
+        submissionId
         title
         date
         marketPriceInsights {

src/app/Scenes/MyCollection/mutations/deleteArtworkImage.ts

@@ -39,6 +39,9 @@ export function deleteArtworkImage(artworkID: string, imageID: string) {
           resolve(response)
         }
       },
+      /* updater: (store) => {
+        store.get(imageID)?.invalidateRecord()
+      }, */
       onError: reject,
     })
   })

src/app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/ArtworkDetailsForm.tsx

@@ -40,7 +40,7 @@ export const ArtworkDetailsForm: React.FC = () => {
       <ArtistAutosuggest />
       <StandardSpace />
       <Input
-        title="Title"
+        title="Title erererer"
         placeholder="Add Title or Write 'Unknown'"
         testID="Submission_TitleInput"
         value={values.title}