Wp-calypso: Images copied from external source do not show in media list

[notnownikki]

Steps to reproduce

1. Edit a blog post
2. Click the tinymce Add button
3. Select "Media from Google"
4. Select more than one image to copy
5. Click "Copy to media library" in the footer

What I expected

The WP library should appear with selected, transient images showing that your external images are being copied.

What happened instead

The transient images do not appear. The images _do_ get copied, but they're not appearing in the WP library list of images, until you manually refresh the list.

Browser / OS version

All / All

Context / Source

This still works in the media library at https://wordpress.com/media/your.blog.address , but it no longer works in the media model when editing a blog post.

The commit that broke this was https://github.com/Automattic/wp-calypso/commit/b1c4fef9e0 (the upgrade to react 16)

[gwwar]

After poking around a bit, it looks like the flux store is dispatching actions correctly but <MediaListData /> Isn't reflecting that for this case.

[notnownikki]

We found the exact problem, after a long headache inducing day :)

The problem is that when you set state on a component in React < 16, it would update all the child components, and then call any callback function you passed in to setState.

That let us change the state of the media library so it was showing your WP library, then do the upload of the external files, and they'd show up there just like any other upload.

In React 16, that no longer happens. The state is changed, the callback is called, and the child components update whenever they update. That means the components showing the uploading images either go into the wrong list, or they go into a list which is them promptly reset by a child component.

We have a quick-and-dirty fix for this in testing locally, and I'm looking at a longer term fix, although it's likely to get messy because we can't relay on the media model setting the state, and the child media list having that updated state when we start the image uploads.

[notnownikki]

Some further info... A good place to see this is in the media library, outside of editing a post. You can select images from the google source, and you'll see a copy button light up inside the library itself, not in the footer supplied by the media modal. That _works_! That's because it's not relying on any child elements updating their state. It's part of the media library, and setting the state has the intended effect.

[gwwar]

@notnownikki would you like to take over the investigation? I suspected order/batching changes was part of the issue, since console.logs appeared to be changing behavior.

A longer term solution would be porting this to redux, but that's a large project 😄

[notnownikki]

porting this to redux

I suddenly feel the need to drink.

Sure, I'll take over this one :)

[notnownikki]

This was fixed a while ago, forgot to close this, sorry!