Notices: Redux everything!

bin/gridiconFormatChecker

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+var fs = require( 'fs' );
+var validIconSizes = [ 12, 18, 24, 36, 48, 54, 72 ];
+
+var filename = process.argv[ 2 ];
+
+fs.readFile( filename, 'utf8', function ( err, data ) {
+	var result = '',
+		splittedCode,
+		lineNumber = 1;
+	if ( err ) {
+		console.log(err);
+		process.exit( 1 );
+	}
+	data = data.toLowerCase();
+	splittedCode = data.split( '<gridicon' );
+
+	if ( splittedCode.length > 1 ) {
+		// There are gridicon instances in this file.
+		splittedCode.forEach( function( chunk ) {
+			var gridiconAttrs, isNonStandard, size;
+			if( chunk ) {
+				// we discard all the code after the tag closing... we are only interested in the props of the gridicon.
+				gridiconAttrs = chunk.split( '>' )[ 0 ];
+				isNonStandard = gridiconAttrs.indexOf( 'nonstandardsize' ) >= 0;
+				if ( gridiconAttrs.indexOf( 'size={' ) >= 0 ) {
+					size = gridiconAttrs.split( 'size={' )[ 1 ].split( '}' )[ 0 ];
+					if ( !isNaN( size ) ) {
+						// We only can check if the size is standard if it is a number. If not (variables), we have no way of knowing if it's fine or not
+						if( !isNonStandard && validIconSizes.indexOf( +size ) < 0 ) {
+							result += '\033[31mNon-standard gridicon size ( ' + size + 'px ) detected in ' + filename + ' line ' + lineNumber + '\n';
+						}
+						if( isNonStandard && validIconSizes.indexOf( +size ) >= 0 ) {
+							result += '\033[33mStandard size gridicon ( ' + size + 'px ) marked as non-standard... are you sure that is ok? in ' + filename + ' line ' + lineNumber + '\n';
+						}
+					}
+				}
+				lineNumber += chunk.split('\n').length - 1;
+			}
+		} );
+	}
+
+	if ( result !== '' ) {
+		console.error( result );
+		console.log( '\033[m=== Valid gridiconsizes are ' + validIconSizes.join( 'px, ' ) + 'px ===\n' );
+		process.exit( 1 );
+	} else {
+		process.exit( 0 );
+	}
+} );

bin/pre-commit

@@ -38,6 +38,15 @@ done
 
 echo "\neslint validation complete\n"
 
+for file in ${files}; do
+    ./bin/gridiconFormatChecker ${file}
+        if [ $? -ne 0 ]; then
+        echo "\033[31mGridicon Format Check Failed: \033[0m${file}\n"
+        pass=false
+    fi
+done
+
+
 if ! $pass; then
     echo "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass validation tests but do not. Please fix the errors and try again.\n"
     exit 1

client/boot/index.js

@@ -11,6 +11,7 @@ var React = require( 'react' ),
 	page = require( 'page' ),
 	url = require( 'url' ),
 	qs = require( 'querystring' ),
+	ReduxProvider = require( 'react-redux' ).Provider,
 	injectTapEventPlugin = require( 'react-tap-event-plugin' );
 
 /**
@@ -78,9 +79,7 @@ function init() {
 	} );
 }
 
-function setUpContext( layout ) {
-	var reduxStore = createReduxStore();
-
+function setUpContext( layout, reduxStore ) {
 	// Pass the layout so that it is available to all page handlers
 	// and add query and hash objects onto context object
 	page( '*', function( context, next ) {
@@ -138,7 +137,7 @@ function loadDevModulesAndBoot() {
 }
 
 function boot() {
-	var layoutSection, layout, validSections = [];
+	var layoutSection, layout, layoutComponentCreator, reduxStore, validSections = [];
 
 	init();
 
@@ -153,6 +152,7 @@ function boot() {
 	} );
 
 	translatorJumpstart.init();
+	reduxStore = createReduxStore();
 
 	if ( user.get() ) {
 		// When logged in the analytics module requires user and superProps objects
@@ -161,13 +161,14 @@ function boot() {
 
 		// Create layout instance with current user prop
 		Layout = require( 'layout' );
-		layout = React.render( React.createElement( Layout, {
+
+		layoutComponentCreator = () => React.createElement( Layout, {
 			user: user,
 			sites: sites,
 			focus: layoutFocus,
 			nuxWelcome: nuxWelcome,
 			translatorInvitation: translatorInvitation
-		} ), document.getElementById( 'wpcom' ) );
+		} );
 	} else {
 		analytics.setSuperProps( superProps );
 
@@ -177,12 +178,14 @@ function boot() {
 			LoggedOutLayout = require( 'layout/logged-out' );
 		}
 
-		layout = React.render(
-			React.createElement( LoggedOutLayout ),
-			document.getElementById( 'wpcom' )
-		);
+		layoutComponentCreator = () => React.createElement( LoggedOutLayout );
 	}
 
+	layout = React.render(
+		React.createElement( ReduxProvider, { store: reduxStore }, layoutComponentCreator ),
+		document.getElementById( 'wpcom' )
+	);
+
 	debug( 'Main layout rendered.' );
 
 	// If `?sb` or `?sp` are present on the path set the focus of layout
@@ -193,7 +196,7 @@ function boot() {
 		window.history.replaceState( null, document.title, window.location.pathname );
 	}
 
-	setUpContext( layout );
+	setUpContext( layout, reduxStore );
 
 	page( '*', require( 'lib/route/normalize' ) );
 

client/components/overlay/overlay.jsx

@@ -9,6 +9,7 @@ var React = require( 'react/addons' ),
  * Internal dependencies
  */
 var Toolbar = require( './toolbar' ),
