Code cleanup, removed warnings, fixed test, made state immutable in donations form

package.json

@@ -17,6 +17,9 @@
     "react-bootstrap": "^0.31.3",
     "react-datepicker": "^0.55.0",
     "react-dom": "^15.6.1",
+    "react-router-bootstrap": "^0.24.4",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.0.13",
     "react-icons": "^2.2.5",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.13",

src/App.css

@@ -82,7 +82,7 @@
 /* END Navbar Styles */
 
 /* START Footer Styles */
-footer{
+.footer{
     padding-top: 35px;
     padding-bottom: 35px;
     background-color: #2a2730;

src/App.js

@@ -1,33 +1,26 @@
-import React, { Component } from 'react';
-import { Route, Switch } from 'react-router-dom';
-
-import Layout from './Layout/layout';
-
-import LandingPage from './LandingPage/components/landingPage';
-import DonationForm from './DonationForm/components/donationForm';
-import ThankYou from './ThankYou/components/thankYou';
-import Confirm from './Confirm/components/confirm';
-import Search from './Search/components/search';
-
+import React  from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import Layout from './Layout/layout.js'
+import LandingPage from './LandingPage/components/landingPage.js'
+import DonationForm from './DonationForm/components/donationForm.js'
+import ThankYou from './ThankYou/components/thankYou.js'
+import Confirm from './Confirm/components/confirm.js'
+import Search from './Search/components/search.js'
 import './Bootstrap3.3.7/bootstrap.min.css';
-import 'react-table/react-table.css';
-
 import './App.css';
 
-class App extends Component {
-    render() {
-        return (
-            <Layout>
-              <Switch>
-                <Route exact path="/" component={LandingPage} />
-                <Route exact path="/donation-form" component={DonationForm} />
-                <Route exact path="/donation-form/thank-you" component={ThankYou} />
-                    <Route exact path="/confirm" component={Confirm} />
-                    <Route exact path="/search" component={Search} />
-              </Switch>
-            </Layout>
-        );
-    }
-}
-
-export default App;
+export default function App() {
+    return (
+      <Router>
+        <Layout>
+          <Switch>
+              <Route exact path="/" component={LandingPage} />
+              <Route exact path="/donation-form" component={DonationForm} />
+              <Route exact path="/donation-form/thank-you" component={ThankYou} />
+              <Route exact path="/confirm" component={Confirm} />
+              <Route exact path="/search" component={Search} />
+          </Switch>
+        </Layout>
+      </Router>
+    );
+}

src/App.test.js

@@ -7,7 +7,7 @@ it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(
     <MemoryRouter>
-      <App />
+      { App() }
     </MemoryRouter>,
     div
   );

src/Confirm/components/confirm.js

@@ -21,17 +21,17 @@ export default class Confirm extends Component {
         this.state = {
             confirmed: false,
             error:     false
-        }
+        };
     }
 
     componentDidMount() {
         const confirmService = client.service('confirm');
-        const qs             = queryString.parse(this.props.location.search);
+        const qs = queryString.parse(this.props.location.search);
 
         if (qs.id) {
             confirmService.get(qs.id)
-                .then(() => this.setState({ confirmed: true }))
-                .catch((err) => this.setState({ error: err }));
+              .then(() => this.setState({confirmed: true}))
+              .catch((err) => this.setState({error: err}));
         }
     }
 
@@ -45,8 +45,7 @@ export default class Confirm extends Component {
                     <div className="svg-spin fa"><FaSpinner className="fa-spin"/></div>
                 </div>
             );
-        }
-        else if (this.state.confirmed) {
+        } else if (this.state.confirmed) {
             jsx = (
                 <div>
                     <h1 className="green"><FaCheck /></h1>
@@ -59,8 +58,7 @@ export default class Confirm extends Component {
                     <Link className="btn btn-lg btn-donate" to='/'>Go Back to the Home Page</Link>
                 </div>
             );
-        }
-        else if (this.state.error) {
+        } else if (this.state.error) {
             jsx = (
                 <div>
                     <div className="goX"><GoX/></div>
@@ -71,7 +69,6 @@ export default class Confirm extends Component {
                 </div>
             );
         }
-
         return (
             <Grid fluid>
                 <Jumbotron>

src/DonationForm/components/donationForm.js

@@ -1,37 +1,32 @@
 import React, { Component } from 'react';
-
-import donationFormActions from '../actions/donationFormActions';
-import InputMask from '../../utils/inputMask';
-import Options from '../lib/options';
-
+import DatePicker from 'react-datepicker';
 import {
     Form,
     Input,
     Select,
     Textarea
 } from 'formsy-react-components';
-
 import {
     Grid,
     Row,
     Col,
     Jumbotron,
     Button,
     ControlLabel
-} from 'react-bootstrap'
-
+} from 'react-bootstrap';
+import donationFormActions from '../actions/donationFormActions.js'
+import InputMask from '../../utils/inputMask.js'
+import Options from '../lib/options.js'
+import '../style/donationForm.css';
 import '../style/donationForm.css';
-
-import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
-
 import '../style/donationForm.css';
 import '../style/react-datepicker.css';
 
 export default class DonationForm extends Component {
     constructor() {
-        super()
-        this.state                       = {
+        super();
+        this.state = {
             showTranportationOptions: false,
             invalidSubmit:            false,
             submissionErrors:         [],
@@ -49,23 +44,22 @@ export default class DonationForm extends Component {
     }
 
     componentDidMount() {
-        document.addEventListener('donationSubmitted', this.successfulSubmission)
-        document.addEventListener('submissionError', this.submissionError)
+        document.addEventListener('donationSubmitted', this.successfulSubmission);
+        document.addEventListener('submissionError', this.submissionError);
     }
 
     componentWillUnmount() {
-        document.removeEventListener('donationSubmitted', this.successfulSubmission)
-        document.removeEventListener('submissionError', this.submissionError)
+        document.removeEventListener('donationSubmitted', this.successfulSubmission);
+        document.removeEventListener('submissionError', this.submissionError);
     }
 
     successfulSubmission() {
         this.props.history.push('/donation-form/thank-you');
     }
 
     submissionError() {
-        let errorArray = this.state.submissionErrors
-        errorArray.push('There was an error processing your request.')
-        this.setState({submissionErrors: errorArray})
+        const submissionErrors = [...this.state.submissionErrors, 'There was an error processing your request.'];
+        this.setState({ submissionErrors });
     }
 
     handleValidSubmission(data) {
@@ -80,20 +74,18 @@ export default class DonationForm extends Component {
     }
 
     invalidSubmit() {
-        let errorArray = this.state.submissionErrors
-        errorArray.push('Please fix the errors above.')
-        this.setState({submissionErrors: errorArray})
+        const submissionErrors = [...this.state.submissionErrors , 'Please fix the errors above.'];
+        this.setState({ submissionErrors });
     }
 
     isValid() {
-        let errorArray = this.state.submissionErrors
-        let errorIndex = this.state.submissionErrors.indexOf('Please fix the errors above.')
-        errorArray.splice(errorIndex, 1)
-        this.setState({submissionErrors: errorArray})
+        const errorIndex = this.state.submissionErrors.indexOf('Please fix the errors above.');
+        const submissionErrors = this.state.submissionErrors.slice(errorIndex, 1);
+        this.setState({ submissionErrors })
     }
 
     transportationNeededChanged() {
-        this.setState({showTranportationOptions: !this.state.showTranportationOptions})
+        this.setState({ showTranportationOptions: !this.state.showTranportationOptions })
     }
 
     handleExpirationDateChange(value) {
@@ -225,7 +217,7 @@ export default class DonationForm extends Component {
                                 name="transportationNeed"
                                 label="Do you need transportation of goods?"
                                 options={Options.needsTransportationOptions}
-                                value={false}
+                                value='false'
                                 onChange={this.transportationNeededChanged}
                                 required
                                 rowClassName="addMargin"

src/Layout/components/footer.js

@@ -1,23 +1,20 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   Grid,
   Row,
   Col
-} from 'react-bootstrap'
+} from 'react-bootstrap';
 
-export default class subFooter extends Component {
-  render() {
-    return(
-      <footer className='footer'>
-        <Grid>
-          <Row className="subFooter">
-            <Col xs={12} className="text-center">
-              <p>Powered by DonDB</p>
-            </Col>
-          </Row>
-        </Grid>
-      </footer>
-
-    )
-  }
+export default function Footer() {
+  return (
+    <div className='footer'>
+      <Grid>
+        <Row className="subFooter">
+          <Col xs={12} className="text-center">
+            <p>Powered by DonDB</p>
+          </Col>
+        </Row>
+      </Grid>
+    </div>
+  );
 }

src/Layout/components/header.js

@@ -1,37 +1,32 @@
-import React, { Component } from 'react';
-import { Link, withRouter } from 'react-router-dom';
-import {
-    Navbar,
-    Nav,
-    NavItem
-} from 'react-bootstrap'
-
+import React  from 'react';
+import { Link } from 'react-router-dom';
+import { Navbar, Nav, NavItem } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
 import branding from '../../brandingConfig';
 
-class Header extends Component {
-    render() {
-        return (
-            <Navbar staticTop>
-                <Navbar.Header>
-                    <Navbar.Brand>
-                        <Link to="/">{branding.logoUrl ? <img src={branding.logoUrl} alt="Home" />: 'Home'}</Link>
-                    </Navbar.Brand>
-                    <Navbar.Toggle />
-                </Navbar.Header>
-                <Navbar.Collapse>
-                    <Nav>
-                        <NavItem eventKey={1} onClick={() => this.props.history.push('/donation-form')}>
-                            Submit your donation
-                        </NavItem>
-                        <NavItem eventKey={2} onClick={() => this.props.history.push('/search')}>
-                            Search
-                        </NavItem>
-                    </Nav>
-                </Navbar.Collapse>
-            </Navbar>
-        )
-    }
-}
-
-
-export default withRouter(Header);
+export default function Header() {
+  return(
+    <Navbar staticTop>
+      <Navbar.Header>
+        <Navbar.Brand>
+            <Link to="/">{branding.logoUrl ? <img src={branding.logoUrl} alt="Home" />: 'Home'}</Link>
+        </Navbar.Brand>
+        <Navbar.Toggle />
+      </Navbar.Header>
+      <Navbar.Collapse>
+        <Nav bsStyle="pills">
+          <LinkContainer to='/donation-form'>
+            <NavItem eventKey={1}>
+              Submit your donation
+            </NavItem>
+          </LinkContainer>
+          <LinkContainer to='/search'>
+            <NavItem eventKey={2}>
+              Search
+            </NavItem>
+          </LinkContainer>
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+}

src/Layout/layout.js

@@ -1,20 +1,16 @@
-import React, { Component } from 'react';
-import Header from './components/header'
-import Footer from './components/footer'
-
+import React  from 'react';
+import Header from './components/header.js'
+import Footer from './components/footer.js'
 import './style/layout.css'
 
-export default class Layout extends Component {
-
-  render() {
-    return (
-      <div className='layout'>
-        <div className='full-height'>
-          <Header/>
-            {this.props.children}
-        </div>
-        <Footer/>
+export default function Layout({ children }) {
+  return (
+    <div className='layout'>
+      <div className='full-height'>
+        { Header() }
+        { children }
       </div>
-    )
-  }
-}
+      { Footer() }
+    </div>
+  );
+}

src/Search/components/login.js

@@ -80,7 +80,7 @@ class Login extends Component {
                             labelClassName={[{'col-sm-3': false}, 'col-md-2 col-md-offset-2']}
                             elementWrapperClassName={[{'col-sm-9': false}, 'col-md-6 col-xs-12']}
                         />
-                        <Button type="submit" disabled={!this.state.canSubmit} className="col-xs-12 col-md-6 col-md-offset-3 btn-donate" type="submit" bsSize="large">
+                        <Button type="submit" disabled={!this.state.canSubmit} className="col-xs-12 col-md-6 col-md-offset-3 btn-donate"  bsSize="large">
                             Submit
                         </Button>
                     </Form>