Refactors closeNote to Redux (#1895)

Refactors closeNote moving the function from the flux actions to Redux. In doing this it required the removal of the note list open/closed that was being stored in the component state of app.tsx.
Automattic · Feb 17, 2020 · 586dadc · 586dadc
1 parent 85bae61
commit 586dadc
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 108 deletions.
diff --git a/lib/app-layout/index.tsx b/lib/app-layout/index.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, Suspense } from 'react';
 import classNames from 'classnames';
+import { connect } from 'react-redux';
 
 import NoteToolbarContainer from '../note-toolbar-container';
 import NoteToolbar from '../note-toolbar';
@@ -8,6 +9,7 @@ import SearchBar from '../search-bar';
 import SimplenoteCompactLogo from '../icons/simplenote-compact';
 import TransitionDelayEnter from '../components/transition-delay-enter';
 
+import * as S from './state';
 import * as T from '../types';
 
 const NoteList = React.lazy(() =>
@@ -18,21 +20,24 @@ const NoteEditor = React.lazy(() =>
   import(/* webpackChunkName: 'note-editor' */ '../note-editor')
 );
 
-type Props = {
+type OwnProps = {
   isFocusMode: boolean;
   isNavigationOpen: boolean;
   isNoteInfoOpen: boolean;
-  isNoteOpen: boolean;
   isSmallScreen: boolean;
   note: T.NoteEntity;
   noteBucket: T.Bucket<T.Note>;
   revisions: T.NoteEntity[];
-  onNoteClosed: Function;
-  onNoteOpened: Function;
   onUpdateContent: Function;
   syncNote: Function;
 };
 
+type StateProps = {
+  isNoteOpen: boolean;
+};
+
+type Props = OwnProps & StateProps;
+
 export const AppLayout: FunctionComponent<Props> = ({
   isFocusMode = false,
   isNavigationOpen,
@@ -41,8 +46,6 @@ export const AppLayout: FunctionComponent<Props> = ({
   isSmallScreen,
   noteBucket,
   revisions,
-  onNoteClosed,
-  onNoteOpened,
   onUpdateContent,
   syncNote,
 }) => {
@@ -65,27 +68,21 @@ export const AppLayout: FunctionComponent<Props> = ({
     <div className={mainClasses}>
       <Suspense fallback={placeholder}>
         <div className="app-layout__source-column theme-color-bg theme-color-fg">
-          <SearchBar noteBucket={noteBucket} onNoteOpened={onNoteOpened} />
-          <NoteList
-            noteBucket={noteBucket}
-            isSmallScreen={isSmallScreen}
-            onNoteOpened={onNoteOpened}
-          />
+          <SearchBar noteBucket={noteBucket} />
+          <NoteList noteBucket={noteBucket} isSmallScreen={isSmallScreen} />
         </div>
         <div className="app-layout__note-column theme-color-bg theme-color-fg theme-color-border">
           <RevisionSelector
             revisions={revisions || []}
             onUpdateContent={onUpdateContent}
           />
           <NoteToolbarContainer
-            onNoteClosed={onNoteClosed}
             noteBucket={noteBucket}
             toolbar={<NoteToolbar />}
           />
           <NoteEditor
             isSmallScreen={isSmallScreen}
             noteBucket={noteBucket}
-            onNoteClosed={onNoteClosed}
             onUpdateContent={onUpdateContent}
             syncNote={syncNote}
           />
@@ -95,4 +92,8 @@ export const AppLayout: FunctionComponent<Props> = ({
   );
 };
 
-export default AppLayout;
+const mapStateToProps: S.MapState<StateProps> = ({ ui: { showNoteList } }) => ({
+  isNoteOpen: !showNoteList,
+});
+
+export default connect(mapStateToProps)(AppLayout);
diff --git a/lib/app.tsx b/lib/app.tsx
@@ -32,6 +32,7 @@ import {
 } from 'lodash';
 import {
   createNote,
+  closeNote,
   setUnsyncedNoteIds,
   toggleSimperiumConnectionStatus,
 } from './state/ui/actions';
@@ -50,6 +51,7 @@ export type OwnProps = {
 
 export type DispatchProps = {
   createNote: () => any;
+  closeNote: () => any;
   selectNote: (note: T.NoteEntity) => any;
 };
 
@@ -95,6 +97,7 @@ const mapDispatchToProps: S.MapDispatch<
       ]),
       dispatch
     ),
+    closeNote: () => dispatch(closeNote()),
     loadTags: () => dispatch(loadTags()),
     setSortType: thenReloadNotes(settingsActions.setSortType),
     toggleSortOrder: thenReloadNotes(settingsActions.toggleSortOrder),
@@ -158,10 +161,6 @@ export const App = connect(
       onSignOut: () => {},
     };
 
-    state = {
-      isNoteOpen: false,
-    };
-
     UNSAFE_componentWillMount() {
       if (isElectron()) {
         this.initializeElectron();
@@ -217,25 +216,11 @@ export const App = connect(
     }
 
     componentDidUpdate(prevProps) {
-      const { settings, isSmallScreen } = this.props;
+      const { settings } = this.props;
 
       if (settings !== prevProps.settings) {
         ipc.send('settingsUpdate', settings);
       }
-
-      // If note has just been loaded
-      if (prevProps.appState.note === undefined && this.props.appState.note) {
-        this.setState({ isNoteOpen: true });
-      }
-
-      if (isSmallScreen !== prevProps.isSmallScreen) {
-        this.setState({
-          isNoteOpen: Boolean(
-            this.props.appState.note &&
-              (settings.focusModeEnabled || !isSmallScreen)
-          ),
-        });
-      }
     }
 
     handleShortcut = event => {
@@ -305,7 +290,7 @@ export const App = connect(
       actions.authChanged();
 
       if (!client.isAuthorized()) {
-        actions.closeNote();
+        this.props.closeNote();
         return resetAuth();
       }
 
@@ -482,13 +467,10 @@ export const App = connect(
               <AppLayout
                 isFocusMode={settings.focusModeEnabled}
                 isNavigationOpen={state.showNavigation}
-                isNoteOpen={this.state.isNoteOpen}
                 isNoteInfoOpen={showNoteInfo}
                 isSmallScreen={isSmallScreen}
                 noteBucket={noteBucket}
                 revisions={state.revisions}
-                onNoteClosed={() => this.setState({ isNoteOpen: false })}
-                onNoteOpened={() => this.setState({ isNoteOpen: true })}
                 onUpdateContent={this.onUpdateContent}
                 syncNote={this.syncNote}
               />

diff --git a/lib/flux/app-state.ts b/lib/flux/app-state.ts
@@ -347,12 +347,6 @@ export const actionMap = new ActionMap({
       });
     },
 
-    closeNote(state: AppState, { previousIndex = -1 }) {
-      return update(state, {
-        previousIndex: { $set: previousIndex },
-      });
-    },
-
     /**
      * A note is being changed from somewhere else! If the same
      * note is also open and being edited, we need to make sure
@@ -395,12 +389,10 @@ export const actionMap = new ActionMap({
         note: T.NoteEntity;
         previousIndex: number;
       }) {
-        return dispatch => {
+        return () => {
           if (note) {
             note.data.deleted = true;
             noteBucket.update(note.id, note.data);
-
-            dispatch(this.action('closeNote', { previousIndex }));
           }
         };
       },
@@ -420,8 +412,6 @@ export const actionMap = new ActionMap({
           if (note) {
             note.data.deleted = false;
             noteBucket.update(note.id, note.data);
-
-            dispatch(this.action('closeNote', { previousIndex }));
           }
         };
       },
@@ -439,8 +429,6 @@ export const actionMap = new ActionMap({
       }) {
         return dispatch => {
           noteBucket.remove(note.id);
-
-          dispatch(this.action('closeNote', { previousIndex }));
           dispatch(this.action('loadNotes', { noteBucket }));
         };
       },
@@ -474,8 +462,6 @@ export const actionMap = new ActionMap({
             state.notes,
             note => note.data.deleted
           );
-
-          dispatch(this.action('closeNote'));
           deleted.forEach(note => noteBucket.remove(note.id));
           dispatch(this.action('notesLoaded', { notes }));
         };

diff --git a/lib/note-editor/index.tsx b/lib/note-editor/index.tsx
@@ -7,6 +7,8 @@ import { property } from 'lodash';
 import NoteDetail from '../note-detail';
 import { toggleEditMode } from '../state/ui/actions';
 
+import { closeNote } from '../state/ui/actions';
+
 import * as S from '../state';
 import * as T from '../types';
 
@@ -25,12 +27,10 @@ export class NoteEditor extends Component<Props> {
 
   static propTypes = {
     allTags: PropTypes.array.isRequired,
-    closeNote: PropTypes.func.isRequired,
     isEditorActive: PropTypes.bool.isRequired,
     isSmallScreen: PropTypes.bool.isRequired,
     noteBucket: PropTypes.object.isRequired,
     fontSize: PropTypes.number,
-    onNoteClosed: PropTypes.func.isRequired,
     onUpdateContent: PropTypes.func.isRequired,
     revision: PropTypes.object,
     syncNote: PropTypes.func.isRequired,
@@ -88,8 +88,6 @@ export class NoteEditor extends Component<Props> {
       'n' === key.toLowerCase()
     ) {
       this.props.closeNote();
-      this.props.onNoteClosed();
-
       event.stopPropagation();
       event.preventDefault();
       return false;
@@ -180,8 +178,6 @@ const mapStateToProps: S.MapState<StateProps> = ({
   revision: state.revision,
 });
 
-const { closeNote } = appState.actionCreators;
-
 const mapDispatchToProps: S.MapDispatch<DispatchProps> = dispatch => ({
   closeNote: () => dispatch(closeNote()),
   toggleEditMode: () => dispatch(toggleEditMode()),

diff --git a/lib/note-list/index.tsx b/lib/note-list/index.tsx
@@ -29,6 +29,8 @@ import {
 } from './decorators';
 import TagSuggestions, { getMatchingTags } from '../tag-suggestions';
 
+import { closeNote } from '../state/ui/actions';
+
 import * as S from '../state';
 import * as T from '../types';
 
@@ -205,7 +207,6 @@ const renderNote = (
     searchQuery,
     noteDisplay,
     selectedNoteId,
-    onNoteOpened,
     onSelectNote,
     onPinNote,
     isSmallScreen,
@@ -248,7 +249,6 @@ const renderNote = (
 
   const selectNote = () => {
     onSelectNote(note.id);
-    onNoteOpened();
   };
 
   return (
@@ -310,11 +310,9 @@ export class NoteList extends Component<Props> {
   list = createRef();
 
   static propTypes = {
-    closeNote: PropTypes.func.isRequired,
     tagResultsFound: PropTypes.number.isRequired,
     isSmallScreen: PropTypes.bool.isRequired,
     notes: PropTypes.array.isRequired,
-    onNoteOpened: PropTypes.func.isRequired,
     onSelectNote: PropTypes.func.isRequired,
     onPinNote: PropTypes.func.isRequired,
     noteDisplay: PropTypes.string.isRequired,
@@ -399,7 +397,6 @@ export class NoteList extends Component<Props> {
       searchQuery,
       hasLoaded,
       selectedNoteId,
-      onNoteOpened,
       onSelectNote,
       onEmptyTrash,
       noteDisplay,
@@ -414,7 +411,6 @@ export class NoteList extends Component<Props> {
     const renderNoteRow = renderNote(notes, {
       searchQuery,
       noteDisplay,
-      onNoteOpened,
       onSelectNote,
       onPinNote: this.onPinNote,
       selectedNoteId,
@@ -479,12 +475,7 @@ export class NoteList extends Component<Props> {
     this.props.onPinNote(note, !note.data.systemTags.includes('pinned'));
 }
 
-const {
-  closeNote,
-  emptyTrash,
-  loadAndSelectNote,
-  pinNote,
-} = appState.actionCreators;
+const { emptyTrash, loadAndSelectNote, pinNote } = appState.actionCreators;
 const { recordEvent } = tracks;
 
 const mapStateToProps: S.MapState<StateProps> = ({