Editor: Update page templates on theme change

[jeremeylduvall]

Fixes #5387

Ideally, we could move the page templates store to Redux, but this could act as a temporary fix. I connected the PageTemplatesData component to the currentTheme state. currentTheme is then passed in as a prop using getCurrentTheme. In componentWillReceiveProps, we're checking if this.props.currentTheme.stylesheet !== this.activeTheme. Both of these URLs will be in the format pub/hemingway-rewritten for free themes or premium/affinity for premium themes. If they're equal, nothing happens. If they're not equal, we trigger a fetch and update this.activeTheme accordingly so we don't refetch unnecessarily.

Using this.props.currentTheme.stylesheet feels a bit weird/non-intuitive, but it's the best comparison I could find since we're using theme_slug elsewhere as this.activeTheme. We don't have a corresponding theme_slug on in the theme details currently.

To Test

1. Checkout this branch and get it up and running
2. Activate "Scratchpad" on your site from http://calypso.localhost:3000/design/site.wordpress.com. Scratchpad doesn't have page templates.
3. Click "Add" to start a new page. Check under Page Options. You shouldn't see a page template option.
4. Navigate back to choose a new theme (don't refresh)
5. Activate Hemingway Rewritten (has page templates)
6. Click "Add" to start a new page and check under Page Options again. You should see page templates.

GIF

(I reversed the steps in the GIF)

[aduth]

@jeremeylduvall : What was the reason for switching this to "In Progress"? Is it ready for a proper review or did you run into issues?

[jeremeylduvall]

@aduth The current version does work. Had a few improvements in mind though after chatting with @drewblaisdell .

Since we now can monitor the theme from componentWillReceiveProps, I'm going to work on removing reference to this.activeTheme and compare this.props.currentTheme with nextProps.currentTheme. _fetchTemplatesIfThemeChanges is also redundant because we can decide if we should fetch new data when receiving props as well. Will work on those and get a new version up and running by tomorrow morning.

[jeremeylduvall]

Flipping this back to "Needs Review." I was hoping to remove reference to this.activeTheme and move most of the logic for when we should fetch new data to componentWillReceiveProps while removing the need for _fetchTemplatesIfThemeChanges().

I assume _fetchTemplatesIfThemeChanges() was introduced (back in 9579-gh-calypso-pre-oss) to update the page templates if a user has the editor open in one tab and changes themes in another tab. I thought I could remove this thinking nextProps.currentTheme would get the new theme in that circumstance, but it actually needs a refresh so my original idea won't work currently.

Everything mentioned in the original post (including how it works) still applies.

[aduth]

This should be checking nextProps I think, to compare the incoming theme against the currently tracked active theme.

[jeremeylduvall]

Thanks @aduth. Definitely correct. Updated now. I did leave the fetch as PageTemplatesActions.fetchPageTemplates( this.props.siteId ); instead of PageTemplatesActions.fetchPageTemplates( nextProps.siteId ); since this.props.siteId and nextProps.siteId would be equal at this stage.

[aduth]

Looks good 👍 Took for a spin and newly introduced fetching logic triggered as I'd have expected when returning to the page editor after switching themes.