Skip to content

Commit

Permalink
Domains: Refactor Email Page (#603)
Browse files Browse the repository at this point in the history
  • Loading branch information
@umurkontaci
umurkontaci committed Mar 8, 2016
1 parent f0a4a0a commit a714b81
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 115 deletions.
63 changes: 52 additions & 11 deletions client/components/data/domain-management/email/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
/**
* External dependencies
*/
var React = require( 'react' );
import React from 'react';
import partial from 'lodash/partial';
import { connect } from 'react-redux';

/**
* Internal dependencies
*/
var StoreConnection = require( 'components/data/store-connection' ),
DomainsStore = require( 'lib/domains/store' ),
CartStore = require( 'lib/cart/store' ),
observe = require( 'lib/mixins/data-observe' ),
upgradesActions = require( 'lib/upgrades/actions' ),
userFactory = require( 'lib/user' );

import StoreConnection from 'components/data/store-connection';
import DomainsStore from 'lib/domains/store';
import CartStore from 'lib/cart/store';
import observe from 'lib/mixins/data-observe';
import { fetchDomains } from 'lib/upgrades/actions';
import userFactory from 'lib/user';
import {
fetchByDomain,
fetchBySiteId
} from 'state/google-apps-users/actions';
import {
getByDomain,
getBySite,
getLoaded
} from 'state/google-apps-users/selectors';
const user = userFactory();

var stores = [
Expand All @@ -34,11 +44,13 @@ function getStateFromStores( props ) {
products: props.products,
selectedDomainName: props.selectedDomainName,
selectedSite: props.selectedSite,
user: user.get()
user: user.get(),
users: props.users,
loaded: props.loaded
};
}

module.exports = React.createClass( {
const EmailData = React.createClass( {
displayName: 'EmailData',

propTypes: {
Expand All @@ -53,6 +65,7 @@ module.exports = React.createClass( {

componentWillMount() {
this.loadDomains();
this.props.fetch();
},

componentWillUpdate() {
Expand All @@ -63,7 +76,7 @@ module.exports = React.createClass( {
const selectedSite = this.props.sites.getSelectedSite();

if ( this.prevSelectedSite !== selectedSite ) {
upgradesActions.fetchDomains( selectedSite.ID );
fetchDomains( selectedSite.ID );

this.prevSelectedSite = selectedSite;
}
Expand All @@ -72,6 +85,8 @@ module.exports = React.createClass( {
render() {
return (
<StoreConnection
users={ this.props.users }
loaded={ this.props.loaded }
component={ this.props.component }
stores={ stores }
getStateFromStores={ getStateFromStores }
Expand All @@ -82,3 +97,29 @@ module.exports = React.createClass( {
);
}
} );

export default connect(
( state, ownProps ) => {
let usersGetter;
if ( ownProps.selectedDomainName ) {
usersGetter = partial( getByDomain, state, ownProps.selectedDomainName );
} else {
usersGetter = partial( getBySite, state, ownProps.sites.getSelectedSite().ID );
}
return {
users: usersGetter(),
loaded: getLoaded( state )
}
},
( dispatch, ownProps ) => {
let usersFetcher;
if ( ownProps.selectedDomainName ) {
usersFetcher = partial( fetchByDomain, ownProps.selectedDomainName );
} else {
usersFetcher = partial( fetchBySiteId, ownProps.sites.getSelectedSite().ID );
}
return {
fetch: () => dispatch( usersFetcher() )
}
}
)( EmailData );
158 changes: 54 additions & 104 deletions client/my-sites/upgrades/domain-management/email/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,37 @@
/**
* External dependencies
*/
const React = require( 'react' ),
page = require( 'page' );
import React from 'react';
import page from 'page';
import map from 'lodash/map';

/**
* Internal dependencies
*/
const config = require( 'config' ),
Main = require( 'components/main' ),
Header = require( 'my-sites/upgrades/domain-management/components/header' ),
SidebarNavigation = require( 'my-sites/sidebar-navigation' ),
AddGoogleAppsCard = require( './add-google-apps-card' ),
GoogleAppsUsersCard = require( './google-apps-users-card' ),
VerticalNav = require( 'components/vertical-nav' ),
VerticalNavItem = require( 'components/vertical-nav/item' ),
UpgradesNavigation = require( 'my-sites/upgrades/navigation' ),
EmptyContent = require( 'components/empty-content' ),
paths = require( 'my-sites/upgrades/paths' ),
{ hasGoogleApps, canAddEmail, getSelectedDomain } = require( 'lib/domains' );
import Main from 'components/main';
import Header from 'my-sites/upgrades/domain-management/components/header';
import SidebarNavigation from 'my-sites/sidebar-navigation';
import AddGoogleAppsCard from './add-google-apps-card';
import GoogleAppsUsersCard from './google-apps-users-card';
import VerticalNav from 'components/vertical-nav';
import VerticalNavItem from 'components/vertical-nav/item';
import UpgradesNavigation from 'my-sites/upgrades/navigation';
import EmptyContent from 'components/empty-content';
import paths from 'my-sites/upgrades/paths';
import { hasGoogleApps, canAddEmail, getSelectedDomain } from 'lib/domains';

const Email = React.createClass( {
propTypes: {
domains: React.PropTypes.object.isRequired,
products: React.PropTypes.object.isRequired,
googleAppsUsers: React.PropTypes.object.isRequired,
selectedDomainName: React.PropTypes.string,
selectedSite: React.PropTypes.oneOfType( [
React.PropTypes.object,
React.PropTypes.bool
] ).isRequired,
user: React.PropTypes.object.isRequired
},

hasGoogleApps() {
return hasGoogleApps( getSelectedDomain( this.props ) );
user: React.PropTypes.object.isRequired,
users: React.PropTypes.array.isRequired,
loaded: React.PropTypes.bool.isRequired
},

render() {
Expand All @@ -43,56 +40,42 @@ const Email = React.createClass( {
<SidebarNavigation />
{ this.headerOrUpgradesNavigation() }
{ this.content() }
{ this.verticalNav() }
</Main>
);
},

headerOrUpgradesNavigation() {
let component;

if ( this.isManageDomainFlow() ) {
component = (
if ( this.props.selectedDomainName ) {
return (
<Header
onClick={ this.goToEditOrList }
selectedDomainName={ this.props.selectedDomainName }>
onClick={ this.goToEditOrList }
selectedDomainName={ this.props.selectedDomainName }>
{ this.translate( 'Email' ) }
</Header>
);
} else {
component = (
<UpgradesNavigation
path={ this.props.context.path }
cart={ this.props.cart }
selectedSite={ this.props.selectedSite } />
);
}

return component;
},

isManageDomainFlow() {
return !! this.props.selectedDomainName;
return (
<UpgradesNavigation
path={ this.props.context.path }
cart={ this.props.cart }
selectedSite={ this.props.selectedSite }/>
);
},

content() {
let component;

if ( ! this.props.domains.hasLoadedFromServer ) {
component = this.translate( 'Loading…' );
} else if ( this.isManageDomainFlow() ) {
if ( this.hasGoogleApps() ) {
component = this.googleAppsUsersCard();
} else if ( canAddEmail( [ getSelectedDomain( this.props ) ] ) ) {
component = this.addGoogleAppsCard();
}
} else if ( canAddEmail( this.props.domains.list ) ) {
component = this.addGoogleAppsCard();
} else {
component = this.emptyContent();
return this.translate( 'Loading…' );
}

return component;
let domainList = this.props.selectedDomainName
? [ getSelectedDomain( this.props ) ]
: this.props.domains.list;

if ( domainList.some( hasGoogleApps ) ) {
return this.googleAppsUsersCard();
} else if ( canAddEmail( domainList ) ) {
return this.addGoogleAppsCard();
}
return this.emptyContent();
},

emptyContent() {
Expand All @@ -103,73 +86,40 @@ const Email = React.createClass( {
'to remember and easier to share, and get access to email ' +
'forwarding, Google Apps for Work, and other email services.'
),
illustration: '/calypso/images/drake/drake-whoops.svg'
illustration: '/calypso/images/drake/drake-whoops.svg',
action: this.translate( 'Add a Custom Domain' ),
actionURL: '/domains/add/' + this.props.selectedSite.domain
};

if ( config.isEnabled( 'upgrades/domain-search' ) ) {
props = Object.assign( props, {
action: this.translate( 'Add a Custom Domain' ),
actionURL: '/domains/add/' + this.props.selectedSite.domain
} );
}

return (
<EmptyContent { ...props } />
);
},

googleAppsUsersCard() {
return (
<GoogleAppsUsersCard
googleAppsUsers={ this.props.googleAppsUsers }
selectedSite={ this.props.selectedSite }
selectedDomainName={ this.props.selectedDomainName }
domains={ this.props.domains }
user={ this.props.user } />
);
return <GoogleAppsUsersCard { ...this.props } />;
},

addGoogleAppsCard() {
return (
<AddGoogleAppsCard
products={ this.props.products }
selectedSite={ this.props.selectedSite }
selectedDomainName={ this.props.selectedDomainName } />
);
},

isVerticalNavShowing() {
return (
this.isManageDomainFlow() &&
this.props.domains.hasLoadedFromServer &&
! this.hasGoogleApps()
);
},

verticalNav() {
if ( ! this.isVerticalNavShowing() ) {
return null;
}

return (
<VerticalNav>
<VerticalNavItem path={ paths.domainManagementEmailForwarding( this.props.selectedSite.domain, this.props.selectedDomainName ) }>
{ this.translate( 'Email Forwarding' ) }
</VerticalNavItem>
</VerticalNav>
<div>
<AddGoogleAppsCard { ...this.props } />
<VerticalNav>
<VerticalNavItem
path={ paths.domainManagementEmailForwarding( this.props.selectedSite.domain, this.props.selectedDomainName ) }>
{ this.translate( 'Email Forwarding' ) }
</VerticalNavItem>
</VerticalNav>
</div>
);
},

goToEditOrList() {
let path;

if ( this.isManageDomainFlow() ) {
path = paths.domainManagementEdit( this.props.selectedSite.domain, this.props.selectedDomainName );
if ( this.props.selectedDomainName ) {
page( paths.domainManagementEdit( this.props.selectedSite.domain, this.props.selectedDomainName ) );
} else {
path = paths.domainManagementList( this.props.selectedSite.domain );
page( paths.domainManagementList( this.props.selectedSite.domain ) );
}

page( path );
}
} );

Expand Down

0 comments on commit a714b81

Please sign in to comment.