Refactor Listview to make it agnostic to the export logic

Summary: This diff makes Listview agnostic to the logic of the sharing.

Reviewed By: mweststrate

Differential Revision: D18711095

fbshipit-source-id: 75541dee0b5740c9951c46118d96292e28979507

src/chrome/ExportDataPluginSheet.tsx

@@ -23,7 +23,8 @@ import {
 } from '../reducers/application';
 import ListView from './ListView';
 import {Dispatch, Action} from 'redux';
-
+import {unsetShare} from '../reducers/application';
+import {FlexColumn, styled} from 'flipper';
 type OwnProps = {
   onHide: () => void;
 };
@@ -41,13 +42,25 @@ type DispatchFromProps = {
     file: string;
     closeOnFinish: boolean;
   }) => void;
+  unsetShare: () => void;
 };
 
 type Props = OwnProps & StateFromProps & DispatchFromProps;
+
+const Container = styled(FlexColumn)({
+  width: 700,
+  maxHeight: 700,
+});
+
 class ExportDataPluginSheet extends Component<Props> {
   render() {
     const {plugins, pluginStates, onHide} = this.props;
+    const onHideWithUnsettingShare = () => {
+      this.props.unsetShare();
+      onHide();
+    };
     return (
+      <Container>
         <ListView
           type="multiple"
           title="Select the plugins for which you want to export the data"
@@ -90,8 +103,10 @@ class ExportDataPluginSheet extends Component<Props> {
             }
             return acc;
           }, new Set([]) as Set<string>)}
-        onHide={onHide}
+          onHide={onHideWithUnsettingShare}
+          showNavButtons={true}
         />
+      </Container>
     );
   }
 }
@@ -115,5 +130,8 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
     }) => {
       dispatch(getExportDataToFileActiveSheetAction(payload));
     },
+    unsetShare: () => {
+      dispatch(unsetShare());
+    },
   }),
 )(ExportDataPluginSheet);

src/chrome/ListView.tsx

@@ -18,7 +18,6 @@ import {
   colors,
   View,
 } from 'flipper';
-import {unsetShare} from '../reducers/application';
 import React, {Component} from 'react';
 import {ReactReduxContext} from 'react-redux';
 
@@ -38,7 +37,8 @@ type Props = {
   onSelect: (elements: Array<string>) => void;
   onHide: () => any;
   elements: Array<string>;
-  title: string;
+  title?: string;
+  showNavButtons: boolean;
 } & SubType;
 
 const Title = styled(Text)({
@@ -51,8 +51,6 @@ type State = {
 
 const Container = styled(FlexColumn)({
   padding: 8,
-  width: 700,
-  maxHeight: 700,
 });
 
 const Line = styled(View)({
@@ -137,37 +135,36 @@ export default class ListView extends Component<Props, State> {
   }
 
   handleChange = (id: string, selected: boolean) => {
+    let selectedElements: Set<string> = new Set([]);
     if (this.props.type === 'single') {
       if (!selected) {
-        this.setState({selectedElements: new Set([])});
+        this.setState({selectedElements: selectedElements});
       } else {
-        this.setState({selectedElements: new Set([id])});
+        selectedElements.add(id);
+        this.setState({selectedElements: selectedElements});
       }
     } else {
       if (selected) {
+        selectedElements = new Set([...this.state.selectedElements, id]);
         this.setState({
-          selectedElements: new Set([...this.state.selectedElements, id]),
+          selectedElements: selectedElements,
         });
       } else {
-        const selectedElements = new Set([...this.state.selectedElements]);
+        selectedElements = new Set([...this.state.selectedElements]);
         selectedElements.delete(id);
         this.setState({selectedElements});
       }
     }
+    if (!this.props.showNavButtons) {
+      this.props.onSelect([...selectedElements]);
+    }
   };
 
   render() {
-    return (
-      <ReactReduxContext.Consumer>
-        {({store}) => {
-          const onHide = () => {
-            store.dispatch(unsetShare());
-            this.props.onHide();
-          };
     return (
       <Container>
         <FlexColumn>
-                <Title>{this.props.title}</Title>
+          {this.props.title && <Title>{this.props.title}</Title>}
           <RowComponentContainer>
             {this.props.elements.map(id => {
               return (
@@ -181,10 +178,11 @@ export default class ListView extends Component<Props, State> {
             })}
           </RowComponentContainer>
         </FlexColumn>
+        {this.props.showNavButtons && (
           <Padder paddingTop={8} paddingBottom={2}>
             <FlexRow>
               <Spacer />
-                  <Button compact padded onClick={onHide}>
+              <Button compact padded onClick={this.props.onHide}>
                 Close
               </Button>
               <Button
@@ -198,10 +196,8 @@ export default class ListView extends Component<Props, State> {
               </Button>
             </FlexRow>
           </Padder>
+        )}
       </Container>
     );
-        }}
-      </ReactReduxContext.Consumer>
-    );
   }
 }