Prevent state reset

Question

I have an application that allows the user to upload photos, to edit them (crop, zoom and rotate) and to download.

I'm trying to add a preview mode, so the user can see how the file he's downloading will look like.

What I did works fine except for one thing - when the user clicks on the Clear Preview button the photos go back to their original state (the state is being reset on Clear Preview button click), without keeping the changes the user made to them.

Any idea what am I missing and how to prevent the state reset?

export default function ImagesGrid() {
  const classes = useStyles({})
  const {
    photos,
    preparePhotos,
    checkUnusedSuppliedTags,
    usedTagsList,
    suppliedTags
  } = useContext(SitePhotosContext)

  const taggedPhotos = photos.filter(photo => photo.tags.length)
  const pages = Math.ceil(taggedPhotos.length / 6)
  const [isPreviewMode, setIsPreviewMode] = useState(false)
  const [preparedPhotos, setPreparedPhotos] = useState([])
  const renderedPhotos = isPreviewMode ? preparedPhotos : photos
  let countColor: TypographyProps['color'] = 'initial'

  const tags = usedTagsList.concat(
    checkUnusedSuppliedTags(usedTagsList, suppliedTags)
  )

  useEffect(() => {
    preparePhotos(photos).then(photos => setPreparedPhotos(photos))
  }, [photos])

  return (
    
      
        
          {!isPreviewMode ? (
            
              
                {`${taggedPhotos.length} Tagged Photos / ${pages} Pages`}
              
              {taggedPhotos.length === 0 && (
                
                  Tag some photos to generate a report
                
              )}
            
          ) : (
            
          )}
          
        
      
      

        {renderedPhotos.map(photo => (
          
            
          
        ))}
      
    
  )
}

DownloadAndPreview component:

export default function DownloadAndPreview({
  isPreviewMode,
  setIsPreviewMode,
  tags
}) {
  const classes = useStyles({})
  const generatorRef = useRef()
  const {photos} = useContext(SitePhotosContext)

  return (
    <>
      {!isPreviewMode ? (
        
      ) : (
        
          
          
        
      )}
    
  )
}

component:

export default function Image({photo, mode}: {photo: ImageItem; mode: string}) {
  const classes = useStyles({})
  const {
    setImageEditData
  } = useContext(SitePhotosContext)

  return mode === 'editor' ? (
    
      {!photo.src && (
        Loading {photo.data?.name}...
      )}

      
         {
            setImageEditData(photo.id, editData)
          }}
        />
      
    
  ) : (
    
      
      {photo.tags.join(' / ')}
    
  )
}

component:

export default function ImageEditor({
  photo,
  onEditComplete,
  showControls
}: editorProps) {
  const classes = useStyles({})
  const [crop, setCrop] = useState({x: 0, y: 0})

  const [rotation, setRotation] = useState(0)
  const [zoom, setZoom] = useState(1)

  const onCropComplete = useCallback(
    (croppedArea, croppedAreaPixels) => {
      const editSettings: editData = {crop: croppedAreaPixels, rotate: rotation}
      onEditComplete(editSettings)
    },
    [rotation, onEditComplete]
  )

  return (
    <>
      
        
      
      {showControls && (
        
           setRotation(rotation => rotation - 90)}
          >
            
          
          
            
             setZoom(zoom)}
            />
            
          
           setRotation(rotation => rotation + 90)}
          >
            
          
        
      )}
    
  )
}

context functions:

  const preparePhotos = async (photos: PhotoList) => {
    const res = photos
      .filter(photo => photo.tags.length)
      .sort(sortByPriority)

    if (res.length % 2) res.pop()

    const edittedPhotos = await Promise.all(res.map(editImage))
    return edittedPhotos
  }

  const setImageEditData = (id, editData) => {
    setPhotos(photos =>
      photos.map(photo => {
        if (photo.id === id) {
          return {...photo, editData}
        }
        return photo
      })
    )
  }

  const editImage = async (image: ImageItem) => {
    if (!image.editData) return image
    const {crop, rotate} = image.editData
    const edittedImage = await cropAndRotateImage(image.src, crop, rotate)
    return {
      ...image,
      src: edittedImage,
      dimensions: {width: crop.width, height: crop.height}
    }
  }

Expected behavior is similar to this: https://codesandbox.io/s/react-easy-crop-custom-image-demo-y09komm059?from-embed=&file=/src/index.js:3141-3151

After the user closes the preview modal the photo stay in the same position it was - before clicking on the preview button. (What by me - it doesn't)

x00 · Accepted Answer

Your question still lacks some vital information. But let me guess...

Let's assume that you're using https://github.com/ricardo-ch/react-easy-crop (It's just the first library I came across, but even if you're using another library, I suppose, they mostly work the same way).
If so, then on every rerender calls onCropComplete. And it rerenders every time you switch into editor-mode.
On image load react-easy-crop sets crop, rotation and zoom to respective values passed to which you hold in component's state.

But here

function Image(...) {
  ...
  return mode === 'editor' ? ( ...  ... ) : ( ... )
}

you loose component's state on every mode switch.

As a result: when you switch from preview-mode into editor-mode receives default values for crop, rotation and zoom, calls onCropComplete and your implementation of onCropComplete sets editData to these default values.

There are several ways to fix this. But the main issue, as I see it, is that you don't have a single source of truth for photo's editData. So I think you should get rid of component's state and instead pass editData to the . Like so:

^{You don't have a minimal reproducible example, so I can't test it. For this to works you should probably at least add some default values for photo.editData}

Prevent state reset

Answers (2)

Related Questions