move the shortcuts note logic into redux state

client/coral-admin/src/actions/moderation.js

@@ -6,3 +6,15 @@ export const singleView = () => ({type: actions.SINGLE_VIEW});
 // Ban User Dialog
 export const showBanUserDialog = (user, commentId, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, showRejectedNote});
 export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
+
+// hide shortcuts note
+export const hideShortcutsNote = () => {
+  try {
+    window.localStorage.setItem('coral:shortcutsNote', 'hide');
+  } catch (e) {
+
+    // above will fail in Safari private mode
+  }
+
+  return {type: actions.HIDE_SHORTCUTS_NOTE};
+};

client/coral-admin/src/components/ModerationKeysModal.js

@@ -1,6 +1,6 @@
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
-import React from 'react';
+import React, {PropTypes} from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 
@@ -26,40 +26,18 @@ const shortcuts = [
 ];
 
 export default class ModerationKeysModal extends React.Component {
-  constructor (props) {
-    super(props);
-    try {
-      if (window.localStorage.getItem('coral:shortcutsNote') === null) {
-        window.localStorage.setItem('coral:shortcutsNote', 'show');
-      }
-    } catch (e) {
 
-      // above will fail in Private Mode in some browsers.
-    }
-    this.state = {
-      shortcutsNote: window.localStorage.getItem('coral:shortcutsNote') || 'show'
-    };
-  }
-
-  closeCallToAction = () => {
-    try {
-      window.localStorage.setItem('coral:shortcutsNote', 'hide');
-      this.setState({foo: Math.random()}); // apparently this.forceUpdate() is bad, but we need a re-render
-    } catch (e) {
-
-      // when setItem fails in Safari Private mode
-      this.setState({shortcutsNote: 'hide'});
-    }
+  static propTypes = {
+    hideShortcutsNote: PropTypes.func.isRequired,
+    shortcutsNoteVisible: PropTypes.string.isRequired
   }
 
   render () {
-    const {open, onClose} = this.props;
-    const hideShortcutsNote = window.localStorage.getItem('coral:shortcutsNote') === 'hide' ||
-      this.state.dashboardNote === 'hide'; // for Safari Incognito
+    const {open, onClose, hideShortcutsNote, shortcutsNoteVisible} = this.props;
     return (
       <div>
-        <div className={styles.callToAction} style={{display: hideShortcutsNote ? 'none' : 'block'}}>
-          <div onClick={this.closeCallToAction} className={styles.closeButton}>×</div>
+        <div className={styles.callToAction} style={{display: shortcutsNoteVisible === 'show' ? 'block' : 'none'}}>
+          <div onClick={hideShortcutsNote} className={styles.closeButton}>×</div>
           <p className={styles.ctaHeader}>{lang.t('modqueue.mod-faster')}</p>
           <p><strong>{lang.t('modqueue.try-these')}:</strong></p>
           <ul>

client/coral-admin/src/constants/moderation.js

@@ -2,3 +2,4 @@ export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
+export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -10,7 +10,7 @@ import {banUser, setCommentStatus} from '../../graphql/mutations';
 
 import {fetchSettings} from 'actions/settings';
 import {updateAssets} from 'actions/assets';
-import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog} from 'actions/moderation';
+import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog, hideShortcutsNote} from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
 import BanUserDialog from '../../components/BanUserDialog';
@@ -183,6 +183,8 @@ class ModerationContainer extends Component {
           rejectComment={props.rejectComment}
         />
       <ModerationKeysModal
+          hideShortcutsNote={props.hideShortcutsNote}
+          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
       </div>
@@ -204,6 +206,7 @@ const mapDispatchToProps = dispatch => ({
   fetchSettings: () => dispatch(fetchSettings()),
   showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
+  hideShortcutsNote: () => dispatch(hideShortcutsNote()),
 });
 
 export default compose(

client/coral-admin/src/reducers/moderation.js

@@ -6,7 +6,8 @@ const initialState = Map({
   modalOpen: false,
   user: Map({}),
   commentId: null,
-  banDialog: false
+  banDialog: false,
+  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show'
 });
 
 export default function moderation (state = initialState, action) {
@@ -31,6 +32,9 @@ export default function moderation (state = initialState, action) {
   case actions.SINGLE_VIEW:
     return state
       .set('singleView', !state.get('singleView'));
+  case actions.HIDE_SHORTCUTS_NOTE:
+    return state
+      .set('shortcutsNoteVisible', 'hide');
   default :
     return state;
   }