Move editor mode to redux (#1866)

Remove print state and call print directly (#1872) This PR calls the print function directly from app.tsx rather than setting up state. By not having to set editor/preview mode we decrease the complexity of this functionality while giving the user the option to print the editor view OR the markdown styled mode. Before this change, the print function was intended to only print the formatted markdown mode but the functionality is broken. This PR removes the broken code.
Automattic · Feb 13, 2020 · 07e16ee · 07e16ee
1 parent 83bdc4d
commit 07e16ee
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 93 deletions.
diff --git a/desktop/menus/file-menu.js b/desktop/menus/file-menu.js
@@ -28,7 +28,7 @@ const submenu = [
   {
     label: '&Print…',
     accelerator: 'CommandOrControl+P',
-    click: appCommandSender({ action: 'setShouldPrintNote' }),
+    click: appCommandSender({ action: 'printNote' }),
   },
 ];
 

diff --git a/lib/app.tsx b/lib/app.tsx
@@ -31,6 +31,7 @@ import {
   values,
 } from 'lodash';
 import {
+  createNote,
   setUnsyncedNoteIds,
   toggleSimperiumConnectionStatus,
 } from './state/ui/actions';
@@ -48,6 +49,7 @@ export type OwnProps = {
 };
 
 export type DispatchProps = {
+  createNote: () => any;
   selectNote: (note: T.NoteEntity) => any;
 };
 
@@ -97,7 +99,7 @@ const mapDispatchToProps: S.MapDispatch<
     setSortType: thenReloadNotes(settingsActions.setSortType),
     toggleSortOrder: thenReloadNotes(settingsActions.toggleSortOrder),
     toggleSortTagsAlpha: thenReloadTags(settingsActions.toggleSortTagsAlpha),
-
+    createNote: () => dispatch(createNote()),
     openTagList: () => dispatch(actionCreators.toggleNavigation()),
     resetAuth: () => dispatch(reduxActions.auth.reset()),
     selectNote: (note: T.NoteEntity) => dispatch(actions.ui.selectNote(note)),
@@ -263,6 +265,10 @@ export const App = connect(
         exportZipArchive();
       }
 
+      if ('printNote' === command.action) {
+        return window.print();
+      }
+
       const canRun = overEvery(
         isObject,
         o => o.action !== null,
@@ -272,6 +278,7 @@ export const App = connect(
       if (canRun(command)) {
         // newNote expects a bucket to be passed in, but the action method itself wouldn't do that
         if (command.action === 'newNote') {
+          this.props.createNote();
           this.props.actions.newNote({
             noteBucket: this.props.noteBucket,
           });

diff --git a/lib/flux/app-state.ts b/lib/flux/app-state.ts
@@ -33,7 +33,6 @@ const toggleSystemTag = (
 };
 
 const initialState: AppState = {
-  editorMode: 'edit',
   filter: '',
   previousIndex: -1,
   notes: null,
@@ -46,7 +45,6 @@ const initialState: AppState = {
   editingTags: false,
   dialogs: [],
   nextDialogKey: 0,
-  shouldPrint: false,
   searchFocus: false,
   unsyncedNoteIds: [], // note bucket only
 };
@@ -133,12 +131,6 @@ export const actionMap = new ActionMap({
       });
     },
 
-    setEditorMode(state: AppState, { mode }: { mode: T.EditorMode }) {
-      return update(state, {
-        editorMode: { $set: mode },
-      });
-    },
-
     showDialog(state: AppState, { dialog }) {
       const { type, multiple = false, title, ...dialogProps } = dialog;
 
@@ -209,10 +201,6 @@ export const actionMap = new ActionMap({
             dispatch(this.action('showAllNotes'));
           }
 
-          if (settings.markdownEnabled) {
-            dispatch(this.action('setEditorMode', { mode: 'edit' }));
-          }
-
           // insert a new note into the store and select it
           noteBucket.add(
             {
@@ -324,12 +312,6 @@ export const actionMap = new ActionMap({
       });
     },
 
-    setShouldPrintNote(state: AppState, { shouldPrint = true }) {
-      return update(state, {
-        shouldPrint: { $set: shouldPrint },
-      });
-    },
-
     setSearchFocus(state: AppState, { searchFocus = true }) {
       return update(state, {
         searchFocus: { $set: searchFocus },

diff --git a/lib/note-detail/index.tsx b/lib/note-detail/index.tsx
@@ -21,11 +21,9 @@ export class NoteDetail extends Component {
     fontSize: PropTypes.number,
     onChangeContent: PropTypes.func.isRequired,
     syncNote: PropTypes.func.isRequired,
-    onNotePrinted: PropTypes.func.isRequired,
     note: PropTypes.object,
     noteBucket: PropTypes.object.isRequired,
     previewingMarkdown: PropTypes.bool,
-    shouldPrint: PropTypes.bool.isRequired,
     showNoteInfo: PropTypes.bool.isRequired,
     spellCheckEnabled: PropTypes.bool.isRequired,
     storeFocusEditor: PropTypes.func,
@@ -72,13 +70,7 @@ export class NoteDetail extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { note, onNotePrinted, previewingMarkdown, shouldPrint } = this.props;
-
-    // Immediately print once `shouldPrint` has been set
-    if (shouldPrint) {
-      window.print();
-      onNotePrinted();
-    }
+    const { note, previewingMarkdown } = this.props;
 
     const prevContent = get(prevProps, 'note.data.content', '');
     const nextContent = get(this.props, 'note.data.content', '');
@@ -244,15 +236,8 @@ const mapStateToProps = ({ appState: state, ui, settings }) => ({
   dialogs: state.dialogs,
   filter: state.filter,
   note: state.revision || ui.note,
-  shouldPrint: state.shouldPrint,
   showNoteInfo: state.showNoteInfo,
   spellCheckEnabled: settings.spellCheckEnabled,
 });
 
-const { setShouldPrintNote } = appState.actionCreators;
-
-const mapDispatchToProps = {
-  onNotePrinted: () => setShouldPrintNote({ shouldPrint: false }),
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(NoteDetail);
+export default connect(mapStateToProps)(NoteDetail);
diff --git a/lib/note-editor/index.tsx b/lib/note-editor/index.tsx
@@ -5,23 +5,27 @@ import appState from '../flux/app-state';
 import TagField from '../tag-field';
 import { property } from 'lodash';
 import NoteDetail from '../note-detail';
+import { toggleEditMode } from '../state/ui/actions';
 
 import * as S from '../state';
 import * as T from '../types';
 
+type DispatchProps = {
+  toggleEditMode: () => any;
+};
+
 type StateProps = {
   note: T.NoteEntity | null;
 };
 
-type Props = StateProps;
+type Props = DispatchProps & StateProps;
 
 export class NoteEditor extends Component<Props> {
   static displayName = 'NoteEditor';
 
   static propTypes = {
     allTags: PropTypes.array.isRequired,
     closeNote: PropTypes.func.isRequired,
-    editorMode: PropTypes.oneOf(['edit', 'markdown']),
     isEditorActive: PropTypes.bool.isRequired,
     isSmallScreen: PropTypes.bool.isRequired,
     filter: PropTypes.string.isRequired,
@@ -30,12 +34,10 @@ export class NoteEditor extends Component<Props> {
     onNoteClosed: PropTypes.func.isRequired,
     onUpdateContent: PropTypes.func.isRequired,
     revision: PropTypes.object,
-    setEditorMode: PropTypes.func.isRequired,
     syncNote: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
-    editorMode: 'edit',
     note: {
       data: {
         tags: [],
@@ -73,11 +75,7 @@ export class NoteEditor extends Component<Props> {
       'p' === key.toLowerCase() &&
       this.markdownEnabled
     ) {
-      const prevEditorMode = this.props.editorMode;
-      const nextEditorMode = prevEditorMode === 'edit' ? 'markdown' : 'edit';
-
-      this.props.setEditorMode({ mode: nextEditorMode });
-
+      this.props.toggleEditMode();
       event.stopPropagation();
       event.preventDefault();
       return false;
@@ -140,7 +138,7 @@ export class NoteEditor extends Component<Props> {
   };
 
   render() {
-    const { editorMode, note, noteBucket, fontSize } = this.props;
+    const { editMode, note, noteBucket, fontSize } = this.props;
     const revision = this.props.revision || note;
     const tags = (revision && revision.data && revision.data.tags) || [];
     const isTrashed = !!(note && note.data.deleted);
@@ -152,9 +150,7 @@ export class NoteEditor extends Component<Props> {
           storeHasFocus={this.storeEditorHasFocus}
           filter={this.props.filter}
           noteBucket={noteBucket}
-          previewingMarkdown={
-            this.markdownEnabled() && editorMode === 'markdown'
-          }
+          previewingMarkdown={this.markdownEnabled() && !editMode}
           onChangeContent={this.props.onUpdateContent}
           syncNote={this.props.syncNote}
           fontSize={fontSize}
@@ -176,22 +172,22 @@ export class NoteEditor extends Component<Props> {
 const mapStateToProps: S.MapState<StateProps> = ({
   appState: state,
   settings,
-  ui: { note },
+  ui: { note, editMode },
 }) => ({
   allTags: state.tags,
   filter: state.filter,
   fontSize: settings.fontSize,
-  editorMode: state.editorMode,
+  editMode,
   isEditorActive: !state.showNavigation,
   note,
   revision: state.revision,
 });
 
-const { closeNote, setEditorMode } = appState.actionCreators;
+const { closeNote } = appState.actionCreators;
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps: S.MapDispatch<DispatchProps> = dispatch => ({
   closeNote: () => dispatch(closeNote()),
-  setEditorMode: args => dispatch(setEditorMode(args)),
+  toggleEditMode: () => dispatch(toggleEditMode()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoteEditor);
diff --git a/lib/note-toolbar-container.ts b/lib/note-toolbar-container.ts
@@ -17,7 +17,6 @@ type OwnProps = {
 
 type StateProps = {
   isViewingRevisions: boolean;
-  editorMode: T.EditorMode;
   notes: T.NoteEntity[];
   revisionOrNote: T.NoteEntity | null;
 };
@@ -34,7 +33,6 @@ type DispatchProps = {
   deleteNoteForever: (args: ListChanger) => any;
   noteRevisions: (args: NoteChanger) => any;
   restoreNote: (args: ListChanger) => any;
-  setEditorMode: ({ mode }: { mode: T.EditorMode }) => any;
   setIsViewingRevisions: (isViewingRevisions: boolean) => any;
   shareNote: () => any;
   toggleFocusMode: () => any;
@@ -91,21 +89,13 @@ export class NoteToolbarContainer extends Component<Props> {
     analytics.tracks.recordEvent('editor_share_dialog_viewed');
   };
 
-  onSetEditorMode = (mode: T.EditorMode) => this.props.setEditorMode({ mode });
-
   render() {
-    const {
-      editorMode,
-      isViewingRevisions,
-      toolbar,
-      revisionOrNote,
-    } = this.props;
+    const { isViewingRevisions, toolbar, revisionOrNote } = this.props;
 
     const handlers = {
       onCloseNote: this.onCloseNote,
       onDeleteNoteForever: this.onDeleteNoteForever,
       onRestoreNote: this.onRestoreNote,
-      onSetEditorMode: this.onSetEditorMode,
       onShowNoteInfo: this.props.toggleNoteInfo,
       onShowRevisions: this.onShowRevisions,
       onShareNote: this.onShareNote,
@@ -122,7 +112,7 @@ export class NoteToolbarContainer extends Component<Props> {
       ? revisionOrNote.data.systemTags.includes('markdown')
       : false;
 
-    return cloneElement(toolbar, { ...handlers, editorMode, markdownEnabled });
+    return cloneElement(toolbar, { ...handlers, markdownEnabled });
   }
 }
 
@@ -131,7 +121,6 @@ const mapStateToProps: S.MapState<StateProps> = ({
   ui: { filteredNotes, note },
 }) => ({
   isViewingRevisions: appState.isViewingRevisions,
-  editorMode: appState.editorMode,
   notes: filteredNotes,
   revisionOrNote: appState.revision || note,
 });
@@ -141,7 +130,6 @@ const {
   deleteNoteForever,
   noteRevisions,
   restoreNote,
-  setEditorMode,
   setIsViewingRevisions,
   showDialog,
   toggleNoteInfo,
@@ -153,7 +141,6 @@ const mapDispatchToProps: S.MapDispatch<DispatchProps> = dispatch => ({
   deleteNoteForever: args => dispatch(deleteNoteForever(args)),
   noteRevisions: args => dispatch(noteRevisions(args)),
   restoreNote: args => dispatch(restoreNote(args)),
-  setEditorMode: args => dispatch(setEditorMode(args)),
   setIsViewingRevisions: (isViewingRevisions: boolean) => {
     dispatch(setIsViewingRevisions({ isViewingRevisions }));
   },