Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ChecklistShow: Decouple tasks prop #25958

Closed
wants to merge 6 commits into from
Closed

ChecklistShow: Decouple tasks prop #25958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
80e4d88
CurrentPlan: Alphabetize props in mapStateToProps()
ockham Jul 10, 2018
99cd531
CurrentPlan: Alphabetize props in render()
ockham Jul 10, 2018
5f6e199
CurrentPlan: Destructure ownProps in mapStateToProps()
ockham Jul 10, 2018
a20cf8c
CurrentPlan: Alphabetize imports
ockham Jul 10, 2018
103fa35
Checklist: Set tasks prop outside of ChecklistShow
ockham Jul 10, 2018
6f64e7e
Add tasks propType
sirreal Jul 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 12 additions & 21 deletions client/my-sites/checklist/checklist-show/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,28 @@
* External dependencies
*/
import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { localize } from 'i18n-calypso';
import { find, get } from 'lodash';
import { find } from 'lodash';

/**
* Internal dependencies
*/
import Checklist from 'blocks/checklist';
import { tasks as jetpackTasks } from '../jetpack-checklist';
import { requestSiteChecklistTaskUpdate } from 'state/checklist/actions';
import { getSelectedSiteId } from 'state/ui/selectors';
import getSiteChecklist from 'state/selectors/get-site-checklist';
import { isJetpackSite, getSiteSlug } from 'state/sites/selectors';
import { getSelectedSiteId, getSelectedSiteSlug } from 'state/ui/selectors';
import QuerySiteChecklist from 'components/data/query-site-checklist';
import { launchTask, tasks as wpcomTasks } from '../onboardingChecklist';
import { mergeObjectIntoArrayById } from '../util';
import { launchTask } from '../onboardingChecklist';
import { recordTracksEvent } from 'state/analytics/actions';
import { createNotice } from 'state/notices/actions';
import { requestGuidedTour } from 'state/ui/guided-tours/actions';

