impl

packages/app/src/client/services/PageContainer.js

@@ -91,6 +91,7 @@ export default class PageContainer extends Container {
       pageIdOnHackmd: mainContent.getAttribute('data-page-id-on-hackmd') || null,
       hasDraftOnHackmd: !!mainContent.getAttribute('data-page-has-draft-on-hackmd'),
       isHackmdDraftUpdatingInRealtime: false,
+      isConflictingOnSave: false,
     };
 
     // parse creator, lastUpdateUser and revisionAuthor

packages/app/src/components/PageEditor/Editor.jsx

@@ -18,7 +18,7 @@ import CodeMirrorEditor from './CodeMirrorEditor';
 import TextAreaEditor from './TextAreaEditor';
 
 import pasteHelper from './PasteHelper';
-import { ConflictDiffModal } from './ConflictDiffModal';
+
 
 class Editor extends AbstractEditor {
 
@@ -30,7 +30,6 @@ class Editor extends AbstractEditor {
       dropzoneActive: false,
       isUploading: false,
       isCheatsheetModalShown: false,
-      isConflictDiffModalOpen: false,
     };
 
     this.getEditorSubstance = this.getEditorSubstance.bind(this);
@@ -244,10 +243,10 @@ class Editor extends AbstractEditor {
     return (
       <div className="m-0 navbar navbar-default navbar-editor" style={{ minHeight: 'unset' }}>
         <ul className="pl-2 nav nav-navbar">
-          { this.getNavbarItems() != null && this.getNavbarItems().map((item, idx) => {
+          {this.getNavbarItems() != null && this.getNavbarItems().map((item, idx) => {
             // eslint-disable-next-line react/no-array-index-key
             return <li key={`navbarItem-${idx}`}>{item}</li>;
-          }) }
+          })}
         </ul>
       </div>
     );
@@ -307,14 +306,14 @@ class Editor extends AbstractEditor {
             }) => {
               return (
                 <div className={this.getDropzoneClassName(isDragAccept, isDragReject)} {...getRootProps()}>
-                  { this.state.dropzoneActive && this.renderDropzoneOverlay() }
+                  {this.state.dropzoneActive && this.renderDropzoneOverlay()}
 
-                  { this.state.isComponentDidMount && this.renderNavbar() }
+                  {this.state.isComponentDidMount && this.renderNavbar()}
 
                   {/* for PC */}
-                  { !isMobile && (
+                  {!isMobile && (
                     <Subscribe to={[EditorContainer]}>
-                      { editorContainer => (
+                      {editorContainer => (
                         // eslint-disable-next-line arrow-body-style
                         <CodeMirrorEditor
                           ref={(c) => { this.cmEditor = c }}
@@ -334,7 +333,7 @@ class Editor extends AbstractEditor {
                   )}
 
                   {/* for mobile */}
-                  { isMobile && (
+                  {isMobile && (
                     <TextAreaEditor
                       ref={(c) => { this.taEditor = c }}
                       onPasteFiles={this.pasteFilesHandler}
@@ -349,7 +348,7 @@ class Editor extends AbstractEditor {
             }}
           </Dropzone>
 
-          { this.props.isUploadable
+          {this.props.isUploadable
             && (
               <button
                 type="button"
@@ -359,7 +358,7 @@ class Editor extends AbstractEditor {
                 <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;
                 Attach files
                 <span className="d-none d-sm-inline">
-                &nbsp;by dragging &amp; dropping,&nbsp;
+                  &nbsp;by dragging &amp; dropping,&nbsp;
                   <span className="btn-link">selecting them</span>,&nbsp;
                   or pasting from the clipboard.
                 </span>
@@ -368,14 +367,9 @@ class Editor extends AbstractEditor {
             )
           }
 
-          { this.renderCheatsheetModal() }
+          {this.renderCheatsheetModal()}
 
         </div>
-        <ConflictDiffModal
-          isOpen={this.state.isConflictDiffModalOpen}
-          onCancel={() => this.setState({ isConflictDiffModalOpen: false })}
-          onResolveConflict={() => {}}
-        />
       </>
     );
   }

packages/app/src/components/PageStatusAlert.jsx

@@ -8,6 +8,9 @@ import PageContainer from '~/client/services/PageContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
 
+import { ConflictDiffModal } from '~/components/PageEditor/ConflictDiffModal';
+
+
 /**
  *
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -23,6 +26,7 @@ class PageStatusAlert extends React.Component {
     super(props);
 
     this.state = {
+      isConflictDiffModalOpen: false,
     };
 
     this.getContentsForSomeoneEditingAlert = this.getContentsForSomeoneEditingAlert.bind(this);
@@ -53,15 +57,15 @@ class PageStatusAlert extends React.Component {
   getContentsForRevisionOutdated() {
     const { t } = this.props;
     return [
-      ['bg-success', 'd-hackmd-none'],
+      ['bg-warning', 'd-hackmd-none'],
       <>
         <i className="icon-fw icon-pencil"></i>
         {t('modal_resolve_conflict.file_conflicting_with_newer_remote')}
       </>,
-      <a href="#hackmd" className="btn btn-outline-white">
+      <button type="button" onClick={() => this.setState({ isConflictDiffModalOpen: true })} className="btn btn-outline-white">
         <i className="fa fa-fw fa-file-text-o mr-1"></i>
         {t('modal_resolve_conflict.resolve_conflict')}
-      </a>,
+      </button>,
     ];
   }
 
@@ -100,7 +104,7 @@ class PageStatusAlert extends React.Component {
 
   render() {
     const {
-      revisionId, revisionIdHackmdSynced, remoteRevisionId, hasDraftOnHackmd, isHackmdDraftUpdatingInRealtime,
+      revisionId, revisionIdHackmdSynced, remoteRevisionId, hasDraftOnHackmd, isHackmdDraftUpdatingInRealtime, isConflictingOnSave,
     } = this.props.pageContainer.state;
 
     const isRevisionOutdated = revisionId !== remoteRevisionId;
@@ -108,14 +112,14 @@ class PageStatusAlert extends React.Component {
 
     let getContentsFunc = null;
 
+    // when conflicting on save
+    if (isConflictingOnSave) {
+      getContentsFunc = this.getContentsForRevisionOutdated;
+    }
     // when remote revision is newer than both
-    if (isHackmdDocumentOutdated && isRevisionOutdated) {
+    else if (isHackmdDocumentOutdated && isRevisionOutdated) {
       getContentsFunc = this.getContentsForUpdatedAlert;
     }
-    // when remote revision is newer
-    else if (isRevisionOutdated) {
-      getContentsFunc = this.getContentsForRevisionOutdated;
-    }
     // when someone editing with HackMD
     else if (isHackmdDraftUpdatingInRealtime) {
       getContentsFunc = this.getContentsForSomeoneEditingAlert;
@@ -132,16 +136,23 @@ class PageStatusAlert extends React.Component {
     const [additionalClasses, label, btn] = getContentsFunc();
 
     return (
-      <div className={`card grw-page-status-alert text-white fixed-bottom animated fadeInUp faster ${additionalClasses.join(' ')}`}>
-        <div className="card-body">
-          <p className="card-text grw-card-label-container">
-            {label}
-          </p>
-          <p className="card-text grw-card-btn-container">
-            {btn}
-          </p>
+      <>
+        <div className={`card grw-page-status-alert text-white fixed-bottom animated fadeInUp faster ${additionalClasses.join(' ')}`}>
+          <div className="card-body">
+            <p className="card-text grw-card-label-container">
+              {label}
+            </p>
+            <p className="card-text grw-card-btn-container">
+              {btn}
+            </p>
+          </div>
         </div>
-      </div>
+        <ConflictDiffModal
+          isOpen={this.state.isConflictDiffModalOpen}
+          onCancel={() => this.setState({ isConflictDiffModalOpen: false })}
+          onResolveConflict={() => { }}
+        />
+      </>
     );
   }
 

packages/app/src/components/SavePageControls.jsx

@@ -50,10 +50,8 @@ class SavePageControls extends React.Component {
       logger.error('failed to save', error);
       pageContainer.showErrorToastr(error);
       if (error.code === 'conflict') {
-        const { latest, origin } = error.data;
         pageContainer.setState({
-          remoteRevisionId: latest.revisionId,
-          revisionId: origin.revisionId,
+          isConflictingOnSave: true,
         });
       }
     }