Fix a cursor being lost when moved to scratch paper

Author: 64json

src/frontend/components/App/index.jsx

@@ -141,7 +141,7 @@ class App extends React.Component {
           contributors: undefined,
         }, {
           name: `code.${ext}`,
-          content: language ? language.skeleton : '', // TODO: put import statements as default
+          content: language ? language.skeleton : '',
           contributors: undefined,
         }],
       });
@@ -174,6 +174,7 @@ class App extends React.Component {
     const { files } = this.props.current;
     if (editorTabIndex === files.length) this.handleAddFile();
     this.setState({ editorTabIndex });
+    this.props.shouldBuild();
   }
 
   handleAddFile() {
@@ -194,15 +195,11 @@ class App extends React.Component {
     this.props.renameFile(editorTabIndex, value);
   }
 
-  handleDeleteFile(file) {
-    const { files } = this.props.current;
+  handleDeleteFile() {
     const { editorTabIndex } = this.state;
-    if (files.indexOf(file) < editorTabIndex) {
-      this.handleChangeEditorTabIndex(editorTabIndex - 1);
-    } else {
-      this.handleChangeEditorTabIndex(Math.min(editorTabIndex, files.length - 2));
-    }
-    this.props.deleteFile(file);
+    const { files } = this.props.current;
+    this.handleChangeEditorTabIndex(Math.min(editorTabIndex, files.length - 2));
+    this.props.deleteFile(editorTabIndex);
   }
 
   toggleNavigatorOpened(navigatorOpened = !this.state.navigatorOpened) {
@@ -230,13 +227,13 @@ class App extends React.Component {
     const { titles, files } = this.props.current;
 
     const gistSaved = this.isGistSaved();
-
     const description = this.getDescription();
+    const file = files[editorTabIndex];
 
     const editorTitles = files.map(file => file.name);
-    if (files[editorTabIndex]) {
+    if (file) {
       editorTitles[editorTabIndex] = (
-        <AutosizeInput className={styles.input_title} value={files[editorTabIndex].name}
+        <AutosizeInput className={styles.input_title} value={file.name}
                        onClick={e => e.stopPropagation()} onChange={e => this.handleRenameFile(e)} />
       );
     }
@@ -253,20 +250,15 @@ class App extends React.Component {
         <Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()}
                 navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()}
                 loadAlgorithm={params => this.loadAlgorithm(params)} gistSaved={gistSaved}
-                file={files[editorTabIndex]} />
+                file={file} />
         <ResizableContainer className={styles.workspace} horizontal weights={workspaceWeights}
                             visibles={[navigatorOpened, true, true]}
                             onChangeWeights={weights => this.handleChangeWorkspaceWeights(weights)}>
           <Navigator loadAlgorithm={params => this.loadAlgorithm(params)} />
           <VisualizationViewer className={styles.visualization_viewer} />
           <TabContainer className={styles.editor_tab_container} titles={editorTitles} tabIndex={editorTabIndex}
                         onChangeTabIndex={tabIndex => this.handleChangeEditorTabIndex(tabIndex)}>
-            {
-              files.map((file, i) => ( // TODO: editor cursor should stay when moved to scratch paper
-                <CodeEditor key={[...titles, i].join('--')} file={file}
-                            onDeleteFile={file => this.handleDeleteFile(file)} />
-              ))
-            }
+            <CodeEditor file={file} onClickDelete={() => this.handleDeleteFile()} />
           </TabContainer>
         </ResizableContainer>
         <ToastContainer className={styles.toast_container} />

src/frontend/components/CodeEditor/index.jsx

@@ -19,21 +19,19 @@ import styles from './stylesheet.scss';
 
 @connect(({ current, env, player }) => ({ current, env, player }), actions)
 class CodeEditor extends React.Component {
-  componentDidMount() {
-    this.props.shouldBuild();
-  }
-
   handleChangeCode(code) {
     const { file } = this.props;
     this.props.modifyFile({ ...file, content: code });
     if (extension(file.name) === 'md') this.props.shouldBuild();
   }
 
   render() {
-    const { className, file, onDeleteFile } = this.props;
+    const { className, file, onClickDelete } = this.props;
     const { user } = this.props.env;
     const { lineIndicator } = this.props.player;
 
+    if (!file) return null;
+
     const fileExt = extension(file.name);
     const language = languages.find(language => language.ext === fileExt);
     const mode = language ? language.mode : fileExt === 'md' ? 'markdown' : 'plain_text';
@@ -70,7 +68,7 @@ class CodeEditor extends React.Component {
           }
           <div className={styles.empty}>
             <div className={styles.empty} />
-            <Button className={styles.delete} icon={faTrashAlt} primary onClick={() => onDeleteFile(file)}
+            <Button className={styles.delete} icon={faTrashAlt} primary onClick={onClickDelete}
                     confirmNeeded>
               <Ellipsis>Delete File</Ellipsis>
             </Button>

src/frontend/components/TabContainer/index.jsx

@@ -24,9 +24,7 @@ class TabContainer extends React.Component {
           <div className={classes(styles.title, styles.fake)} />
         </div>
         <div className={styles.content}>
-          {
-            React.Children.toArray(children)[tabIndex]
-          }
+          {children}
         </div>
       </div>
     );

src/frontend/reducers/current.js

@@ -8,7 +8,7 @@ const setCurrent = createAction(`${prefix}/SET_CURRENT`, (categoryKey, algorithm
 const renameScratchPaper = createAction(`${prefix}/RENAME_SCRATCH_PAPER`, title => ({ titles: ['Scratch Paper', title] }));
 const addFile = createAction(`${prefix}/ADD_FILE`, file => ({ file }));
 const modifyFile = createAction(`${prefix}/MODIFY_FILE`, file => ({ file }));
-const deleteFile = createAction(`${prefix}/DELETE_FILE`, file => ({ file }));
+const deleteFile = createAction(`${prefix}/DELETE_FILE`, index => ({ index }));
 const renameFile = createAction(`${prefix}/RENAME_FILE`, (index, name) => ({ index, name }));
 
 export const actions = {
@@ -62,8 +62,8 @@ export default handleActions({
     return getNextState(state, files);
   },
   [deleteFile]: (state, { payload }) => {
-    const { file } = payload;
-    const files = state.files.filter(oldFile => oldFile.name !== file.name);
+    const { index } = payload;
+    const files = state.files.filter((file, i) => i !== index);
     return getNextState(state, files);
   },
   [renameFile]: (state, { payload }) => {