Bundle event handlers into a separate structure

src/app.tsx

@@ -272,6 +272,26 @@ export class App extends React.Component<RouteComponentProps, {}> {
     this.props.history.push(location);
   };
 
+  private onPrint = () => {
+    analyticsEvent('print');
+    this.chartRef && this.chartRef.print();
+  };
+
+  private onDownloadPdf = () => {
+    analyticsEvent('download_pdf');
+    this.chartRef && this.chartRef.downloadPdf();
+  };
+
+  private onDownloadPng = () => {
+    analyticsEvent('download_png');
+    this.chartRef && this.chartRef.downloadPng();
+  };
+
+  private onDownloadSvg = () => {
+    analyticsEvent('download_svg');
+    this.chartRef && this.chartRef.downloadSvg();
+  };
+
   private renderMainArea = () => {
     if (this.state.data && this.state.selection) {
       return (
@@ -316,22 +336,12 @@ export class App extends React.Component<RouteComponentProps, {}> {
                 )
               }
               standalone={this.state.standalone}
-              onSelection={this.onSelection}
+              eventHandlers={{
-              onPrint={() => {
+                onSelection: this.onSelection,
-                analyticsEvent('print');
+                onPrint: this.onPrint,
-                this.chartRef && this.chartRef.print();
+                onDownloadPdf: this.onDownloadPdf,
-              }}
+                onDownloadPng: this.onDownloadPng,
-              onDownloadPdf={() => {
+                onDownloadSvg: this.onDownloadSvg,
-                analyticsEvent('download_pdf');
-                this.chartRef && this.chartRef.downloadPdf();
-              }}
-              onDownloadPng={() => {
-                analyticsEvent('download_png');
-                this.chartRef && this.chartRef.downloadPng();
-              }}
-              onDownloadSvg={() => {
-                analyticsEvent('download_svg');
-                this.chartRef && this.chartRef.downloadSvg();
               }}
             />
           )}

src/top_bar.tsx

@@ -30,10 +30,7 @@ interface State {
   searchResults: SearchResult[];
 }
 
-interface Props {
+interface EventHandlers {
-  showingChart: boolean;
-  gedcom?: GedcomData;
-  standalone: boolean;
   onSelection: (indiInfo: IndiInfo) => void;
   onPrint: () => void;
   onDownloadPdf: () => void;
@@ -41,6 +38,13 @@ interface Props {
   onDownloadSvg: () => void;
 }
 
+interface Props {
+  showingChart: boolean;
+  gedcom?: GedcomData;
+  standalone: boolean;
+  eventHandlers: EventHandlers;
+}
+
 function loadFileAsText(file: File): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -174,7 +178,7 @@ export class TopBar extends React.Component<
   /** On search result selected. */
   handleResultSelect(id: string) {
     analyticsEvent('search_result_selected');
-    this.props.onSelection({id, generation: 0});
+    this.props.eventHandlers.onSelection({id, generation: 0});
     this.searchRef!.setValue('');
   }
 
@@ -265,7 +269,7 @@ export class TopBar extends React.Component<
 
     const chartMenus = this.props.showingChart ? (
       <>
-        <Menu.Item as="a" onClick={() => this.props.onPrint()}>
+        <Menu.Item as="a" onClick={() => this.props.eventHandlers.onPrint()}>
           <Icon name="print" />
           <FormattedMessage id="menu.print" defaultMessage="Print" />
         </Menu.Item>
@@ -280,13 +284,19 @@ export class TopBar extends React.Component<
           className="item"
         >
           <Dropdown.Menu>
-            <Dropdown.Item onClick={() => this.props.onDownloadPdf()}>
+            <Dropdown.Item
+              onClick={() => this.props.eventHandlers.onDownloadPdf()}
+            >
               <FormattedMessage id="menu.pdf_file" defaultMessage="PDF file" />
             </Dropdown.Item>
-            <Dropdown.Item onClick={() => this.props.onDownloadPng()}>
+            <Dropdown.Item
+              onClick={() => this.props.eventHandlers.onDownloadPng()}
+            >
               <FormattedMessage id="menu.png_file" defaultMessage="PNG file" />
             </Dropdown.Item>
-            <Dropdown.Item onClick={() => this.props.onDownloadSvg()}>
+            <Dropdown.Item
+              onClick={() => this.props.eventHandlers.onDownloadSvg()}
+            >
               <FormattedMessage id="menu.svg_file" defaultMessage="SVG file" />
             </Dropdown.Item>
           </Dropdown.Menu>