Put "(Unsaved)" in front of title if not saved

Author: 64json

src/frontend/components/App/index.jsx

@@ -210,10 +210,20 @@ class App extends React.Component {
     this.setState({ navigatorOpened });
   }
 
+  isGistSaved() {
+    const { titles, files, lastTitles, lastFiles } = this.props.current;
+    const serializeTitles = titles => JSON.stringify(titles);
+    const serializeFiles = files => JSON.stringify(files.map(({ name, content }) => ({ name, content })));
+    return serializeTitles(titles) === serializeTitles(lastTitles) &&
+      serializeFiles(files) === serializeFiles(lastFiles);
+  }
+
   render() {
     const { navigatorOpened, workspaceWeights, viewerTabIndex, editorTabIndex } = this.state;
     const { titles, files } = this.props.current;
 
+    const gistSaved = this.isGistSaved();
+
     const readmeFile = files.find(file => file.name === 'README.md') || {
       name: 'README.md',
       content: `# ${titles[1]}\nREADME.md not found`,
@@ -236,13 +246,13 @@ class App extends React.Component {
     return (
       <div className={styles.app}>
         <Helmet>
-          <title>{titles.join(' - ')}</title>
+          <title>{gistSaved ? '' : '(Unsaved) '}{titles.join(' - ')}</title>
           <meta name="description" content={description} />
         </Helmet>
         <Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()}
                 navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()}
                 loadAlgorithm={params => this.loadAlgorithm(params)}
-                onAction={() => this.handleChangeViewerTabIndex(1)} />
+                onAction={() => this.handleChangeViewerTabIndex(1)} gistSaved={gistSaved} />
         <ResizableContainer className={styles.workspace} horizontal weights={workspaceWeights}
                             visibles={[navigatorOpened, true, true]}
                             onChangeWeights={weights => this.handleChangeWorkspaceWeights(weights)}>

src/frontend/components/Header/index.jsx

@@ -97,17 +97,9 @@ class Header extends React.Component {
       .catch(this.props.showErrorToast);
   }
 
-  isGistSaved() {
-    const { titles, files, lastTitles, lastFiles } = this.props.current;
-    const serializeTitles = titles => JSON.stringify(titles);
-    const serializeFiles = files => JSON.stringify(files.map(({ name, content }) => ({ name, content })));
-    return serializeTitles(titles) === serializeTitles(lastTitles) &&
-      serializeFiles(files) === serializeFiles(lastFiles);
-  }
-
   render() {
     const { interval, paused, started } = this.state;
-    const { className, onClickTitleBar, navigatorOpened, onAction } = this.props;
+    const { className, onClickTitleBar, navigatorOpened, onAction, gistSaved } = this.props;
     const { gistId, titles } = this.props.current;
     const { ext, user } = this.props.env;
 
@@ -131,7 +123,7 @@ class Header extends React.Component {
             </Button>
           </div>
           <div className={styles.section}>
-            <Button icon={faSave} primary disabled={!gistId || this.isGistSaved()}
+            <Button icon={faSave} primary disabled={!gistId || gistSaved}
                     onClick={() => this.saveGist()}>Save</Button>
             <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()}
                     confirmNeeded>Delete</Button>