Skip to content

Commit

Permalink
Checklists: Clean up and organize (#26554)
Browse files Browse the repository at this point in the history 
* Connect checklist share to dispatch actions

* Use ternary expressions over conditional methods

* Inline simple jsx

* Shorten mapStateToProps

* Use named isEnabled export

* Use lodash.some over lodash.find

* Use props in render method, don't pass as arguments
  • Loading branch information
@sirreal
sirreal authored Aug 16, 2018
1 parent faf755e commit 7ce3113
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 82 deletions.
119 changes: 43 additions & 76 deletions client/my-sites/checklist/main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,27 @@
import page from 'page';
import React, { Fragment, PureComponent } from 'react';
import { connect } from 'react-redux';
import { find, some } from 'lodash';
import { localize } from 'i18n-calypso';
import { some } from 'lodash';

/**
* Internal dependencies
*/
import ChecklistShow from './checklist-show';
import ChecklistShowShare from './share';
import config from 'config';
import DocumentHead from 'components/data/document-head';
import EmptyContent from 'components/empty-content';
import FormattedHeader from 'components/formatted-header';
import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
import isSiteOnFreePlan from 'state/selectors/is-site-on-free-plan';
import Main from 'components/main';
import PageViewTracker from 'lib/analytics/page-view-tracker';
import QuerySiteChecklist from 'components/data/query-site-checklist';
import SidebarNavigation from 'my-sites/sidebar-navigation';
import { getCurrentUser } from 'state/current-user/selectors';
import { getSelectedSiteId } from 'state/ui/selectors';
import { isJetpackSite, isNewSite, getSiteSlug } from 'state/sites/selectors';
import { recordTracksEvent } from 'state/analytics/actions';
import isSiteOnFreePlan from 'state/selectors/is-site-on-free-plan';
import { getSiteSlug, isJetpackSite, isNewSite } from 'state/sites/selectors';
import { isEnabled } from 'config';

/**
* Included to fix regression.
Expand Down Expand Up @@ -63,7 +62,7 @@ class ChecklistMain extends PureComponent {
* Only send Jetpack users to plans if a checklist will be presented. Otherwise,
* let the "Not available" view render.
*/
config.isEnabled( 'jetpack/checklist' ) &&
isEnabled( 'jetpack/checklist' ) &&
this.props.siteSlug &&
false === this.props.isAtomic &&
this.props.isJetpack &&
Expand All @@ -77,40 +76,9 @@ class ChecklistMain extends PureComponent {
}
}

getHeaderTitle() {
const { translate, siteHasFreePlan } = this.props;

if ( siteHasFreePlan ) {
return translate( 'Your site has been created!' );
}

return translate( 'Thank you for your purchase!' );
}

getSubHeaderText( displayMode ) {
const { translate } = this.props;

if ( displayMode === 'gsuite' ) {
return translate(
'We emailed %(email)s with instructions to complete your G Suite setup. ' +
'In the mean time, let’s get your new site ready for you to share. ' +
'We’ve prepared a list of things that will help you get there quickly.',
{
args: {
email: this.props.user.email,
},
}
);
}

return translate(
"Now that your site has been created, it's time to get it ready for you to share. " +
"We've prepared a list of things that will help you get there quickly."
);
}

renderHeader( completed, displayMode ) {
const { translate, isNewlyCreatedSite } = this.props;
renderHeader() {
const { displayMode, isNewlyCreatedSite, tasks, translate } = this.props;
const completed = tasks && ! some( tasks, { completed: false } );

if ( completed ) {
return (
Expand All @@ -127,11 +95,7 @@ class ChecklistMain extends PureComponent {
"You have completed all your tasks. Now let's tell people about it. Share your site."
) }
/>
<ChecklistShowShare
className="checklist__share"
siteSlug={ this.props.siteSlug }
recordTracksEvent={ this.props.recordTracksEvent }
/>
<ChecklistShowShare className="checklist__share" siteSlug={ this.props.siteSlug } />
</Fragment>
);
}
Expand All @@ -146,8 +110,28 @@ class ChecklistMain extends PureComponent {
alt=""
/>
<FormattedHeader
headerText={ this.getHeaderTitle() }
subHeaderText={ this.getSubHeaderText( displayMode ) }
headerText={
this.props.siteHasFreePlan
? translate( 'Your site has been created!' )
: translate( 'Thank you for your purchase!' )
}
subHeaderText={
'gsuite' === displayMode
? translate(
'We emailed %(email)s with instructions to complete your G Suite setup. ' +
'In the mean time, let’s get your new site ready for you to share. ' +
'We’ve prepared a list of things that will help you get there quickly.',
{
args: {
email: this.props.user.email,
},
}
)
: translate(
"Now that your site has been created, it's time to get it ready for you to share. " +
"We've prepared a list of things that will help you get there quickly."
)
}
/>
</Fragment>
);
Expand All @@ -163,21 +147,8 @@ class ChecklistMain extends PureComponent {
);
}

