DEV-13664: submission functional components

src/js/components/submission/NextButton.jsx

@@ -15,10 +15,6 @@ const propTypes = {
     submissionID: PropTypes.string.isRequired
 };
 
-const defaultProps = {
-    label: 'Next'
-};
-
 const NextButton = ({
     disabled, nextButtonClass, step, label='Next', submissionID
 }) => (
@@ -38,6 +34,5 @@ const NextButton = ({
 );
 
 NextButton.propTypes = propTypes;
-NextButton.defaultProps = defaultProps;
 
 export default NextButton;

src/js/components/submission/SubmissionHeader.jsx

@@ -12,21 +12,15 @@ const propTypes = {
     reporting_period: PropTypes.string
 };
 
-const defaultProps = {
-    last_updated: '',
-    agency_name: '',
-    reporting_period: ''
-};
-
-const SubmissionHeader = (props) => {
-    const formattedTime = moment.utc(props.last_updated).local().format('MM/DD/YYYY h:mm a');
-    const submissionContext = props.last_updated || props.agency_name || props.reporting_period ? (
+const SubmissionHeader = ({last_updated='', agency_name='', reporting_period=''}) => {
+    const formattedTime = moment.utc(last_updated).local().format('MM/DD/YYYY h:mm a');
+    const submissionContext = last_updated || agency_name || reporting_period ? (
         <div className="last-updated">
             Last Saved: {formattedTime}
             <br />
-            {props.agency_name}
+            {agency_name}
             <br />
-            Reporting Period (FY): {props.reporting_period}
+            Reporting Period (FY): {reporting_period}
         </div>
     ) : null;
 
@@ -49,5 +43,4 @@ const SubmissionHeader = (props) => {
 };
 
 SubmissionHeader.propTypes = propTypes;
-SubmissionHeader.defaultProps = defaultProps;
 export default SubmissionHeader;

src/js/components/submission/SubmissionPage.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 import Banner from 'components/SharedComponents/Banner';
@@ -28,89 +27,73 @@ const propTypes = {
     reverting: PropTypes.bool
 };
 
-const defaultProps = {
-    error: false,
-    errorMessage: '',
-    loading: true,
-    submissionInfo: {},
-    currentStep: 0,
-    reverting: false
-};
-
-export default class SubmissionPage extends React.Component {
-    render() {
-        const {
-            loading,
-            error,
-            errorMessage,
-            submissionID,
-            currentStep,
-            submissionInfo
-        } = this.props;
-        let content;
-        switch (currentStep) {
-            case 1:
-                content = (
-                    <ValidateDataContainer
-                        submissionID={submissionID}
-                        errorFromStep={this.props.errorFromStep} />
-                );
-                break;
-            case 2:
-                content = (
-                    <GenerateFilesContainer
-                        submissionID={submissionID}
-                        errorFromStep={this.props.errorFromStep} />
-                );
-                break;
-            case 3:
-                content = (
-                    <CrossFileContentContainer
-                        submissionID={submissionID}
-                        errorFromStep={this.props.errorFromStep}
-                        publishStatus={submissionInfo.publish_status} />
-                );
-                break;
-            case 4:
-                content = <GenerateEFContainer submissionID={submissionID} errorFromStep={this.props.errorFromStep} />;
-                break;
-            case 5:
-                content = (<ReviewDataContainer
-                    submissionID={submissionID}
-                    errorFromStep={this.props.errorFromStep}
-                    testSubmission={submissionInfo.test_submission} />);
-                break;
-            default:
-                content = null;
-        }
-        const subStatusBanner = (<SubmissionWarningBanner
-            submissionInfo={this.props.submissionInfo}
-            revertSubmission={this.props.revertSubmission}
-            reverting={this.props.reverting} />);
-        return (
-            <div className="usa-da-submission-page">
-                <Navbar activeTab="submissionGuide" type="dabs" />
-                <main>
-                    <SubmissionHeader {...submissionInfo} />
-                    <Banner type="dabs" />
-                    <div className="usa-da-content-step-block" name="content-top">
-                        <div className="container center-block">
-                            <div className="row">
-                                <Progress
-                                    currentStep={currentStep}
-                                    id={submissionID} />
-                            </div>
+const SubmissionPage = ({
+    error = false, errorMessage = '', loading = true, submissionInfo = {}, currentStep = 0, reverting = false, ...props
+}) => {
+    let content;
+    switch (currentStep) {
+        case 1:
+            content = (
+                <ValidateDataContainer
+                    submissionID={props.submissionID}
+                    errorFromStep={props.errorFromStep} />
+            );
+            break;
+        case 2:
+            content = (
+                <GenerateFilesContainer
+                    submissionID={props.submissionID}
+                    errorFromStep={props.errorFromStep} />
+            );
+            break;
+        case 3:
+            content = (
+                <CrossFileContentContainer
+                    submissionID={props.submissionID}
+                    errorFromStep={props.errorFromStep}
+                    publishStatus={submissionInfo.publish_status} />
+            );
+            break;
+        case 4:
+            content = <GenerateEFContainer submissionID={props.submissionID} errorFromStep={props.errorFromStep} />;
+            break;
+        case 5:
+            content = (<ReviewDataContainer
+                submissionID={props.submissionID}
+                errorFromStep={props.errorFromStep}
+                testSubmission={submissionInfo.test_submission} />);
+            break;
+        default:
+            content = null;
+    }
+    const subStatusBanner = (<SubmissionWarningBanner
+        submissionInfo={submissionInfo}
+        revertSubmission={props.revertSubmission}
+        reverting={reverting} />);
+    return (
+        <div className="usa-da-submission-page">
+            <Navbar activeTab="submissionGuide" type="dabs" />
+            <main>
+                <SubmissionHeader {...submissionInfo} />
+                <Banner type="dabs" />
+                <div className="usa-da-content-step-block" name="content-top">
+                    <div className="container center-block">
+                        <div className="row">
+                            <Progress
+                                currentStep={currentStep}
+                                id={props.submissionID} />
                         </div>
                     </div>
-                    {subStatusBanner}
-                    {error ? (<DABSFABSErrorMessage message={errorMessage} />) : null}
-                    {loading ? (<ReviewLoading />) : null}
-                    {content}
-                </main>
-            </div>
-        );
-    }
-}
+                </div>
+                {subStatusBanner}
+                {error ? (<DABSFABSErrorMessage message={errorMessage} />) : null}
+                {loading ? (<ReviewLoading />) : null}
+                {content}
+            </main>
+        </div>
+    );
+};
 
 SubmissionPage.propTypes = propTypes;
-SubmissionPage.defaultProps = defaultProps;
+
+export default SubmissionPage;

src/js/components/uploadFabsFile/UploadFabsFileValidation.jsx

@@ -3,6 +3,7 @@
  * Created by Minahm Kim
  */
 
+import React from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 import { useState, useEffect, useRef } from 'react';