Port the StagingView to React

CONTRIBUTING.md

@@ -8,10 +8,6 @@ Feel free to [open an issue](https://github.com/atom/github/issues) if you want
 
 ## Technical Contribution Tips
 
-### React and Etch
-
-Early in the project's life, we used [Etch](https://github.com/atom/etch) to manage DOM updates via a virtual-DOM mechanism very similar to React. Eventually we migrated to using [React](https://facebook.github.io/react/) itself. During the transition, we implemented a React component called `EtchWrapper` to allow us to render Etch components from within React; however, all new UI work should be done using React, and we are working to migrate all existing UI components to fully use React.
-
 ### Updating the GraphQL Schema
 
 This project uses [Relay](https://github.com/facebook/relay) for its GitHub integration. There's a source-level transform that depends on having a local copy of the GraphQL schema available. If you need to update the local schema to the latest version, run

lib/atom/pane-item.js

@@ -64,11 +64,13 @@ export default class PaneItem extends React.Component {
   }
 
   componentDidMount() {
-    this.subs.add(this.props.workspace.addOpener(this.opener));
-
     for (const openItem of this.state.currentlyOpen) {
+      this.subs.add(this.closeListener(openItem.stubItem, openItem));
+
       openItem.hydrateStub();
     }
+
+    this.subs.add(this.props.workspace.addOpener(this.opener));
   }
 
   render() {
@@ -99,20 +101,22 @@ export default class PaneItem extends React.Component {
       }), () => {
         const paneItem = openItem.create();
 
-        this.subs.add(
-          this.props.workspace.onDidDestroyPaneItem(({item}) => {
-            if (item === paneItem) {
-              this.setState(prevState => ({
-                currentlyOpen: prevState.currentlyOpen.filter(each => each !== openItem),
-              }));
-            }
-          }),
-        );
+        this.subs.add(this.closeListener(paneItem, openItem));
 
         resolve(paneItem);
       });
     });
   }
+
+  closeListener(paneItem, openItem) {
+    return this.props.workspace.onDidDestroyPaneItem(({item}) => {
+      if (item === paneItem) {
+        this.setState(prevState => ({
+          currentlyOpen: prevState.currentlyOpen.filter(each => each !== openItem),
+        }));
+      }
+    });
+  }
 }
 
 /**

lib/controllers/file-patch-controller.js

@@ -210,7 +210,6 @@ export default class FilePatchController extends React.Component {
         </div>
       );
     } else {
-      // NOTE: Outer div is required for etch to render elements correctly
       const hasUndoHistory = repository ? this.hasUndoHistory() : false;
       return (
         <div className="github-PaneView pane-item">

lib/controllers/git-tab-controller.js

@@ -272,7 +272,7 @@ export default class GitTabController extends React.Component {
 
     this.stagingOperationInProgress = true;
 
-    const fileListUpdatePromise = this.refView.refStagingView.getWrappedComponent().getNextListUpdatePromise();
+    const fileListUpdatePromise = this.refView.refStagingView.getNextListUpdatePromise();
     let stageOperationPromise;
     if (stageStatus === 'staged') {
       stageOperationPromise = this.unstageFiles(filePaths);

lib/controllers/root-controller.js

@@ -743,10 +743,6 @@ class TabTracker {
   getControllerComponent() {
     const controller = this.getController();
 
-    if (controller.getWrappedComponentInstance) {
-      return controller.getWrappedComponentInstance();
-    }
-
     if (controller.getWrappedComponent) {
       return controller.getWrappedComponent();
     }

lib/models/composite-list-selection.js

@@ -104,10 +104,7 @@ export default class CompositeListSelection {
       updated = next !== updated ? next : updated.activatePreviousSelection();
     }
 
-    if (isDifferent) {
-      updated.resolveNextUpdatePromise();
-    }
-
+    updated.resolveNextUpdatePromise();
     return updated;
   }
 

lib/prop-types.js

@@ -64,3 +64,25 @@ export const RefHolderPropType = PropTypes.shape({
   setter: PropTypes.func.isRequired,
   observe: PropTypes.func.isRequired,
 });
+
+export const FilePatchItemPropType = PropTypes.shape({
+  filePath: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+});
+
+const statusNames = [
+  'added',
+  'deleted',
+  'modified',
+  'typechange',
+  'equivalent',
+];
+
+export const MergeConflictItemPropType = PropTypes.shape({
+  filePath: PropTypes.string.isRequired,
+  status: PropTypes.shape({
+    file: PropTypes.oneOf(statusNames).isRequired,
+    ours: PropTypes.oneOf(statusNames).isRequired,
+    theirs: PropTypes.oneOf(statusNames).isRequired,
+  }).isRequired,
+});

lib/views/file-patch-list-item-view.js

@@ -1,32 +1,46 @@
-/** @jsx etch.dom */
-/* eslint react/no-unknown-property: "off" */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {CompositeDisposable} from 'event-kit';
 
-import etch from 'etch';
+import {FilePatchItemPropType} from '../prop-types';
 import {classNameForStatus} from '../helpers';
+import RefHolder from '../models/ref-holder';
 
-export default class FilePatchListItemView {
-  constructor(props) {
-    this.props = props;
-    etch.initialize(this);
-    this.props.registerItemElement(this.props.filePatch, this.element);
+export default class FilePatchListItemView extends React.Component {
+  static propTypes = {
+    filePatch: FilePatchItemPropType.isRequired,
+    selected: PropTypes.bool.isRequired,
+    registerItemElement: PropTypes.func,
+  }
+
+  static defaultProps = {
+    registerItemElement: () => {},
   }
 
-  update(props) {
-    this.props = props;
-    this.props.registerItemElement(this.props.filePatch, this.element);
-    return etch.update(this);
+  constructor(props) {
+    super(props);
+
+    this.refItem = new RefHolder();
+    this.subs = new CompositeDisposable(
+      this.refItem.observe(item => this.props.registerItemElement(this.props.filePatch, item)),
+    );
   }
 
   render() {
     const {filePatch, selected, ...others} = this.props;
+    delete others.registerItemElement;
     const status = classNameForStatus[filePatch.status];
     const className = selected ? 'is-selected' : '';
 
     return (
-      <div {...others} className={`github-FilePatchListView-item is-${status} ${className}`}>
+      <div ref={this.refItem.setter} {...others} className={`github-FilePatchListView-item is-${status} ${className}`}>
         <span className={`github-FilePatchListView-icon icon icon-diff-${status} status-${status}`} />
         <span className="github-FilePatchListView-path">{filePatch.filePath}</span>
       </div>
     );
   }
+
+  componentWillUnmount() {
+    this.subs.dispose();
+  }
 }