import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import actions from 'pages/ndcs/ndcs-actions';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

import Component from './ndcs-overview-section-component';
import { commitmentsData } from './ndcs-overview-section-data';

class NdcsOverviewSection extends PureComponent {
  componentWillMount() {
    this.props.fetchNDCS(true);
  }

  render() {
    const { match, location } = this.props;
    let { section } = this.props;
    section = section || match.params.section;
    if (!section) {
      return commitmentsData.map((commitmentData, index) => (
        <Component
          data={commitmentData}
          key={commitmentData.title}
          section={index + 1}
          location={location}
        />
      ));
    }
    return (
      <Component
        data={commitmentsData[section - 1]}
        section={section}
        location={location}
      />
    );
  }
}

NdcsOverviewSection.propTypes = {
  fetchNDCS: PropTypes.func.isRequired,
  section: PropTypes.number,
  location: PropTypes.object,
  match: PropTypes.object
};
export default withRouter(connect(null, actions)(NdcsOverviewSection));

@@ -9,28 +9,24 @@
 eact, %7B 
-PureComponen
+useEffec
 t %7D from
@@ -330,12 +330,12 @@
 ;%0A%0Ac
-lass
+onst
  Ndc
@@ -355,72 +355,78 @@
 ion 
-extends PureComponent %7B%0A  componentWillMount() %7B%0A    this.props.
+= props =%3E %7B%0A  useEffect(() =%3E %7B%0A    const %7B fetchNDCS %7D = props;%0A    
 fetc
@@ -445,25 +445,16 @@
 %0A  %7D
-%0A%0A  render() %7B%0A  
+, %5B%5D);%0A%0A
   co
@@ -479,30 +479,23 @@
 ion %7D = 
-this.
 props;%0A
-  
   let %7B 
@@ -510,13 +510,8 @@
 %7D = 
-this.
 prop
@@ -515,18 +515,16 @@
 rops;%0A  
- 
- 
 section 
@@ -558,18 +558,16 @@
 ection;%0A
-  
   if (!s
@@ -580,18 +580,16 @@
 ) %7B%0A    
-  
 return c
@@ -638,26 +638,24 @@
  =%3E (%0A      
- 
- 
 %3CComponent%0A 
@@ -649,26 +649,24 @@
  %3CComponent%0A
-  
         data
@@ -691,18 +691,16 @@
         
- 
- 
 key=%7Bcom
@@ -718,18 +718,16 @@
 .title%7D%0A
-  
         
@@ -750,26 +750,24 @@
  1%7D%0A        
-  
 location=%7Blo
@@ -780,23 +780,19 @@
 %7D%0A      
-  
 /%3E%0A
-  
     ));%0A
@@ -797,14 +797,10 @@
 ;%0A  
-  %7D%0A  
+%7D%0A
   re
@@ -806,18 +806,16 @@
 eturn (%0A
-  
     %3CCom
@@ -819,34 +819,32 @@
 Component%0A      
-  
 data=%7Bcommitment
@@ -861,34 +861,32 @@
 ion - 1%5D%7D%0A      
-  
 section=%7Bsection
@@ -883,26 +883,24 @@
 n=%7Bsection%7D%0A
-  
       locati
@@ -921,25 +921,18 @@
     
-  
 /%3E%0A  
- 
- 
 );%0A
-  %7D%0A
 %7D
+;
 %0A%0ANd
@@ -967,48 +967,8 @@
 = %7B%0A
-  fetchNDCS: PropTypes.func.isRequired,%0A
   se

Move to hooks