fix merge

src/merge/SortableFiles.jsx

@@ -1,11 +1,11 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+import React, { memo, useState, useCallback, useEffect } from 'react';
 import {
   sortableContainer,
   sortableElement,
   arrayMove,
 } from 'react-sortable-hoc';
 import { basename } from 'path';
+import { Checkbox } from 'evergreen-ui';
 
 const rowStyle = {
   padding: 5, fontSize: 14, margin: '7px 0', boxShadow: '0 0 5px 0px rgba(0,0,0,0.3)', overflowY: 'auto', whiteSpace: 'nowrap',
@@ -27,46 +27,36 @@ const SortableContainer = sortableContainer(({ items }) => (
   </div>
 ));
 
-class SortableFiles extends PureComponent {
-  constructor(props) {
-    super(props);
+const SortableFiles = memo(({
+  items: itemsProp, onChange, helperContainer, onAllStreamsChange,
+}) => {
+  const [items, setItems] = useState(itemsProp);
+  const [allStreams, setAllStreams] = useState(false);
 
-    this.state = {
-      items: props.items,
-    };
-  }
+  useEffect(() => onAllStreamsChange(allStreams), [allStreams, onAllStreamsChange]);
+  useEffect(() => onChange(items), [items, onChange]);
 
-  onSortEnd = ({ oldIndex, newIndex }) => {
-    const { items } = this.state;
-    const { onChange } = this.props;
+  const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
     const newItems = arrayMove(items, oldIndex, newIndex);
-    this.setState({ items: newItems });
-    onChange(newItems);
-  };
-
-  render() {
-    const { helperContainer } = this.props;
-    const { items } = this.state;
+    setItems(newItems);
+  }, [items]);
 
   return (
     <div>
       <div><b>Sort your files for merge</b></div>
       <SortableContainer
         items={items}
-          onSortEnd={this.onSortEnd}
+        onSortEnd={onSortEnd}
         helperContainer={helperContainer}
         getContainer={() => helperContainer().parentNode}
         helperClass="dragging-helper-class"
       />
+
+      <div style={{ marginTop: 10 }}>
+        <Checkbox checked={allStreams} onChange={e => setAllStreams(e.target.checked)} label="Include all streams?" />
+      </div>
     </div>
   );
-  }
-}
-
-SortableFiles.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  helperContainer: PropTypes.func.isRequired,
-  items: PropTypes.array.isRequired,
-};
+});
 
 export default SortableFiles;