<NME> index.tsx
<BEF> import { AppState, ContentRef, selectors } from "@nteract/core";
import { dirname } from "path";
import * as React from "react";
import { connect } from "react-redux";
import styled from "styled-components";

import { default as Notebook } from "../notebook";
import * as TextFile from "./text-file";

const PaddedContainer = styled.div`
// $FlowFixMe
import * as actions from "@nteract/actions";

import { EditableTitleOverlay } from "./editable-title-overlay";
import { ThemedLogo } from "../../components/themed-logo";
import { Nav, NavSection } from "../../components/nav";
import LastSaved from "../../components/last-saved";
  display: flex;
  flex-flow: column;
  align-items: stretch;
  height: -webkit-fill-available;
`;

const JupyterExtensionChoiceContainer = styled.div`
  flex: 1 1 auto;
  overflow: auto;
`;

interface FileProps {
  type: "notebook" | "file" | "dummy";
  contentRef: ContentRef;
  baseDir: string;
  appBase: string;
  displayName?: string;
  mimetype?: string | null;
  lastSavedStatement: string;
}

export class File extends React.PureComponent<FileProps> {
  getChoice = () => {
    let choice = null;

    // notebooks don't report a mimetype so we'll use the content.type
    if (this.props.type === "notebook") {
      choice = <Notebook contentRef={this.props.contentRef} />;
    } else if (this.props.type === "dummy") {
      choice = null;
    } else if (
      this.props.mimetype == null ||
      !TextFile.handles(this.props.mimetype)
    ) {
      // TODO: Redirect to /files/ endpoint for them to download the file or view
      //       as is
      choice = (
        <PaddedContainer>
          <pre>Can not render this file type</pre>
        </PaddedContainer>
      );
    } else {
      choice = <TextFile.default contentRef={this.props.contentRef} />;
    }

    return choice;
  };

  render(): JSX.Element {
    const choice = this.getChoice();

    // Right now we only handle one kind of editor
    // If/when we support more modes, we would case them off here
    return (
      <React.Fragment>
        <JupyterExtensionContainer>
          <JupyterExtensionChoiceContainer>
            {choice}
          </JupyterExtensionChoiceContainer>
        </JupyterExtensionContainer>
      </React.Fragment>
    );
  }
}

interface InitialProps {
  contentRef: ContentRef;
  appBase: string;
}

// Since the contentRef stays unique for the duration of this file,
// we use the makeMapStateToProps pattern to optimize re-render
const makeMapStateToProps = (
  initialState: AppState,
  initialProps: InitialProps
) => {
  const { contentRef, appBase } = initialProps;

  const mapStateToProps = (state: AppState) => {
    const content = selectors.content(state, initialProps);

    if (!content || content.type === "directory") {
      throw new Error(
        "The file component should only be used with files and notebooks"
      );
    }

    return {
      appBase,
      contentRef,
      baseDir: dirname(content.filepath),
      displayName: content.filepath.split("/").pop(),
      lastSavedStatement: "recently",
      mimetype: content.mimetype,
      type: content.type
    };
  };

  return mapStateToProps;
};

export const ConnectedFile = connect(makeMapStateToProps)(File);

export default ConnectedFile;

<MSG> fixing lint errors

<DFF> @@ -11,7 +11,6 @@ import { FormGroup, H4 } from "@blueprintjs/core";
 // $FlowFixMe
 import * as actions from "@nteract/actions";
 
-import { EditableTitleOverlay } from "./editable-title-overlay";
 import { ThemedLogo } from "../../components/themed-logo";
 import { Nav, NavSection } from "../../components/nav";
 import LastSaved from "../../components/last-saved";

