Merge pull request #4860 from weseek/feat/79579-83140-prevent-reload-when-resolve-conflict

feat: prevent reload when resolve conflict

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

@@ -647,32 +647,21 @@ export default class PageContainer extends Container {
   retrieveMyBookmarkList() {
   }
 
-  async resolveConflict(pageId, revisionId, markdown, optionsToSave) {
+  async resolveConflict(markdown, editorMode) {
 
-    if (optionsToSave == null) {
-      const msg = '\'saveAndReload\' requires the \'optionsToSave\' param';
-      throw new Error(msg);
-    }
-
-    const { path } = this.state;
-
-    const params = Object.assign(optionsToSave, {
-      page_id: pageId,
-      revision_id: revisionId,
-      body: markdown,
-    });
+    const { pageId, remoteRevisionId, path } = this.state;
+    const editorContainer = this.appContainer.getContainer('EditorContainer');
+    const options = editorContainer.getCurrentOptionsToSave();
+    const optionsToSave = Object.assign({}, options);
 
-    const res = await apiPost('/pages.update', params);
+    const res = await this.updatePage(pageId, remoteRevisionId, markdown, optionsToSave);
 
-    const editorContainer = this.appContainer.getContainer('EditorContainer');
     editorContainer.clearDraft(path);
+    this.updateStateAfterSave(res.page, res.tags, res.revision, editorMode);
 
-    return res;
-  }
+    editorContainer.setState({ tags: res.tags });
 
-  async resolveConflictAndReload(pageId, revisionId, markdown, optionsToSave) {
-    await this.resolveConflict(pageId, revisionId, markdown, optionsToSave);
-    window.location.href = this.state.path;
+    return res;
   }
 
 }

packages/app/src/components/PageEditor/ConflictDiffModal.tsx

@@ -11,9 +11,10 @@ import { format } from 'date-fns';
 import CodeMirror from 'codemirror/lib/codemirror';
 
 import PageContainer from '../../client/services/PageContainer';
-import EditorContainer from '../../client/services/EditorContainer';
 import AppContainer from '../../client/services/AppContainer';
 
+import { useEditorMode } from '~/stores/ui';
+
 import { IRevisionOnConflict } from '../../interfaces/revision';
 import { UncontrolledCodeMirror } from '../UncontrolledCodeMirror';
 
@@ -26,9 +27,8 @@ Object.keys(DMP).forEach((key) => { window[key] = DMP[key] });
 
 type ConflictDiffModalProps = {
   isOpen: boolean | null;
-  onCancel: (() => void) | null;
+  onClose?: (() => void);
   pageContainer: PageContainer;
-  editorContainer: EditorContainer;
   appContainer: AppContainer;
   markdownOnEdit: string;
 };
@@ -43,9 +43,11 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
   const [isRevisionselected, setIsRevisionSelected] = useState<boolean>(false);
   const [codeMirrorRef, setCodeMirrorRef] = useState<HTMLDivElement | null>(null);
 
+  const { data: editorMode } = useEditorMode();
+
   const uncontrolledRef = useRef<CodeMirror>(null);
 
-  const { pageContainer, editorContainer, appContainer } = props;
+  const { pageContainer, appContainer } = props;
 
   const currentTime: Date = new Date();
 
@@ -85,33 +87,32 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
     }
   }, [codeMirrorRef, origin.revisionBody, request.revisionBody, latest.revisionBody]);
 
-  const onCancel = () => {
-    if (props.onCancel != null) {
-      props.onCancel();
+  const onClose = () => {
+    if (props.onClose != null) {
+      props.onClose();
     }
   };
 
   const onResolveConflict = async() : Promise<void> => {
     // disable button after clicked
     setIsRevisionSelected(false);
+
     const codeMirrorVal = uncontrolledRef.current?.editor.doc.getValue();
-    editorContainer.disableUnsavedWarning();
+
     try {
-      await pageContainer.resolveConflictAndReload(
-        pageContainer.state.pageId,
-        latest.revisionId,
-        codeMirrorVal,
-        editorContainer.getCurrentOptionsToSave(),
-      );
+      await pageContainer.resolveConflict(codeMirrorVal, editorMode);
+      onClose();
+      pageContainer.showSuccessToastr();
     }
     catch (error) {
       pageContainer.showErrorToastr(error);
     }
+
   };
 
   return (
-    <Modal isOpen={props.isOpen || false} toggle={onCancel} className="modal-gfm-cheatsheet" size="xl">
-      <ModalHeader tag="h4" toggle={onCancel} className="bg-primary text-light">
+    <Modal isOpen={props.isOpen || false} toggle={onClose} className="modal-gfm-cheatsheet" size="xl">
+      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light">
         <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
       <ModalBody>
@@ -220,7 +221,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
         <button
           type="button"
           className="btn btn-outline-secondary"
-          onClick={onCancel}
+          onClick={onClose}
         >
           {t('Cancel')}
         </button>
@@ -239,9 +240,8 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
 
 ConflictDiffModal.propTypes = {
   isOpen: PropTypes.bool,
-  onCancel: PropTypes.func,
+  onClose: PropTypes.func,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  editorContainer:  PropTypes.instanceOf(EditorContainer).isRequired,
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   markdownOnEdit: PropTypes.string.isRequired,
 };

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

@@ -375,10 +375,9 @@ class Editor extends AbstractEditor {
         </div>
         <ConflictDiffModal
           isOpen={this.props.pageContainer.state.isConflictDiffModalOpen}
-          onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false })}
+          onClose={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false })}
           appContainer={this.props.appContainer}
           pageContainer={this.props.pageContainer}
-          editorContainer={this.props.editorContainer}
           markdownOnEdit={this.props.value}
         />
       </>