Skip to content

Commit

Permalink
Notices: Reduxification
Browse files Browse the repository at this point in the history 
Notices: Move store to proper place in tree,

Global notices to proper component

Notices: Move action types to common file

Notices: Move global notices to /ui store tree

Notices: Move global notices according to design in #1415

Notices: fix file address

Notices: Reduxification actions, dispatching

Notices: Reduxification proper actions dispatching

Notices: connect layouts to global state

Notices: Connect global-notices component

Notices: Repair pulsing dot

Notices: Proper action types

Notices: Change Provider argument because of React 0.14

Provider now takes react component instead of function

Notices: Change layoutComponent to layoutElement in accordance

with naming scheme

Notices: Remove extra space

Notices: Var to let

Notices: Reduxification: null instead of noop in connect

Notices: Reduxification - remove use of lodash from notice reducer

Notices: Change attaching of provider to React 0.14 format

Notices: Reduxifications change notice payload

Notices: Reduxification: create action for setSection

Notices: Reduxification change noSidebar to hasSidebar

Notices: Reduxification - use proper thunk middleware for timeout

Remove helper from notices actions

Notices: Reduxification - move notices from ui to top level in store
  • Loading branch information
@artpi
artpi committed Dec 22, 2015
1 parent 6339e14 commit bd1f8e0
Show file tree
Hide file tree
Showing 25 changed files with 218 additions and 279 deletions.
9 changes: 4 additions & 5 deletions client/boot/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ function loadDevModulesAndBoot() {
}

