Site Settings: Hide the delete site notice if the site is not loaded yet

[Tug]

This fixes an error reported by @drewblaisdell in D979:

If local storage is empty, before sites-list is loaded, we display a warning without a domain.

Testing instructions:

• Go to http://calypso.localhost:3000/settings/delete-site/:site
• Clean your localStorage with localStorage.clear();
• Reload the page
• Assert that the notice is not displayed until the sites are loaded

Review:

• Code Review
• Product Review

[mtias]

This doesn't seem a great way to handle these — we should just not render the notice.

[stephanethomas]

I agree with Matias. We could do something like the following:

{ site &&
  <Notice status="is-warning" showDismiss={ false }>
    { this.translate( '{{strong}}%(domain)s{{/strong}} will be unavailable in the future.', {
      components: {
        strong: <strong />
      },
      args: {
        domain: site.domain
      }
    } ) }
  </Notice>
}

[mtias]

Yes, that seems better.

[Tug]

I changed the way the notice is rendered following @mtias advice, PR is ready to be reviewed again!

[drewblaisdell]

👍

[stephanethomas]

You could reduce the length of this function by doing the opposite - which I find more logic by the way:

renderNotice: function() {
  var site = this.state.site;

  if ( site ) {
    return (
      <Notice status="is-warning" showDismiss={ false }>
        { this.translate( '{{strong}}%(domain)s{{/strong}} will be unavailable in the future.', {
          components: {
            strong: <strong />
          },
          args: {
            domain: site.domain
          }
        } ) }
      </Notice>
    );
  }
},

[drewblaisdell]

I'm not sure if there is a benefit either way, but if it is arbitrary, my preference is for the way @Tug implemented it, because:

• It works with multiple conditions that bail out early (example from ManagePurchase):

if ( ! isRenewable( purchase ) && ! isRedeemable( purchase ) ) {
    return null;
}

if ( ! isExpired( purchase ) ) {
    return null;
}

• It's easier (for me) to read JSX that isn't wrapped in an extra block/blocks.

[scruffian]

LGTM 👍