Refactor to not define components inside a component

assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx

@@ -1,29 +1,15 @@
 import React, { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
-import _ from 'underscore';
 
 import generateColumnSelection from './generate_column_selection.jsx';
 import matchColumns from './match_columns.jsx';
 
 const MAX_SUBSCRIBERS_SHOWN = 10;
 
-function MatchTable({
-  subscribersCount,
-  subscribers,
-  header,
-}) {
-  let selectedColumns = [];
-
-  useLayoutEffect(() => {
-    generateColumnSelection((selectedOptionId, columnIndex) => {
-      selectedColumns[columnIndex] = selectedOptionId;
-    });
-  });
-
-  function ColumnDataMatch() {
+function ColumnDataMatch({ header, subscribers }) {
   const matchedColumnTypes = matchColumns(subscribers, header);
-    selectedColumns = _.pluck(matchedColumnTypes, 'column_id');
+  // selectedColumns = _.pluck(matchedColumnTypes, 'column_id');
   return (
     <tr>
       <th>{MailPoet.I18n.t('matchData')}</th>
@@ -43,18 +29,25 @@ function MatchTable({
       }
     </tr>
   );
-  }
+}
+ColumnDataMatch.propTypes = {
+  header: PropTypes.arrayOf(PropTypes.string).isRequired,
+  subscribers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+};
 
-  function Header() {
+function Header({ header }) {
   return (
     <tr className="mailpoet_header">
       <td />
       {header.map(headerName => <td key={headerName}>{headerName}</td>)}
     </tr>
   );
-  }
+}
+Header.propTypes = {
+  header: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
 
-  function Subscriber({ subscriber, index }) {
+function Subscriber({ subscriber, index }) {
   return (
     <>
       <td>{index}</td>
@@ -62,14 +55,13 @@ function MatchTable({
       {subscriber.map((field, i) => <td key={field + index + i}>{field}</td>)}
     </>
   );
-  }
-
-  Subscriber.propTypes = {
+}
+Subscriber.propTypes = {
   subscriber: PropTypes.arrayOf(PropTypes.string).isRequired,
   index: PropTypes.node.isRequired,
-  };
+};
 
-  function Subscribers() {
+function Subscribers({ subscribers, subscribersCount }) {
   const filler = '. . .';
   const fillerArray = Array(subscribers[0].length).fill(filler);
   return (
@@ -102,17 +94,34 @@ function MatchTable({
       }
     </>
   );
-  }
+}
+Subscribers.propTypes = {
+  subscribersCount: PropTypes.number.isRequired,
+  subscribers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
+};
+
+function MatchTable({
+  subscribersCount,
+  subscribers,
+  header,
+}) {
+  const selectedColumns = [];
+
+  useLayoutEffect(() => {
+    generateColumnSelection((selectedOptionId, columnIndex) => {
+      selectedColumns[columnIndex] = selectedOptionId;
+    });
+  });
 
   return (
     <div className="subscribers_data">
       <table className="mailpoet_subscribers widefat fixed">
         <thead>
-          <ColumnDataMatch />
+          <ColumnDataMatch header={header} subscribers={subscribers} />
         </thead>
         <tbody>
-          <Header />
-          <Subscribers />
+          <Header header={header} />
+          <Subscribers subscribers={subscribers} subscribersCount={subscribersCount} />
         </tbody>
       </table>
     </div>