Improve history block

Author: 64json

src/frontend/components/App/index.jsx

@@ -35,6 +35,8 @@ class App extends BaseComponent {
     };
 
     this.codeEditorRef = React.createRef();
+
+    this.ignoreHistoryBlock = this.ignoreHistoryBlock.bind(this);
   }
 
   componentDidMount() {
@@ -50,17 +52,14 @@ class App extends BaseComponent {
       .then(({ categories }) => this.props.setCategories(categories))
       .catch(this.handleError);
 
-    this.props.history.block((location) => {
-      if (location.pathname === this.props.location.pathname) return;
-      if (!this.isSaved()) return 'Are you sure want to discard changes?';
-    });
+    this.toggleHistoryBlock(true);
   }
 
   componentWillUnmount() {
     delete window.signIn;
     delete window.signOut;
 
-    window.onbeforeunload = undefined;
+    this.toggleHistoryBlock(false);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -74,6 +73,24 @@ class App extends BaseComponent {
     }
   }
 
+  toggleHistoryBlock(enable = !this.unblock) {
+    if (enable) {
+      this.unblock = this.props.history.block((location) => {
+        if (location.pathname === this.props.location.pathname) return;
+        if (!this.isSaved()) return 'Are you sure want to discard changes?';
+      });
+    } else {
+      this.unblock();
+      this.unblock = undefined;
+    }
+  }
+
+  ignoreHistoryBlock(process) {
+    this.toggleHistoryBlock(false);
+    process();
+    this.toggleHistoryBlock(true);
+  }
+
   signIn(accessToken) {
     Cookies.set('access_token', accessToken);
     GitHubApi.auth(accessToken)
@@ -172,7 +189,7 @@ class App extends BaseComponent {
     const { ext } = this.props.env;
     const { files } = this.props.current;
     const language = languages.find(language => language.ext === ext);
-    const file = {...language.skeleton};
+    const file = { ...language.skeleton };
     let count = 0;
     while (files.some(existingFile => existingFile.name === file.name)) file.name = `code-${++count}.${ext}`;
     this.props.addFile(file);
@@ -239,7 +256,8 @@ class App extends BaseComponent {
           <meta name="description" content={description} />
         </Helmet>
         <Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()} saved={saved}
-                navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()} file={file} />
+                navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()} file={file}
+                ignoreHistoryBlock={this.ignoreHistoryBlock} />
         <ResizableContainer className={styles.workspace} horizontal weights={workspaceWeights}
                             visibles={[navigatorOpened, true, true]}
                             onChangeWeights={weights => this.handleChangeWorkspaceWeights(weights)}>

src/frontend/components/Header/index.jsx

@@ -98,13 +98,11 @@ class Header extends BaseComponent {
     const { scratchPaper } = this.props.current;
     const { gistId } = scratchPaper;
     if (gistId === 'new') {
-      this.props.markSaved();
-      this.props.history.push('/');
+      this.props.ignoreHistoryBlock(() => this.props.history.push('/'));
     } else {
       GitHubApi.deleteGist(gistId)
         .then(() => {
-          this.props.markSaved();
-          this.props.history.push('/');
+          this.props.ignoreHistoryBlock(() => this.props.history.push('/'));
         })
         .then(this.props.loadScratchPapers)
         .catch(this.handleError);

src/frontend/reducers/current.js

@@ -26,7 +26,6 @@ const setScratchPaper = createAction(`${prefix}/SET_SCRATCH_PAPER`, ({ login, gi
     lastFiles: files,
   };
 });
-const markSaved = createAction(`${prefix}/MARK_SAVED`);
 const modifyTitle = createAction(`${prefix}/MODIFY_TITLE`, title => ({ title }));
 const addFile = createAction(`${prefix}/ADD_FILE`, file => ({ file }));
 const modifyFile = createAction(`${prefix}/MODIFY_FILE`, file => ({ file }));
@@ -37,7 +36,6 @@ export const actions = {
   setHome,
   setAlgorithm,
   setScratchPaper,
-  markSaved,
   modifyTitle,
   addFile,
   modifyFile,
@@ -68,13 +66,6 @@ export default handleActions({
     ...state,
     ...payload,
   }),
-  [markSaved]: state => {
-    return {
-      ...state,
-      lastTitles: state.titles,
-      lastFiles: state.files,
-    };
-  },
   [modifyTitle]: (state, { payload }) => {
     const { title } = payload;
     return {