Fix minor bugs

Author: 64json

src/frontend/components/App/index.jsx

@@ -36,6 +36,8 @@ class App extends React.Component {
       workspaceWeights: [1, 2, 2],
       editorTabIndex: -1,
     };
+
+    this.codeEditorRef = React.createRef();
   }
 
   componentDidMount() {
@@ -141,7 +143,7 @@ class App extends React.Component {
           contributors: undefined,
         }, {
           name: `code.${ext}`,
-          content: language ? language.skeleton : '',
+          content: language.skeleton,
           contributors: undefined,
         }],
       });
@@ -168,6 +170,7 @@ class App extends React.Component {
 
   handleChangeWorkspaceWeights(workspaceWeights) {
     this.setState({ workspaceWeights });
+    this.codeEditorRef.current.getWrappedInstance().handleResize();
   }
 
   handleChangeEditorTabIndex(editorTabIndex) {
@@ -178,13 +181,15 @@ class App extends React.Component {
   }
 
   handleAddFile() {
+    const { ext } = this.props.env;
     const { files } = this.props.current;
-    let name = 'untitled';
+    let name = `code.${ext}`;
     let count = 0;
-    while (files.some(file => file.name === name)) name = `untitled-${++count}`;
+    while (files.some(file => file.name === name)) name = `code-${++count}.${ext}`;
+    const language = languages.find(language => language.ext === ext);
     this.props.addFile({
       name,
-      content: '',
+      content: language.skeleton,
       contributors: undefined,
     });
   }
@@ -258,7 +263,7 @@ class App extends React.Component {
           <VisualizationViewer className={styles.visualization_viewer} />
           <TabContainer className={styles.editor_tab_container} titles={editorTitles} tabIndex={editorTabIndex}
                         onChangeTabIndex={tabIndex => this.handleChangeEditorTabIndex(tabIndex)}>
-            <CodeEditor file={file} onClickDelete={() => this.handleDeleteFile()} />
+            <CodeEditor ref={this.codeEditorRef} file={file} onClickDelete={() => this.handleDeleteFile()} />
           </TabContainer>
         </ResizableContainer>
         <ToastContainer className={styles.toast_container} />

src/frontend/components/Button/index.jsx

@@ -19,7 +19,10 @@ class Button extends React.Component {
   }
 
   componentWillUnmount() {
-    if (this.timeout) window.clearTimeout(this.timeout);
+    if (this.timeout) {
+      window.clearTimeout(this.timeout);
+      this.timeout = undefined;
+    }
   }
 
   render() {
@@ -31,13 +34,22 @@ class Button extends React.Component {
         className = classes(styles.confirming, className);
         icon = faExclamationCircle;
         children = <Ellipsis key="text">Click to Confirm</Ellipsis>;
+        const onClickOriginal = onClick;
+        onClick = () => {
+          if (onClickOriginal) onClickOriginal();
+          if (this.timeout) {
+            window.clearTimeout(this.timeout);
+            this.timeout = undefined;
+            this.setState({ confirming: false });
+          }
+        };
       } else {
         to = null;
         href = null;
         onClick = () => {
           this.setState({ confirming: true });
           this.timeout = window.setTimeout(() => {
-            this.timeout = null;
+            this.timeout = undefined;
             this.setState({ confirming: false });
           }, 2000);
         };

src/frontend/components/CodeEditor/index.jsx

@@ -17,14 +17,24 @@ import { languages } from '/common/config';
 import { Button, Ellipsis } from '/components';
 import styles from './stylesheet.scss';
 
-@connect(({ current, env, player }) => ({ current, env, player }), actions)
+@connect(({ current, env, player }) => ({ current, env, player }), actions, null, { withRef: true })
 class CodeEditor extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.aceEditorRef = React.createRef();
+  }
+
   handleChangeCode(code) {
     const { file } = this.props;
     this.props.modifyFile({ ...file, content: code });
     if (extension(file.name) === 'md') this.props.shouldBuild();
   }
 
+  handleResize() {
+    this.aceEditorRef.current.editor.resize();
+  }
+
   render() {
     const { className, file, onClickDelete } = this.props;
     const { user } = this.props.env;
@@ -40,6 +50,7 @@ class CodeEditor extends React.Component {
       <div className={classes(styles.code_editor, className)}>
         <AceEditor
           className={styles.ace_editor}
+          ref={this.aceEditorRef}
           mode={mode}
           theme="tomorrow_night_eighties"
           name="code_editor"
@@ -74,7 +85,7 @@ class CodeEditor extends React.Component {
             </Button>
           </div>
         </div>
-      </div> // TODO: need resizing when parent resizes
+      </div>
     );
   }
 }

src/frontend/components/Header/index.jsx

@@ -62,7 +62,6 @@ class Header extends React.Component {
       .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, algorithm.gistId, algorithm.titles, algorithm.files))
       .then(this.props.loadScratchPapers)
       .catch(this.props.showErrorToast);
-    // TODO: create a new gist in case of permission error
   }
 
   deleteGist() {

src/frontend/components/Player/index.jsx

@@ -103,8 +103,8 @@ class Player extends React.Component {
 
   pause() {
     if (this.timer) {
-      window.clearInterval(this.timer);
-      this.timer = null;
+      window.clearTimeout(this.timer);
+      this.timer = undefined;
       this.setState({ playing: false });
     }
   }

src/frontend/core/renderers/MarkdownRenderer/index.jsx

@@ -22,7 +22,7 @@ class MarkdownRenderer extends Renderer {
       } else {
         newSrc = src;
       }
-      return <img src={newSrc} {...rest} />;
+      return <img src={newSrc} style={{ maxWidth: '100%' }} {...rest} />;
     };
 
     return (

src/frontend/reducers/current.js

@@ -40,7 +40,7 @@ const getNextState = (state, files) => ({
     lastTitles: [],
     lastFiles: [],
   }),
-  files: files.map(file => ({ ...file, contributors: [] })),
+  files: files.map(file => ({ ...file, contributors: undefined })),
 });
 
 export default handleActions({