{'commit': 'diff --git a/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/editable-title-overlay.js b/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/editable-title-overlay.js\nindex 1b1bf6486..19942d5d6 100644\n--- a/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/editable-title-overlay.js\n+++ b/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/editable-title-overlay.js\n@@ -39,7 +39,6 @@ export class EditableTitleOverlay extends React.Component<EditableTitleOverlayPr\n   render() {\n     return (\n       <Overlay \n-        autoFocus={true} \n         canEscapeKeyClose={true}\n         canOutsideClickClose={true}\n         usePortal={false}\ndiff --git a/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/index.tsx b/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/index.tsx\nindex 3def7076f..32f892bbc 100644\n--- a/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/index.tsx\n+++ b/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/index.tsx\n@@ -11,7 +11,6 @@ import { FormGroup, H4 } from "@blueprintjs/core";\n // $FlowFixMe\n import * as actions from "@nteract/actions";\n \n-import { EditableTitleOverlay } from "./editable-title-overlay";\n import { ThemedLogo } from "../../components/themed-logo";\n import { Nav, NavSection } from "../../components/nav";\n import LastSaved from "../../components/last-saved";\n', 'commit_subject': 'fixing lint errors', 'repo_name': 'nteract/nteract', 'committer': {'name': 'Shelby Sturgis', 'email': '5fb48808f68a687449a5ad2c5a7e782a5d12f36a@netflix.com', 'time_sec': '1546536606', 'tz_offset': '-480', 'date': {'seconds': '1546536606'}}, 'commit_tree': 'db4854e8156dc17e80684bcfacb0324284da54bc', 'commit_message': 'fixing lint errors\n', 'language_name': 'TypeScript', 'license': 'bsd-3-clause', 'hunks': '@@ -11,7 +11,6 @@ import { FormGroup, H4 } from "@blueprintjs/core";\n // $FlowFixMe\n import * as actions from "@nteract/actions";\n \n-import { EditableTitleOverlay } from "./editable-title-overlay";\n import { ThemedLogo } from "../../components/themed-logo";\n import { Nav, NavSection } from "../../components/nav";\n import LastSaved from "../../components/last-saved";\n', 'addition_count': 0, 'deletion_count': 1, 'src_file': 'a/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/index.tsx', 'tgt_file': 'b/applications/jupyter-extension/nteract_on_jupyter/app/contents/file/index.tsx', 'file_extension': '.tsx', 'before_file': 'import { AppState, ContentRef, selectors } from "@nteract/core";\nimport { dirname } from "path";\nimport * as React from "react";\nimport { connect } from "react-redux";\nimport styled from "styled-components";\n\nimport { default as Notebook } from "../notebook";\nimport * as TextFile from "./text-file";\n\nconst PaddedContainer = styled.div`\n// $FlowFixMe\nimport * as actions from "@nteract/actions";\n\nimport { EditableTitleOverlay } from "./editable-title-overlay";\nimport { ThemedLogo } from "../../components/themed-logo";\nimport { Nav, NavSection } from "../../components/nav";\nimport LastSaved from "../../components/last-saved";\n  display: flex;\n  flex-flow: column;\n  align-items: stretch;\n  height: -webkit-fill-available;\n`;\n\nconst JupyterExtensionChoiceContainer = styled.div`\n  flex: 1 1 auto;\n  overflow: auto;\n`;\n\ninterface FileProps {\n  type: "notebook" | "file" | "dummy";\n  contentRef: ContentRef;\n  baseDir: string;\n  appBase: string;\n  displayName?: string;\n  mimetype?: string | null;\n  lastSavedStatement: string;\n}\n\nexport class File extends React.PureComponent<FileProps> {\n  getChoice = () => {\n    let choice = null;\n\n    // notebooks don\'t report a mimetype so we\'ll use the content.type\n    if (this.props.type === "notebook") {\n      choice = <Notebook contentRef={this.props.contentRef} />;\n    } else if (this.props.type === "dummy") {\n      choice = null;\n    } else if (\n      this.props.mimetype == null ||\n      !TextFile.handles(this.props.mimetype)\n    ) {\n      // TODO: Redirect to /files/ endpoint for them to download the file or view\n      //       as is\n      choice = (\n        <PaddedContainer>\n          <pre>Can not render this file type</pre>\n        </PaddedContainer>\n      );\n    } else {\n      choice = <TextFile.default contentRef={this.props.contentRef} />;\n    }\n\n    return choice;\n  };\n\n  render(): JSX.Element {\n    const choice = this.getChoice();\n\n    // Right now we only handle one kind of editor\n    // If/when we support more modes, we would case them off here\n    return (\n      <React.Fragment>\n        <JupyterExtensionContainer>\n          <JupyterExtensionChoiceContainer>\n            {choice}\n          </JupyterExtensionChoiceContainer>\n        </JupyterExtensionContainer>\n      </React.Fragment>\n    );\n  }\n}\n\ninterface InitialProps {\n  contentRef: ContentRef;\n  appBase: string;\n}\n\n// Since the contentRef stays unique for the duration of this file,\n// we use the makeMapStateToProps pattern to optimize re-render\nconst makeMapStateToProps = (\n  initialState: AppState,\n  initialProps: InitialProps\n) => {\n  const { contentRef, appBase } = initialProps;\n\n  const mapStateToProps = (state: AppState) => {\n    const content = selectors.content(state, initialProps);\n\n    if (!content || content.type === "directory") {\n      throw new Error(\n        "The file component should only be used with files and notebooks"\n      );\n    }\n\n    return {\n      appBase,\n      contentRef,\n      baseDir: dirname(content.filepath),\n      displayName: content.filepath.split("/").pop(),\n      lastSavedStatement: "recently",\n      mimetype: content.mimetype,\n      type: content.type\n    };\n  };\n\n  return mapStateToProps;\n};\n\nexport const ConnectedFile = connect(makeMapStateToProps)(File);\n\nexport default ConnectedFile;\n', 'message': 'fixing lint errors\n', 'author_name': 'Shelby Sturgis', 'lang': 'tsx'}