+	GlobalNotices = require( 'notices/global-notices' ),
 	NoticesList = require( 'notices/notices-list' ),
 	notices = require( 'notices' ),
 	page = require( 'page' ),
@@ -101,6 +102,7 @@ module.exports = React.createClass({
 
 				<div className="wp-content" ref="overlayInnerContent">
 					<NoticesList id="overlay-notices" notices={ notices.list }/>
+					<GlobalNotices id="overlay-notices" />
 					{ this.props.children }
 				</div>
 			</section>

client/components/section-header/style.scss

@@ -10,10 +10,13 @@
 }
 
 .section-header__label {
+	display: flex;
+		align-items: center;
 	flex-grow: 1;
 	line-height: 28px;
 	position: relative;
 
+
 	&:before {
 		@include long-content-fade( $color : $white );
 	}
@@ -33,13 +36,12 @@
 .section-header__label,
 .section-header__button {
 	color: $gray;
-	font-size: 12px;
+	font-size: 11px;
 	text-transform: uppercase;
 }
 
 .section-header__button {
 	background: none;
-	float: let;
 	margin-right: 8px;
 	padding: 2px 8px;
 

client/layout/index.jsx

@@ -11,6 +11,7 @@ var React = require( 'react' ),
  */
 var Masterbar = require( './masterbar' ),
 	observe = require( 'lib/mixins/data-observe' ),
+	GlobalNotices = require( 'notices/global-notices' ),
 	NoticesList = require( 'notices/notices-list' ),
 	notices = require( 'notices' ),
 	translator = require( 'lib/translator-jumpstart' ),
@@ -111,6 +112,7 @@ module.exports = React.createClass( {
 					<InviteMessage sites={ this.props.sites }/>
 					<EmailVerificationNotice user={ this.props.user } />
 					<NoticesList id="notices" notices={ notices.list } forcePinned={ 'post' === this.state.section } />
+					<GlobalNotices id="notices" />
 					<TranslatorInvitation isVisible={ showInvitation } />
 					<div id="primary" className="wp-primary wp-section" />
 					<div id="secondary" className="wp-secondary" />

client/layout/logged-out.jsx

@@ -9,6 +9,7 @@ var React = require( 'react' ),
  */
 var Masterbar = require( './masterbar' ),
 	NoticesList = require( 'notices/notices-list' ),
+	GlobalNotices = require( 'notices/global-notices' ),
 	notices = require( 'notices' );
 
 module.exports = React.createClass( {
@@ -32,6 +33,7 @@ module.exports = React.createClass( {
 				<Masterbar />
 				<div id="content" className="wp-content">
 					<NoticesList id="notices" notices={ notices.list } />
+					<GlobalNotices id="notices" />
 					<div id="primary" className="wp-primary wp-section" />
 					<div id="secondary" className="wp-secondary" />
 				</div>

client/me/controller.js

@@ -18,6 +18,7 @@ import purchasesController from './purchases/controller';
 import userFactory from 'lib/user';
 import userSettings from 'lib/user-settings';
 import titleActions from 'lib/screen-title/actions';
+import { Provider } from 'react-redux';
 
 const ANALYTICS_PAGE_TITLE = 'Me',
 	devices = devicesFactory(),
@@ -192,15 +193,17 @@ export default {
 		analytics.pageView.record( basePath, ANALYTICS_PAGE_TITLE + ' > Notifications' );
 
 		React.render(
-			React.createElement( NotificationsComponent,
-				{
-					user: user,
-					userSettings: userSettings,
-					blogs: sites,
-					devices: devices,
-					path: context.path
-				}
-			),
+			React.createElement( Provider, { store: context.store }, () => {
+				return React.createElement( NotificationsComponent,
+					{
+						user: user,
+						userSettings: userSettings,
+						blogs: sites,
+						devices: devices,
+						path: context.path
+					}
+				)
+			} ),
 			document.getElementById( 'primary' )
 		);
 	},

client/me/notification-settings/index.jsx

@@ -7,7 +7,7 @@ import React from 'react';
  * Internal dependencies
  */
 import observe from 'lib/mixins/data-observe';
-import notices from 'notices';
+import { success, error } from 'state/notices/actions';
 import Main from 'components/main';
 import ReauthRequired from 'me/reauth-required';
 import twoStepAuthorization from 'lib/two-step-authorization';
@@ -16,8 +16,9 @@ import Navigation from './navigation';
 import BlogsSettings from './blogs-settings';
 import store from 'lib/notification-settings-store';
 import { fetchSettings, toggle, saveSettings } from 'lib/notification-settings-store/actions';
+import { connect } from 'react-redux';
 
-export default React.createClass( {
+const NotificationSettings = React.createClass( {
 	displayName: 'NotificationSettings',
 
 	mixins: [ observe( 'sites', 'devices' ) ],
@@ -43,11 +44,11 @@ export default React.createClass( {
 		const state = store.getStateFor( 'blogs' );
 
 		if ( state.error ) {
-			notices.error( this.translate( 'There was a problem saving your changes. Please, try again.' ) );
+			this.props.errorNotice( this.translate( 'There was a problem saving your changes. Please, try again.' ) );
 		}
 
 		if ( state.status === 'success' ) {
-			notices.success( this.translate( 'Settings saved successfully!' ) );
+			this.props.successNotice( this.translate( 'Settings saved successfully!' ) );
 		}
 
 		this.setState( state );
@@ -74,3 +75,16 @@ export default React.createClass( {
 	}
 } );
 
+export default connect(
+	() => {
+		return {}
+	},
+	( dispatch ) => { return {
+		successNotice: ( text, options ) => {
+			dispatch( success( text, options ) );
+		},
+		errorNotice: ( text, options ) => {
+			dispatch( error( text, options ) );
+		}
+	} }
+)( NotificationSettings );

client/me/security-section-nav/index.jsx

@@ -18,27 +18,30 @@ module.exports = React.createClass( {
 		path: React.PropTypes.string.isRequired
 	},
 
-	getDefaultProps: function() {
-		return {
-			tabs: [
-				{
-					title: i18n.translate( 'Password', { textOnly: true } ),
-					path: '/me/security',
-				},
-				{
-					title: i18n.translate( 'Two-Step Authentication', { textOnly: true } ),
-					path: '/me/security/two-step',
-				},
-				{
-					title: i18n.translate( 'Connected Applications', { textOnly: true } ),
-					path: '/me/security/connected-applications',
-				},
-				config.isEnabled( 'me/security/checkup' ) ? {
-					title: i18n.translate( 'Checkup', { textOnly: true } ),
-					path: '/me/security/checkup',
-				} : false
-			]
-		};
+	getNavtabs: function() {
+		var tabs = [
+			{
+				title: i18n.translate( 'Password', { textOnly: true } ),
+				path: '/me/security',
+			},
+			{
+				title: i18n.translate( 'Two-Step Authentication', { textOnly: true } ),
+				path: '/me/security/two-step',
+			},
+			{
+				title: i18n.translate( 'Connected Applications', { textOnly: true } ),
+				path: '/me/security/connected-applications',
+			}
+		];
+
+		if ( config.isEnabled( 'me/security/checkup' ) ) {
+			tabs.push( {
+				title: i18n.translate( 'Checkup', { textOnly: true } ),
+				path: '/me/security/checkup',
+			} );
+		}
+
+		return tabs;
 	},
 
 	getFilteredPath: function() {
@@ -48,7 +51,7 @@ module.exports = React.createClass( {
 
 	getSelectedText: function() {
 		var text = '',
-			found = find( this.props.tabs, function( tab ) {
+			found = find( this.getNavtabs(), function( tab ) {
 				return this.getFilteredPath() === tab.path;
 			}, this );
 
@@ -67,7 +70,7 @@ module.exports = React.createClass( {
 		return (
 			<SectionNav selectedText={ this.getSelectedText() }>
 				<NavTabs>
-					{ this.props.tabs.map( function( tab ) {
+					{ this.getNavtabs().map( function( tab ) {
 						return (
 							<NavItem
 								key={ tab.path }