fb fix

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

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

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

@@ -10,6 +10,7 @@ import {
 import Dropzone from 'react-dropzone';
 
 import EditorContainer from '~/client/services/EditorContainer';
+import PageContainer from '~/client/services/PageContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
 import Cheatsheet from './Cheatsheet';
@@ -18,6 +19,7 @@ import CodeMirrorEditor from './CodeMirrorEditor';
 import TextAreaEditor from './TextAreaEditor';
 
 import pasteHelper from './PasteHelper';
+import { ConflictDiffModal } from '~/components/PageEditor/ConflictDiffModal';
 
 
 class Editor extends AbstractEditor {
@@ -370,6 +372,11 @@ class Editor extends AbstractEditor {
           { this.renderCheatsheetModal() }
 
         </div>
+        <ConflictDiffModal
+          isOpen={this.props.pageContainer.state.isConflictDiffModalOpen}
+          onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false })}
+          onResolveConflict={() => { }}
+        />
       </>
     );
   }
@@ -385,6 +392,7 @@ Editor.propTypes = Object.assign({
   onChange: PropTypes.func,
   onUpload: PropTypes.func,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 }, AbstractEditor.propTypes);
 
-export default withUnstatedContainers(Editor, [EditorContainer]);
+export default withUnstatedContainers(Editor, [EditorContainer, PageContainer]);

packages/app/src/components/PageStatusAlert.jsx

@@ -8,7 +8,6 @@ import PageContainer from '~/client/services/PageContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import { ConflictDiffModal } from '~/components/PageEditor/ConflictDiffModal';
 
 /**
  *
@@ -25,7 +24,6 @@ class PageStatusAlert extends React.Component {
     super(props);
 
     this.state = {
-      isConflictDiffModalOpen: false,
     };
 
     this.getContentsForSomeoneEditingAlert = this.getContentsForSomeoneEditingAlert.bind(this);
@@ -54,14 +52,14 @@ class PageStatusAlert extends React.Component {
   }
 
   getContentsForRevisionOutdated() {
-    const { t } = this.props;
+    const { t, pageContainer } = this.props;
     return [
       ['bg-warning', 'd-hackmd-none'],
       <>
         <i className="icon-fw icon-pencil"></i>
         {t('modal_resolve_conflict.file_conflicting_with_newer_remote')}
       </>,
-      <button type="button" onClick={() => this.setState({ isConflictDiffModalOpen: true })} className="btn btn-outline-white">
+      <button type="button" onClick={() => pageContainer.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')}
       </button>,
@@ -135,23 +133,16 @@ 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>
+      <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>
-        <ConflictDiffModal
-          isOpen={this.state.isConflictDiffModalOpen}
-          onCancel={() => this.setState({ isConflictDiffModalOpen: false })}
-          onResolveConflict={() => { }}
-        />
-      </>
+      </div>
     );
   }