function boot() {
var layoutSection, layout, layoutComponentCreator, reduxStore, validSections = [];
var layoutSection, layout, layoutElement, reduxStore, validSections = [];

init();

Expand All @@ -164,7 +164,7 @@ function boot() {
// Create layout instance with current user prop
Layout = require( 'layout' );

layoutComponentCreator = () => React.createElement( Layout, {
layoutElement = React.createElement( Layout, {
user: user,
sites: sites,
focus: layoutFocus,
Expand All @@ -180,11 +180,11 @@ function boot() {
LoggedOutLayout = require( 'layout/logged-out' );
}

layoutComponentCreator = () => React.createElement( LoggedOutLayout );
layoutElement = React.createElement( LoggedOutLayout );
}

layout = ReactDom.render(
React.createElement( ReduxProvider, { store: reduxStore }, layoutComponentCreator ),
React.createElement( ReduxProvider, { store: reduxStore }, layoutElement ),
document.getElementById( 'wpcom' )
);

Expand All @@ -199,7 +199,6 @@ function boot() {
}

setUpContext( layout, reduxStore );

page( '*', require( 'lib/route/normalize' ) );

// warn against navigating from changed, unsaved forms
Expand Down
35 changes: 31 additions & 4 deletions client/notices/notices-list.jsx → client/components/global-notices/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,14 @@ import Notice from 'components/notice';
import NoticeAction from 'components/notice/notice-action';
import notices from 'notices';
import observe from 'lib/mixins/data-observe';
import DeleteSiteNotices from './delete-site-notices';
import DeleteSiteNotices from 'notices/delete-site-notices';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { removeNotice } from 'state/notices/actions'

const debug = debugModule( 'calypso:notices' );

export default React.createClass( {
const NoticesList = React.createClass( {

displayName: 'NoticesList',

Expand Down Expand Up @@ -79,7 +82,7 @@ export default React.createClass( {

render() {
const noticesRaw = this.props.notices[ this.props.id ] || [];
const noticesList = noticesRaw.map( function( notice, index ) {
let noticesList = noticesRaw.map( function( notice, index ) {
return (
<Notice
key={ 'notice-' + index }
Expand All @@ -100,7 +103,22 @@ export default React.createClass( {
);
}, this );

if ( ! noticesRaw.length ) {
//This is an interrim solution for displaying both notices from redux stroe
//and from the old component. When all notices will be moved to redux store, this components
//needs to be updated.
noticesList = noticesList.concat( this.props.storeNotices.map( function( notice, index ) {
return (
<Notice
key={ 'notice-' + index }
status={ notice.status }
showDismiss={ notice.showDismiss }
onDismissClick={ this.props.removeNotice.bind( this, notice.noticeId ) }
text={ notice.text }>
</Notice>
);
}, this ) );

if ( ! noticesList.length ) {
return null;
}
return (
Expand All @@ -116,3 +134,12 @@ export default React.createClass( {
);
}
} );

export default connect(
state => {
return {
storeNotices: state.notices.items
};
},
dispatch => bindActionCreators( { removeNotice }, dispatch )
)( NoticesList );
6 changes: 2 additions & 4 deletions client/components/overlay/overlay.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ var React = require( 'react/addons' ),
* Internal dependencies
*/
var Toolbar = require( './toolbar' ),
GlobalNotices = require( 'notices/global-notices' ),
NoticesList = require( 'notices/notices-list' ),
GlobalNotices = require( 'components/global-notices' ),
notices = require( 'notices' ),
page = require( 'page' ),
TitleData = require( 'components/data/screen-title' );
Expand Down Expand Up @@ -101,8 +100,7 @@ module.exports = React.createClass({
</TitleData>

<div className="wp-content" ref="overlayInnerContent">
<NoticesList id="overlay-notices" notices={ notices.list }/>
<GlobalNotices id="overlay-notices" />
<GlobalNotices id="overlay-notices" notices={ notices.list }/>
{ this.props.children }
</div>
</section>
Expand Down
33 changes: 9 additions & 24 deletions client/devdocs/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var ReactDom = require( 'react-dom' ),
qs = require( 'qs' ),
debounce = require( 'lodash/function/debounce' ),
page = require( 'page' ),
setSection = require( 'state/ui/actions' ).setSection,
EmptyContent = require( 'components/empty-content' );

/**
Expand Down Expand Up @@ -52,10 +53,7 @@ var devdocs = {
false );
}

context.layout.setState( {
section: 'devdocs',
noSidebar: false
} );
context.store.dispatch( setSection( 'devdocs' ) );

ReactDom.render(
React.createElement( DocsComponent, {
Expand All @@ -72,10 +70,7 @@ var devdocs = {
* Controller for single developer document
*/
singleDoc: function( context ) {
context.layout.setState( {
section: 'devdocs',
noSidebar: false
} );
context.store.dispatch( setSection( 'devdocs' ) );

ReactDom.render(
React.createElement( SingleDocComponent, {
Expand All @@ -89,10 +84,7 @@ var devdocs = {

// UI components
design: function( context ) {
context.layout.setState( {
section: 'devdocs',
noSidebar: false
} );
context.store.dispatch( setSection( 'devdocs' ) );

ReactDom.render(
React.createElement( DesignAssetsComponent, {
Expand All @@ -103,10 +95,7 @@ var devdocs = {
},

typography: function( context ) {
context.layout.setState( {
section: 'devdocs',
noSidebar: false
} );
context.store.dispatch( setSection( 'devdocs' ) );

ReactDom.render(
React.createElement( Typography, {
Expand All @@ -126,10 +115,9 @@ var devdocs = {
},

pleaseLogIn: function( context ) {
context.layout.setState( {
section: 'devdocs-start',
noSidebar: true
} );
context.store.dispatch( setSection( 'devdocs-start', {
hasSidebar: false
} ) );

ReactDom.unmountComponentAtNode( document.getElementById( 'secondary' ) );

Expand All @@ -149,10 +137,7 @@ var devdocs = {

// Welcome screen
welcome: function( context ) {
context.layout.setState( {
section: 'devdocs',
noSidebar: false
} );
context.store.dispatch( setSection( 'devdocs' ) );

ReactDom.render(
React.createElement( DevWelcome, {} ),
Expand Down
46 changes: 24 additions & 22 deletions client/layout/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ var React = require( 'react' ),
*/
var Masterbar = require( 'layout/masterbar' ),
observe = require( 'lib/mixins/data-observe' ),
GlobalNotices = require( 'notices/global-notices' ),
NoticesList = require( 'notices/notices-list' ),
GlobalNotices = require( 'components/global-notices' ),
notices = require( 'notices' ),
translator = require( 'lib/translator-jumpstart' ),
TranslatorInvitation = require( './community-translator/invitation' ),
Expand All @@ -23,25 +22,27 @@ var Masterbar = require( 'layout/masterbar' ),
InviteMessage = require( 'my-sites/invites/invite-message' ),
analytics = require( 'analytics' ),
config = require( 'config' ),
connect = require( 'react-redux' ).connect,
PulsingDot = require( 'components/pulsing-dot' ),
SitesListNotices = require( 'lib/sites-list/notices' ),
PollerPool = require( 'lib/data-poller' ),
KeyboardShortcutsMenu;
KeyboardShortcutsMenu,
Layout;

if ( config.isEnabled( 'keyboard-shortcuts' ) ) {
KeyboardShortcutsMenu = require( 'lib/keyboard-shortcuts/menu' );
}

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

mixins: [ SitesListNotices, observe( 'user', 'focus', 'nuxWelcome', 'sites', 'translatorInvitation' ) ],

_sitesPoller: null,

componentWillUpdate: function( nextProps, nextState ) {
if ( this.state.section !== nextState.section ) {
if ( nextState.section === 'sites' ) {
if ( this.props.section !== nextProps.section ) {
if ( nextProps.section === 'sites' ) {
setTimeout( function() {
if ( ! this.isMounted() || this._sitesPoller ) {
return;
Expand All @@ -58,14 +59,6 @@ module.exports = React.createClass( {
this.removeSitesPoller();
},

getInitialState: function() {
return {
section: false,
isLoading: false,
noSidebar: false
};
},

removeSitesPoller: function() {
if ( ! this._sitesPoller ) {
return;
Expand All @@ -84,35 +77,34 @@ module.exports = React.createClass( {
},

render: function() {
var sectionClass = 'wp layout is-section-' + this.state.section + ' focus-' + this.props.focus.getCurrent(),
var sectionClass = 'wp layout is-section-' + this.props.section + ' focus-' + this.props.focus.getCurrent(),
showWelcome = this.props.nuxWelcome.getWelcome(),
newestSite = this.newestSite(),
translatorInvitation = this.props.translatorInvitation,
showInvitation = ! showWelcome &&
translatorInvitation.isPending() &&
translatorInvitation.isValidSection( this.state.section ),
translatorInvitation.isValidSection( this.props.section ),
loadingClass = classnames( {
layout__loader: true,
'is-active': this.state.isLoading
'is-active': this.props.isLoading
} );

if ( this.state.noSidebar ) {
if ( ! this.props.hasSidebar ) {
sectionClass += ' has-no-sidebar';
}

return (
<div className={ sectionClass }>
{ config.isEnabled( 'keyboard-shortcuts' ) ? <KeyboardShortcutsMenu /> : null }
<Masterbar user={ this.props.user } section={ this.state.section } sites={ this.props.sites }/>
<div className={ loadingClass } ><PulsingDot active={ this.state.isLoading } /></div>
<Masterbar user={ this.props.user } section={ this.props.section } sites={ this.props.sites }/>
<div className={ loadingClass } ><PulsingDot active={ this.props.isLoading } /></div>
<div id="content" className="wp-content">
<Welcome isVisible={ showWelcome } closeAction={ this.closeWelcome } additionalClassName="NuxWelcome">
<WelcomeMessage welcomeSite={ newestSite } />
</Welcome>
<InviteMessage sites={ this.props.sites }/>
<EmailVerificationNotice user={ this.props.user } />
<NoticesList id="notices" notices={ notices.list } forcePinned={ 'post' === this.state.section } />
<GlobalNotices id="notices" />
<GlobalNotices id="notices" notices={ notices.list } forcePinned={ 'post' === this.props.section } />
<TranslatorInvitation isVisible={ showInvitation } />
<div id="primary" className="wp-primary wp-section" />
<div id="secondary" className="wp-secondary" />
Expand All @@ -125,3 +117,13 @@ module.exports = React.createClass( {
);
}
} );

export default connect(
( state ) => {
return {
isLoading: state.ui.isLoading,
section: state.ui.section,
hasSidebar: state.ui.hasSidebar
};
}
)( Layout );
36 changes: 20 additions & 16 deletions client/layout/logged-out.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,32 @@
* External dependencies
*/
var React = require( 'react' ),
classNames = require( 'classnames' );
classNames = require( 'classnames' ),
connect = require( 'react-redux' ).connect;

/**
* Internal dependencies
*/

var Masterbar = require( 'layout/masterbar' ),
NoticesList = require( 'notices/notices-list' ),
GlobalNotices = require( 'notices/global-notices' ),
notices = require( 'notices' );
GlobalNotices = require( 'components/global-notices' ),
notices = require( 'notices' ),
LoggedOutLayout;

module.exports = React.createClass( {
LoggedOutLayout = React.createClass( {
displayName: 'LayoutLoggedOut',

getInitialState: function() {
return {
section: undefined,
noSidebar: false
};
},

render: function() {
var sectionClass = this.state.section ? ' is-section-' + this.state.section : '',
var sectionClass = this.props.section ? ' is-section-' + this.props.section : '',
classes = classNames( 'wp', sectionClass, {
'has-no-sidebar': this.state.noSidebar
'has-no-sidebar': !this.props.hasSidebar
} );

return (
<div className={ classes }>
<Masterbar />
<div id="content" className="wp-content">
<NoticesList id="notices" notices={ notices.list } />
<GlobalNotices id="notices" />
<GlobalNotices id="notices" notices={ notices.list } />
<div id="primary" className="wp-primary wp-section" />
<div id="secondary" className="wp-secondary" />
</div>
Expand All @@ -43,3 +37,13 @@ module.exports = React.createClass( {
}

} );

export default connect(
( state ) => {
return {
isLoading: state.ui.isLoading,
section: state.ui.section,
hasSidebar: state.ui.hasSidebar
};
}
)( LoggedOutLayout );
Loading

0 comments on commit bd1f8e0

Please sign in to comment.