renderChecklist() {
const { displayMode, siteId, tasks } = this.props;
const completed = tasks && ! find( tasks, { completed: false } );

return (
<Fragment>
{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
{ this.renderHeader( completed, displayMode ) }
<ChecklistShow />
</Fragment>
);
}

render() {
const { checklistAvailable, displayMode, translate } = this.props;
const { checklistAvailable, displayMode, siteId, translate } = this.props;

let translatedTitle = translate( 'Site Checklist' );
let title = 'Site Checklist';
Expand All @@ -194,7 +165,11 @@ class ChecklistMain extends PureComponent {
<SidebarNavigation />
<DocumentHead title={ translatedTitle } />
{ checklistAvailable ? (
this.renderChecklist()
<Fragment>
{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
{ this.renderHeader() }
<ChecklistShow />
</Fragment>
) : (
<EmptyContent title={ translate( 'Checklist not available for this site' ) } />
) }
Expand All @@ -203,13 +178,10 @@ class ChecklistMain extends PureComponent {
}
}

const mapStateToProps = state => {
export default connect( state => {
const siteId = getSelectedSiteId( state );
const siteSlug = getSiteSlug( state, siteId );
const siteHasFreePlan = isSiteOnFreePlan( state, siteId );
const isAtomic = isSiteAutomatedTransfer( state, siteId );
const isJetpack = isJetpackSite( state, siteId );
const isNewlyCreatedSite = isNewSite( state, siteId );

/**
* Included to fix regression.
Expand All @@ -221,13 +193,13 @@ const mapStateToProps = state => {
const tasksFromServer = siteChecklist && siteChecklist.tasks;

return {
checklistAvailable: ! isAtomic && ( config.isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
checklistAvailable: ! isAtomic && ( isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
isAtomic,
isJetpack,
isNewlyCreatedSite,
isNewlyCreatedSite: isNewSite( state, siteId ),
siteHasFreePlan: isSiteOnFreePlan( state, siteId ),
siteId,
siteSlug,
siteHasFreePlan,
siteSlug: getSiteSlug( state, siteId ),
user: getCurrentUser( state ),

/**
Expand All @@ -237,9 +209,4 @@ const mapStateToProps = state => {
*/
tasks: tasksFromServer ? mergeObjectIntoArrayById( tasks, tasksFromServer ) : null,
};
};

export default connect(
mapStateToProps,
{ recordTracksEvent }
)( localize( ChecklistMain ) );
} )( localize( ChecklistMain ) );
8 changes: 7 additions & 1 deletion client/my-sites/checklist/share.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@
*/
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

/**
* Internal dependencies
*/
import ShareButton from 'components/share-button';
import { recordTracksEvent } from 'state/analytics/actions';

const services = [ 'facebook', 'twitter', 'linkedin', 'google-plus', 'pinterest' ];

export default class ChecklistShowShare extends PureComponent {
class ChecklistShowShare extends PureComponent {
static propTypes = {
siteSlug: PropTypes.string.isRequired,
recordTracksEvent: PropTypes.func,
Expand Down Expand Up @@ -57,3 +59,7 @@ export default class ChecklistShowShare extends PureComponent {
);
}
}
export default connect(
null,
{ recordTracksEvent }
)( ChecklistShowShare );
6 changes: 1 addition & 5 deletions client/my-sites/stats/checklist-banner/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,7 @@ export class ChecklistBanner extends Component {

renderShareButtons() {
return (
<ChecklistShowShare
className="checklist-banner__actions"
siteSlug={ this.props.siteSlug }
recordTracksEvent={ this.props.track }
/>
<ChecklistShowShare className="checklist-banner__actions" siteSlug={ this.props.siteSlug } />
);
}

Expand Down

0 comments on commit 7ce3113

Please sign in to comment.