class ChecklistShow extends PureComponent {
static propTypes = {
tasks: PropTypes.array,
};

handleAction = id => {
const { requestTour, siteSlug, tasks, track } = this.props;
const task = find( tasks, { id } );
Expand Down Expand Up @@ -65,20 +66,10 @@ class ChecklistShow extends PureComponent {
}
}

const mapStateToProps = state => {
const siteId = getSelectedSiteId( state );
const siteSlug = getSiteSlug( state, siteId );
const siteChecklist = getSiteChecklist( state, siteId );
const isJetpack = isJetpackSite( state, siteId );
const tasks = isJetpack ? jetpackTasks : wpcomTasks;
const tasksFromServer = get( siteChecklist, [ 'tasks' ] );

return {
siteId,
siteSlug,
tasks: tasksFromServer ? mergeObjectIntoArrayById( tasks, tasksFromServer ) : null,
};
};
const mapStateToProps = state => ( {
siteId: getSelectedSiteId( state ),
siteSlug: getSelectedSiteSlug( state ),
} );

const mapDispatchToProps = {
track: recordTracksEvent,
Expand Down
21 changes: 15 additions & 6 deletions client/my-sites/checklist/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,27 @@
import React, { Fragment, PureComponent } from 'react';
import { connect } from 'react-redux';
import { localize } from 'i18n-calypso';
import { find } from 'lodash';
import { find, get } 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 getSiteChecklist from 'state/selectors/get-site-checklist';
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, getSiteSlug } from 'state/sites/selectors';
import { mergeObjectIntoArrayById } from 'my-sites/checklist/util';
import { recordTracksEvent } from 'state/analytics/actions';
import { tasks as wpcomTasks } from './onboardingChecklist';

class ChecklistMain extends PureComponent {
getHeaderTitle( displayMode ) {
Expand Down Expand Up @@ -122,7 +123,7 @@ class ChecklistMain extends PureComponent {
<Fragment>
{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
{ this.renderHeader( completed, displayMode ) }
<ChecklistShow />
<ChecklistShow tasks={ tasks } />
</Fragment>
);
}
Expand Down Expand Up @@ -157,12 +158,20 @@ class ChecklistMain extends PureComponent {
const mapStateToProps = state => {
const siteId = getSelectedSiteId( state );
const siteSlug = getSiteSlug( state, siteId );
const isAtomic = isSiteAutomatedTransfer( state, siteId );
const isJetpack = isJetpackSite( state, siteId );

let tasks;
if ( ! isJetpack ) {
const tasksFromServer = get( getSiteChecklist( state, siteId ), [ 'tasks' ] );

tasks = tasksFromServer ? mergeObjectIntoArrayById( wpcomTasks, tasksFromServer ) : null;
}

return {
checklistAvailable: ! isAtomic && ( config.isEnabled( 'jetpack/checklist' ) || ! isJetpack ),
checklistAvailable: ! isJetpack,
siteId,
siteSlug,
tasks,
user: getCurrentUser( state ),
};
};
Expand Down
71 changes: 43 additions & 28 deletions client/my-sites/plans/current-plan/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,39 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { get } from 'lodash';
import { localize } from 'i18n-calypso';

/**
* Internal Dependencies
*/
import ChecklistShow from 'my-sites/checklist/checklist-show';
import CurrentPlanHeader from './header';
import DocumentHead from 'components/data/document-head';
import DomainWarnings from 'my-sites/domains/components/domain-warnings';
import getSiteChecklist from 'state/selectors/get-site-checklist';
import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
import Main from 'components/main';
import PlansNavigation from 'my-sites/domains/navigation';
import ProductPurchaseFeaturesList from 'blocks/product-purchase-features-list';
import QuerySiteDomains from 'components/data/query-site-domains';
import QuerySitePlans from 'components/data/query-site-plans';
import QuerySites from 'components/data/query-sites';
import SidebarNavigation from 'my-sites/sidebar-navigation';
import TrackComponentView from 'lib/analytics/track-component-view';
import {
getCurrentPlan,
isCurrentPlanExpiring,
isRequestingSitePlans,
} from 'state/sites/plans/selectors';
import { isFreeJetpackPlan } from 'lib/products-values';
import { getSelectedSite, getSelectedSiteId } from 'state/ui/selectors';
import { isJetpackSite } from 'state/sites/selectors';
import DocumentHead from 'components/data/document-head';
import TrackComponentView from 'lib/analytics/track-component-view';
import PlansNavigation from 'my-sites/domains/navigation';
import ProductPurchaseFeaturesList from 'blocks/product-purchase-features-list';
import CurrentPlanHeader from './header';
import QuerySites from 'components/data/query-sites';
import QuerySitePlans from 'components/data/query-site-plans';
import { getPlan } from 'lib/plans';
import QuerySiteDomains from 'components/data/query-site-domains';
import { getDecoratedSiteDomains } from 'state/sites/domains/selectors';
import DomainWarnings from 'my-sites/domains/components/domain-warnings';
import isSiteAutomatedTransfer from 'state/selectors/is-site-automated-transfer';
import SidebarNavigation from 'my-sites/sidebar-navigation';
import ChecklistShow from 'my-sites/checklist/checklist-show';
import { getPlan } from 'lib/plans';
import { getSelectedSite, getSelectedSiteId } from 'state/ui/selectors';
import { isEnabled } from 'config';
import { isFreeJetpackPlan } from 'lib/products-values';
import { isJetpackSite } from 'state/sites/selectors';
import { mergeObjectIntoArrayById } from 'my-sites/checklist/util';
import { tasks as jetpackTasks } from 'my-sites/checklist/jetpack-checklist';

class CurrentPlan extends Component {
static propTypes = {
Expand Down Expand Up @@ -80,15 +84,16 @@ class CurrentPlan extends Component {

render() {
const {
selectedSite,
selectedSiteId,
domains,
checklistTasks,
context,
currentPlan,
domains,
hasDomainsLoaded,
isAutomatedTransfer,
isExpiring,
isJetpack,
selectedSite,
selectedSiteId,
shouldShowDomainWarnings,
translate,
} = this.props;
Expand Down Expand Up @@ -146,7 +151,7 @@ class CurrentPlan extends Component {
/>
{ isEnabled( 'jetpack/checklist' ) &&
isJetpack &&
! isAutomatedTransfer && <ChecklistShow /> }
! isAutomatedTransfer && <ChecklistShow tasks={ checklistTasks } /> }
<div
className={ classNames( 'current-plan__header-text current-plan__text', {
'is-placeholder': { isLoading },
Expand All @@ -163,25 +168,35 @@ class CurrentPlan extends Component {
}
}

export default connect( ( state, ownProps ) => {
export default connect( ( state, { context } ) => {
const selectedSite = getSelectedSite( state );
const selectedSiteId = getSelectedSiteId( state );
const domains = getDecoratedSiteDomains( state, selectedSiteId );

const isJetpack = isJetpackSite( state, selectedSiteId );
const isAutomatedTransfer = isSiteAutomatedTransfer( state, selectedSiteId );

let checklistTasks;
if ( isEnabled( 'jetpack/checklist' ) && isJetpack && ! isAutomatedTransfer ) {
const tasksFromServer = get( getSiteChecklist( state, selectedSiteId ), [ 'tasks' ] );

checklistTasks = tasksFromServer
? mergeObjectIntoArrayById( jetpackTasks, tasksFromServer )
: null;
}

return {
selectedSite,
selectedSiteId,
checklistTasks,
context,
currentPlan: getCurrentPlan( state, selectedSiteId ),
domains,
hasDomainsLoaded: !! domains,
isAutomatedTransfer,
context: ownProps.context,
currentPlan: getCurrentPlan( state, selectedSiteId ),
isExpiring: isCurrentPlanExpiring( state, selectedSiteId ),
shouldShowDomainWarnings: ! isJetpack || isAutomatedTransfer,
hasDomainsLoaded: !! domains,
isRequestingSitePlans: isRequestingSitePlans( state, selectedSiteId ),
isJetpack,
isRequestingSitePlans: isRequestingSitePlans( state, selectedSiteId ),
selectedSite,
selectedSiteId,
shouldShowDomainWarnings: ! isJetpack || isAutomatedTransfer,
};
} )( localize( CurrentPlan ) );