move showNoteInfo and various accoutrements into redux

lib/app.tsx

@@ -453,6 +453,7 @@ export const App = connect(
         settings,
         tagBucket,
         isSmallScreen,
+        ui: { showNoteInfo },
       } = this.props;
       const isMacApp = isElectronMac();
 
@@ -464,7 +465,7 @@ export const App = connect(
       });
 
       const mainClasses = classNames('simplenote-app', {
-        'note-info-open': state.showNoteInfo,
+        'note-info-open': showNoteInfo,
         'navigation-open': state.showNavigation,
         'is-electron': isElectron(),
         'is-macos': isMacApp,
@@ -482,7 +483,7 @@ export const App = connect(
                 isFocusMode={settings.focusModeEnabled}
                 isNavigationOpen={state.showNavigation}
                 isNoteOpen={this.state.isNoteOpen}
-                isNoteInfoOpen={state.showNoteInfo}
+                isNoteInfoOpen={showNoteInfo}
                 isSmallScreen={isSmallScreen}
                 noteBucket={noteBucket}
                 revisions={state.revisions}
@@ -491,7 +492,7 @@ export const App = connect(
                 onUpdateContent={this.onUpdateContent}
                 syncNote={this.syncNote}
               />
-              {state.showNoteInfo && <NoteInfo noteBucket={noteBucket} />}
+              {showNoteInfo && <NoteInfo noteBucket={noteBucket} />}
             </div>
           ) : (
             <Auth

lib/flux/app-state.ts

@@ -39,7 +39,6 @@ const initialState: AppState = {
   revision: null,
   showTrash: false,
   showNavigation: false,
-  showNoteInfo: false,
   isViewingRevisions: false,
   editingTags: false,
   dialogs: [],
@@ -70,7 +69,6 @@ export const actionMap = new ActionMap({
 
       return update(state, {
         showNavigation: { $set: true },
-        showNoteInfo: { $set: false },
       });
     },
 
@@ -490,20 +488,6 @@ export const actionMap = new ActionMap({
       });
     },
 
-    toggleNoteInfo(state: AppState) {
-      if (state.showNoteInfo) {
-        return update(state, {
-          showNoteInfo: { $set: false },
-        });
-      }
-
-      return update(state, {
-        showNoteInfo: { $set: true },
-        showNavigation: { $set: false },
-        editingTags: { $set: false },
-      });
-    },
-
     tagsLoaded(
       state: AppState,
       { tags, sortTagsAlpha }: { tags: T.TagEntity[]; sortTagsAlpha: boolean }

lib/note-detail/index.tsx

@@ -10,9 +10,17 @@ import SimplenoteCompactLogo from '../icons/simplenote-compact';
 import renderToNode from './render-to-node';
 import toggleTask from './toggle-task';
 
+import * as S from '../state';
+
 const syncDelay = 2000;
 
-export class NoteDetail extends Component {
+type StateProps = {
+  showNoteInfo: boolean;
+};
+
+type Props = StateProps;
+
+export class NoteDetail extends Component<Props> {
   static displayName = 'NoteDetail';
 
   static propTypes = {
@@ -23,7 +31,6 @@ export class NoteDetail extends Component {
     note: PropTypes.object,
     noteBucket: PropTypes.object.isRequired,
     previewingMarkdown: PropTypes.bool,
-    showNoteInfo: PropTypes.bool.isRequired,
     spellCheckEnabled: PropTypes.bool.isRequired,
     storeFocusEditor: PropTypes.func,
     storeHasFocus: PropTypes.func,
@@ -226,10 +233,14 @@ export class NoteDetail extends Component {
   }
 }
 
-const mapStateToProps = ({ appState: state, ui, settings }) => ({
+const mapStateToProps: S.MapState<StateProps> = ({
+  appState: state,
+  ui,
+  settings,
+}) => ({
   dialogs: state.dialogs,
   note: state.revision || ui.note,
-  showNoteInfo: state.showNoteInfo,
+  showNoteInfo: ui.showNoteInfo,
   spellCheckEnabled: settings.spellCheckEnabled,
 });
 

lib/note-info/index.tsx

@@ -1,27 +1,39 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import onClickOutside from 'react-onclickoutside';
 import { includes, isEmpty } from 'lodash';
+import format from 'date-fns/format';
+
+import appState from '../flux/app-state';
 import PanelTitle from '../components/panel-title';
 import ToggleControl from '../controls/toggle';
-import format from 'date-fns/format';
 import CrossIcon from '../icons/cross';
-import { connect } from 'react-redux';
-import appState from '../flux/app-state';
-import { setMarkdown } from '../state/settings/actions';
+
+import actions from '../state/actions';
 
 import * as S from '../state';
 import * as T from '../types';
 
+type OwnProps = {
+  noteBucket: T.Bucket<T.Note>;
+};
+
 type StateProps = {
   isMarkdown: boolean;
   isPinned: boolean;
   note: T.NoteEntity | null;
 };
 
-type Props = StateProps;
+type DispatchProps = {
+  onOutsideClick: () => any;
+};
+
+type Props = OwnProps & StateProps & DispatchProps;
 
 export class NoteInfo extends Component<Props> {
+  static displayName = 'NoteInfo';
+
   static propTypes = {
     markdownEnabled: PropTypes.bool,
     onPinNote: PropTypes.func.isRequired,
@@ -194,21 +206,24 @@ function characterCount(content) {
   );
 }
 
-const { markdownNote, pinNote, toggleNoteInfo } = appState.actionCreators;
+const { markdownNote, pinNote } = appState.actionCreators;
 
 const mapStateToProps: S.MapState<StateProps> = ({ ui: { note } }) => ({
   note,
   isMarkdown: !!note && note.data.systemTags.includes('markdown'),
   isPinned: !!note && note.data.systemTags.includes('pinned'),
 });
 
-const mapDispatchToProps = (dispatch, { noteBucket }) => ({
+const mapDispatchToProps: S.MapDispatch<DispatchProps, OwnProps> = (
+  dispatch,
+  { noteBucket }
+) => ({
   onMarkdownNote: (note, markdown = true) => {
     dispatch(markdownNote({ markdown, note, noteBucket }));
     // Update global setting to set markdown flag for new notes
-    dispatch(setMarkdown(markdown));
+    dispatch(actions.settings.setMarkdown(markdown));
   },
-  onOutsideClick: () => dispatch(toggleNoteInfo()),
+  onOutsideClick: () => dispatch(actions.ui.toggleNoteInfo()),
   onPinNote: (note, pin) => dispatch(pinNote({ noteBucket, note, pin })),
 });
 

lib/note-toolbar-container.ts

@@ -36,7 +36,6 @@ type DispatchProps = {
   setIsViewingRevisions: (isViewingRevisions: boolean) => any;
   shareNote: () => any;
   toggleFocusMode: () => any;
-  toggleNoteInfo: () => any;
   trashNote: (args: ListChanger) => any;
 };
 
@@ -96,7 +95,6 @@ export class NoteToolbarContainer extends Component<Props> {
       onCloseNote: this.onCloseNote,
       onDeleteNoteForever: this.onDeleteNoteForever,
       onRestoreNote: this.onRestoreNote,
-      onShowNoteInfo: this.props.toggleNoteInfo,
       onShowRevisions: this.onShowRevisions,
       onShareNote: this.onShareNote,
       onTrashNote: this.onTrashNote,
@@ -132,7 +130,6 @@ const {
   restoreNote,
   setIsViewingRevisions,
   showDialog,
-  toggleNoteInfo,
   trashNote,
 } = appState.actionCreators;
 
@@ -146,7 +143,6 @@ const mapDispatchToProps: S.MapDispatch<DispatchProps> = dispatch => ({
   },
   shareNote: () => dispatch(showDialog({ dialog: DialogTypes.SHARE })),
   toggleFocusMode: () => dispatch(toggleFocusMode()),
-  toggleNoteInfo: () => dispatch(toggleNoteInfo()),
   trashNote: args => dispatch(trashNote(args)),
 });
 

lib/note-toolbar/index.tsx

@@ -12,13 +12,16 @@ import RevisionsIcon from '../icons/revisions';
 import TrashIcon from '../icons/trash';
 import ShareIcon from '../icons/share';
 import SidebarIcon from '../icons/sidebar';
+
 import { toggleEditMode } from '../state/ui/actions';
+import { toggleNoteInfo } from '../state/ui/actions';
 
 import * as S from '../state';
 import * as T from '../types';
 
 type DispatchProps = {
   toggleEditMode: () => any;
+  toggleNoteInfo: () => any;
 };
 
 type StateProps = {
@@ -38,7 +41,6 @@ export class NoteToolbar extends Component<Props> {
     onShowRevisions: PropTypes.func,
     onShareNote: PropTypes.func,
     onCloseNote: PropTypes.func,
-    onShowNoteInfo: PropTypes.func,
     setIsViewingRevisions: PropTypes.func,
     toggleFocusMode: PropTypes.func.isRequired,
     markdownEnabled: PropTypes.bool,
@@ -48,7 +50,6 @@ export class NoteToolbar extends Component<Props> {
     onCloseNote: noop,
     onDeleteNoteForever: noop,
     onRestoreNote: noop,
-    onShowNoteInfo: noop,
     onShowRevisions: noop,
     onShareNote: noop,
     onTrashNote: noop,
@@ -73,7 +74,7 @@ export class NoteToolbar extends Component<Props> {
   }
 
   renderNormal = () => {
-    const { editMode, markdownEnabled, note } = this.props;
+    const { editMode, markdownEnabled, note, toggleNoteInfo } = this.props;
     return !note ? (
       <div className="note-toolbar-placeholder theme-color-border" />
     ) : (
@@ -128,7 +129,7 @@ export class NoteToolbar extends Component<Props> {
           <div className="note-toolbar__button">
             <IconButton
               icon={<InfoIcon />}
-              onClick={this.props.onShowNoteInfo}
+              onClick={toggleNoteInfo}
               title="Info"
             />
           </div>
@@ -181,8 +182,9 @@ const mapStateToProps: S.MapState<StateProps> = ({
   note,
 });
 
-const mapDispatchToProps: S.MapDispatch<DispatchProps> = dispatch => ({
-  toggleEditMode: () => dispatch(toggleEditMode()),
-});
+const mapDispatchToProps: S.MapDispatch<DispatchProps> = {
+  toggleEditMode,
+  toggleNoteInfo,
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoteToolbar);

lib/state/action-types.ts

@@ -59,6 +59,7 @@ export type SetUnsyncedNoteIds = Action<
   'SET_UNSYNCED_NOTE_IDS',
   { noteIds: T.EntityId[] }
 >;
+export type ToggleNoteInfo = Action<'NOTE_INFO_TOGGLE'>;
 export type ToggleSimperiumConnectionStatus = Action<
   'SIMPERIUM_CONNECTION_STATUS_TOGGLE',
   { simperiumConnected: boolean }
@@ -89,6 +90,7 @@ export type ActionType =
   | SetUnsyncedNoteIds
   | SetWPToken
   | ToggleEditMode
+  | ToggleNoteInfo
   | ToggleSimperiumConnectionStatus
   | ToggleTagDrawer;
 
@@ -193,5 +195,4 @@ type LegacyAction =
   | Action<'App.showAllNotesAndSelectFirst'>
   | Action<'App.showDialog', { dialog: object }>
   | Action<'App.tagsLoaded', { tags: T.TagEntity[]; sortTagsAlpha: boolean }>
-  | Action<'App.toggleNavigation'>
-  | Action<'App.toggleNoteInfo'>;
+  | Action<'App.toggleNavigation'>;

lib/state/index.ts

@@ -39,7 +39,6 @@ export type AppState = {
   revision: T.NoteEntity | null;
   searchFocus: boolean;
   showNavigation: boolean;
-  showNoteInfo: boolean;
   showTrash: boolean;
   tags: T.TagEntity[];
   tag?: T.TagEntity;

lib/state/ui/actions.ts

@@ -39,6 +39,10 @@ export const toggleEditMode: A.ActionCreator<A.ToggleEditMode> = () => ({
   type: 'TOGGLE_EDIT_MODE',
 });
 
+export const toggleNoteInfo: A.ActionCreator<A.ToggleNoteInfo> = () => ({
+  type: 'NOTE_INFO_TOGGLE',
+});
+
 export const toggleTagDrawer: A.ActionCreator<A.ToggleTagDrawer> = (
   show: boolean
 ) => ({

lib/state/ui/reducer.ts

@@ -65,6 +65,19 @@ const visiblePanes: A.Reducer<string[]> = (
   return state;
 };
 
+const showNoteInfo: A.Reducer<boolean> = (state = false, action) => {
+  switch (action.type) {
+    case 'NOTE_INFO_TOGGLE':
+      return !state;
+
+    case 'App.toggleNavigation':
+      return false;
+
+    default:
+      return state;
+  }
+};
+
 const note: A.Reducer<T.NoteEntity | null> = (state = null, action) => {
   switch (action.type) {
     case 'App.selectNote':
@@ -92,6 +105,7 @@ export default combineReducers({
   listTitle,
   note,
   searchQuery,
+  showNoteInfo,
   simperiumConnected,
   unsyncedNoteIds,
   visiblePanes,