Fix: Simperium sync issues

RELEASE-NOTES.txt

@@ -2,16 +2,30 @@
 
 ## Future Release
 
-- Updated Log in and Sign up form to match current styling
-- Hovering over a clickable or editable UI element now show the correct cursor for its type
-- Added tests to Checkbox component
-- Renamed CHANGELOG.md to RELEASE-NOTES.txt
-- Open new note automatically upon creation
-- Open new note automatically upon creation [1566](https://github.com/Automattic/simplenote-electron/issues/1566)
-- Updated colors to use Color Studio, the color palette for Automattic products
+### Enhancements
+
+- Open new note automatically upon creation [1582](https://github.com/Automattic/simplenote-electron/pull/1582)
+- Updated colors to use Color Studio, the color palette for Automattic products [#1565](https://github.com/Automattic/simplenote-electron/pull/1565)
+
+### Fixes
+
+- Hovering over a clickable or editable UI element now show the correct cursor for its type [#1573](https://github.com/Automattic/simplenote-electron/pull/1573)
 - Fixes vertical spacing with nested markdown lists
-- Added a GitHub Action to deploy develop and master branches
 - Fixes sort order on revision slider when the timestamps don't match the change sequence [#1605](https://github.com/Automattic/simplenote-electron/pull/1605)
+- Prevents note corruption when receiving remote updates when local updates are pending
+   - [#1598](https://github.com/Automattic/simplenote-electron/pull/1598)
+   - [#1599](https://github.com/Automattic/simplenote-electron/pull/1599)
+
+### Other changes
+
+- Renamed CHANGELOG.md to RELEASE-NOTES.txt [#1576](https://github.com/Automattic/simplenote-electron/pull/1576)
+- Added tests to Checkbox component [#1580](https://github.com/Automattic/simplenote-electron/pull/1580)
+- Added a GitHub Action to deploy develop and master branches [#1603](https://github.com/Automattic/simplenote-electron/pull/1603)
+- Stopped aborting development builds on `eslint` errors [#1594](https://github.com/Automattic/simplenote-electron/pull/1594)
+
+## [v1.8.0](https://github.com/Automattic/simplenote-electron/releases/tag/v1.8.0)
+
+- Updated Log in and Sign up form to match current styling [#1459](https://github.com/Automattic/simplenote-electron/pull/1459)
 
 ## [v1.7.0](https://github.com/Automattic/simplenote-electron/releases/tag/v1.7.0) (2019-08-12)
 

lib/app-layout/index.js

@@ -30,6 +30,7 @@ export const AppLayout = ({
   onNoteClosed,
   onNoteOpened,
   onUpdateContent,
+  syncNote,
 }) => {
   const mainClasses = classNames('app-layout', {
     'is-focus-mode': isFocusMode,
@@ -74,6 +75,7 @@ export const AppLayout = ({
             noteBucket={noteBucket}
             onNoteClosed={onNoteClosed}
             onUpdateContent={onUpdateContent}
+            syncNote={syncNote}
             tags={
               get(note, 'data.tags', []) /* flattened to trigger re-render */
             }
@@ -96,6 +98,7 @@ AppLayout.propTypes = {
   onNoteClosed: PropTypes.func.isRequired,
   onNoteOpened: PropTypes.func.isRequired,
   onUpdateContent: PropTypes.func.isRequired,
+  syncNote: PropTypes.func.isRequired,
 };
 
 export default AppLayout;

lib/app.jsx

@@ -151,7 +151,12 @@ export const App = connect(
         .on('index', this.onNotesIndex)
         .on('update', this.onNoteUpdate)
         .on('update', debounce(this.onNotesIndex, 200, { maxWait: 1000 })) // refresh notes list
-        .on('remove', this.onNoteRemoved);
+        .on('remove', this.onNoteRemoved)
+        .beforeNetworkChange(noteId =>
+          this.props.actions.onNoteBeforeRemoteUpdate({
+            noteId,
+          })
+        );
 
       this.props.preferencesBucket.on('update', this.onLoadPreferences);
 
@@ -322,6 +327,10 @@ export const App = connect(
         content,
       });
 
+    syncNote = noteId => {
+      this.props.noteBucket.touch(noteId);
+    };
+
     // gets the index of the note located before the currently selected one
     getPreviousNoteIndex = note => {
       const filteredNotes = filterNotes(this.props.appState);
@@ -411,6 +420,7 @@ export const App = connect(
                 onNoteClosed={() => this.setState({ isNoteOpen: false })}
                 onNoteOpened={() => this.setState({ isNoteOpen: true })}
                 onUpdateContent={this.onUpdateContent}
+                syncNote={this.syncNote}
               />
               {state.showNoteInfo && <NoteInfo noteBucket={noteBucket} />}
             </div>

lib/flux/app-state.js

@@ -417,15 +417,40 @@ export const actionMap = new ActionMap({
       },
     },
 
+    /**
+     * A note is being changed from somewhere else! If the same
+     * note is also open and being edited, we need to make sure
+     * any in-memory changes don't get blown away. This is our
+     * chance to tell node-simperium what we want the note to
+     * be.
+     *
+     * node-simperium will compare these changes with the changes
+     * from the server and merge them together.
+     */
+    onNoteBeforeRemoteUpdate: {
+      creator({ noteId }) {
+        return (dispatch, getState) => {
+          const state = getState();
+          if (state.selectedNoteId !== noteId) {
+            return null;
+          }
+          return getState().note.data;
+        };
+      },
+    },
+
     updateNoteContent: {
       creator({ noteBucket, note, content }) {
         return (dispatch, getState) => {
           if (note) {
             note.data.content = content;
             note.data.modificationDate = Math.floor(Date.now() / 1000);
 
-            // update the bucket and sync
-            noteBucket.update(note.id, note.data);
+            // update the bucket don't sync right away
+            // as this happens per keystroke when the user is editing
+            // a note. The NoteEditor notify via props when its time
+            // to sync via Simperium
+            noteBucket.update(note.id, note.data, {}, { sync: false });
 
             // Check if note is still selected (to avoid race conditions)
             if (get(getState().appState, 'note.id') === note.id) {

lib/note-detail/index.jsx

@@ -12,7 +12,7 @@ import SimplenoteCompactLogo from '../icons/simplenote-compact';
 import renderToNode from './render-to-node';
 import toggleTask from './toggle-task';
 
-const saveDelay = 2000;
+const syncDelay = 2000;
 
 export class NoteDetail extends Component {
   static displayName = 'NoteDetail';
@@ -23,6 +23,7 @@ export class NoteDetail extends Component {
     fontSize: PropTypes.number,
     isViewingRevisions: PropTypes.bool.isRequired,
     onChangeContent: PropTypes.func.isRequired,
+    syncNote: PropTypes.func.isRequired,
     onNotePrinted: PropTypes.func.isRequired,
     note: PropTypes.object,
     noteBucket: PropTypes.object.isRequired,
@@ -41,7 +42,7 @@ export class NoteDetail extends Component {
   };
 
   componentWillMount() {
-    this.queueNoteSave = debounce(this.saveNote, saveDelay);
+    this.queueNoteSync = debounce(this.syncNote, syncDelay);
     document.addEventListener('copy', this.copyRenderedNote, false);
   }
 
@@ -51,7 +52,7 @@ export class NoteDetail extends Component {
     this.props.storeHasFocus(this.hasFocus);
 
     // Ensures note gets saved if user abruptly quits the app
-    window.addEventListener('beforeunload', this.queueNoteSave.flush);
+    window.addEventListener('beforeunload', this.queueNoteSync.flush);
 
     if (previewingMarkdown) {
       this.updateMarkdown();
@@ -64,8 +65,14 @@ export class NoteDetail extends Component {
 
   isValidNote = note => note && note.id;
 
-  componentWillReceiveProps() {
-    this.queueNoteSave.flush();
+  componentWillReceiveProps(nextProps) {
+    const isEditingNote = get(this.props, ['note', 'id'], false);
+    if (isEditingNote === false) {
+      return;
+    }
+    if (get(nextProps, ['note', 'id']) !== isEditingNote) {
+      this.queueNoteSync.flush();
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -90,7 +97,7 @@ export class NoteDetail extends Component {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('beforeunload', this.queueNoteSave.flush);
+    window.removeEventListener('beforeunload', this.queueNoteSync.flush);
     document.removeEventListener('copy', this.copyRenderedNote, false);
   }
 
@@ -153,9 +160,18 @@ export class NoteDetail extends Component {
     if (!this.isValidNote(note)) return;
 
     this.props.onChangeContent(note, content);
+    this.queueNoteSync();
     analytics.tracks.recordEvent('editor_note_edited');
   };
 
+  syncNote = () => {
+    const { note } = this.props;
+
+    if (!this.isValidNote(note)) return;
+
+    this.props.syncNote(note.id);
+  };
+
   storeEditorHasFocus = f => (this.editorHasFocus = f);
 
   storeFocusContentEditor = f => (this.focusContentEditor = f);
@@ -222,7 +238,7 @@ export class NoteDetail extends Component {
                   noteId={get(note, 'id', null)}
                   content={content}
                   filter={filter}
-                  onChangeContent={this.queueNoteSave}
+                  onChangeContent={this.saveNote}
                 />
               </div>
             )}

lib/note-editor/index.jsx

@@ -24,6 +24,7 @@ export class NoteEditor extends Component {
     onUpdateContent: PropTypes.func.isRequired,
     revision: PropTypes.object,
     setEditorMode: PropTypes.func.isRequired,
+    syncNote: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -133,6 +134,7 @@ export class NoteEditor extends Component {
           noteBucket={noteBucket}
           previewingMarkdown={markdownEnabled && editorMode === 'markdown'}
           onChangeContent={this.props.onUpdateContent}
+          syncNote={this.props.syncNote}
           fontSize={fontSize}
         />
         {note && !isTrashed && (