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,57 +42,71 @@ 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 (
-      <ListView
-        type="multiple"
-        title="Select the plugins for which you want to export the data"
-        onSelect={selectedArray => {
-          this.props.selectedPlugins(selectedArray);
-          const {share} = this.props;
-          if (!share) {
-            console.error(
-              'applications.share is undefined, whereas it was expected to be defined',
-            );
-          } else {
-            switch (share.type) {
-              case 'link':
-                this.props.setActiveSheet(ACTIVE_SHEET_SHARE_DATA);
-                break;
-              case 'file': {
-                const file = share.file;
-                if (file) {
-                  this.props.setExportDataToFileActiveSheet({
-                    file,
-                    closeOnFinish: true,
-                  });
-                } else {
-                  console.error('share.file is undefined');
+      <Container>
+        <ListView
+          type="multiple"
+          title="Select the plugins for which you want to export the data"
+          onSelect={selectedArray => {
+            this.props.selectedPlugins(selectedArray);
+            const {share} = this.props;
+            if (!share) {
+              console.error(
+                'applications.share is undefined, whereas it was expected to be defined',
+              );
+            } else {
+              switch (share.type) {
+                case 'link':
+                  this.props.setActiveSheet(ACTIVE_SHEET_SHARE_DATA);
+                  break;
+                case 'file': {
+                  const file = share.file;
+                  if (file) {
+                    this.props.setExportDataToFileActiveSheet({
+                      file,
+                      closeOnFinish: true,
+                    });
+                  } else {
+                    console.error('share.file is undefined');
+                  }
                 }
               }
             }
-          }
-        }}
-        elements={getActivePersistentPlugins(pluginStates, plugins)}
-        selectedElements={getActivePersistentPlugins(
-          pluginStates,
-          plugins,
-        ).reduce((acc, plugin) => {
-          if (
-            plugins.selectedPlugins.length <= 0 ||
-            plugins.selectedPlugins.includes(plugin)
-          ) {
-            acc.add(plugin);
-          }
-          return acc;
-        }, new Set([]) as Set<string>)}
-        onHide={onHide}
-      />
+          }}
+          elements={getActivePersistentPlugins(pluginStates, plugins)}
+          selectedElements={getActivePersistentPlugins(
+            pluginStates,
+            plugins,
+          ).reduce((acc, plugin) => {
+            if (
+              plugins.selectedPlugins.length <= 0 ||
+              plugins.selectedPlugins.includes(plugin)
+            ) {
+              acc.add(plugin);
+            }
+            return acc;
+          }, new Set([]) as Set<string>)}
+          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,71 +135,69 @@ 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>
-                <RowComponentContainer>
-                  {this.props.elements.map(id => {
-                    return (
-                      <RowComponent
-                        name={id}
-                        key={id}
-                        selected={this.state.selectedElements.has(id)}
-                        onChange={this.handleChange}
-                      />
-                    );
-                  })}
-                </RowComponentContainer>
-              </FlexColumn>
-              <Padder paddingTop={8} paddingBottom={2}>
-                <FlexRow>
-                  <Spacer />
-                  <Button compact padded onClick={onHide}>
-                    Close
-                  </Button>
-                  <Button
-                    compact
-                    padded
-                    type="primary"
-                    onClick={() => {
-                      this.props.onSelect([...this.state.selectedElements]);
-                    }}>
-                    Submit
-                  </Button>
-                </FlexRow>
-              </Padder>
-            </Container>
-          );
-        }}
-      </ReactReduxContext.Consumer>
+      <Container>
+        <FlexColumn>
+          {this.props.title && <Title>{this.props.title}</Title>}
+          <RowComponentContainer>
+            {this.props.elements.map(id => {
+              return (
+                <RowComponent
+                  name={id}
+                  key={id}
+                  selected={this.state.selectedElements.has(id)}
+                  onChange={this.handleChange}
+                />
+              );
+            })}
+          </RowComponentContainer>
+        </FlexColumn>
+        {this.props.showNavButtons && (
+          <Padder paddingTop={8} paddingBottom={2}>
+            <FlexRow>
+              <Spacer />
+              <Button compact padded onClick={this.props.onHide}>
+                Close
+              </Button>
+              <Button
+                compact
+                padded
+                type="primary"
+                onClick={() => {
+                  this.props.onSelect([...this.state.selectedElements]);
+                }}>
+                Submit
+              </Button>
+            </FlexRow>
+          </Padder>
+        )}
+      </Container>
     );
   }
 }