Code style change: remove semicolons. Less noise!

Author: dev-geddy

src/App.js

@@ -1,10 +1,10 @@
-import React, {Component} from 'react';
-import './App.css';
-import Header from './layout/Header';
-import Footer from './layout/Footer';
-import Home from './pages/Home';
-import Contact from './pages/Contact';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import React, {Component} from 'react'
+import './App.css'
+import Header from './layout/Header'
+import Footer from './layout/Footer'
+import Home from './pages/Home'
+import Contact from './pages/Contact'
+import { BrowserRouter as Router, Route} from 'react-router-dom'
 // "npm install --save react-router-dom" - installs latest version of React Router
 
 class App extends Component {
@@ -20,8 +20,8 @@ class App extends Component {
           <Footer />
         </div>
       </Router>
-    );
+    )
   }
 }
 
-export default App;
+export default App

src/App.test.js

@@ -1,32 +1,32 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import { shallow } from 'enzyme';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import { shallow } from 'enzyme'
 // run "npm install react-test-renderer --save-dev" and "npm install enzyme --save-dev" to install testing tools.
 
-import Home from './pages/Home';
-import Contact from './pages/Contact';
-import { Route} from 'react-router-dom';
+import Home from './pages/Home'
+import Contact from './pages/Contact'
+import { Route} from 'react-router-dom'
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-});
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+})
 
 it('contains Header and Footer components', () => {
-  const component = shallow(<App />);
-  expect(component.find('Header')).toBeDefined();
-  expect(component.find('Footer')).toBeDefined();
-});
+  const component = shallow(<App />)
+  expect(component.find('Header')).toBeDefined()
+  expect(component.find('Footer')).toBeDefined()
+})
 
 it('renders correct routes', () => {
-  const wrapper = shallow(<App />);
+  const wrapper = shallow(<App />)
   const pathMap = wrapper.find(Route).reduce((pathMap, route) => {
-    const routeProps = route.props();
-    pathMap[routeProps.path] = routeProps.component;
-    return pathMap;
-  }, {});
+    const routeProps = route.props()
+    pathMap[routeProps.path] = routeProps.component
+    return pathMap
+  }, {})
 
-  expect(pathMap['/']).toBe(Home);
-  expect(pathMap['/contact']).toBe(Contact);
-});
+  expect(pathMap['/']).toBe(Home)
+  expect(pathMap['/contact']).toBe(Contact)
+})

src/forms/ContactForm.js

@@ -1,5 +1,5 @@
-import React, {Component} from 'react';
-import './ContactForm.css';
+import React, {Component} from 'react'
+import './ContactForm.css'
 
 export class ContactForm extends Component {
 
@@ -14,30 +14,30 @@ export class ContactForm extends Component {
   }
 
   handleFormSubmit = (event) => {
-    event.preventDefault();
+    event.preventDefault()
     // data sending related functionality to follow here
-    console.log("FORM DATA: ", this.state);
+    console.log("FORM DATA: ", this.state)
     alert("Check your browser console to see object containing form data!")
   }
 
   handleChange = (event) => {
-    const {id, value} = event.target;
+    const {id, value} = event.target
     if (this.defaultState[id] !== undefined) {
       let newState = {
         ...this.state
-      };
-      newState[id] = value;
-      this.setState(newState);
+      }
+      newState[id] = value
+      this.setState(newState)
     }
   }
 
   resetForm = (event) => {
-    event.preventDefault();
-    this.setState({...this.defaultState});
+    event.preventDefault()
+    this.setState({...this.defaultState})
   }
 
   render() {
-    const {name, email, message} = this.state;
+    const {name, email, message} = this.state
     return (
       <form onSubmit={this.handleFormSubmit}>
         <div className="ContactForm-row">
@@ -57,8 +57,8 @@ export class ContactForm extends Component {
           <button type="reset" onClick={this.resetForm}>Reset</button>
         </div>
       </form>
-    );
+    )
   }
 }
 
-export default ContactForm;
+export default ContactForm

src/forms/ContactForm.spec.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import ContactForm from './ContactForm';
-import { shallow, mount } from 'enzyme';
+import React from 'react'
+import ContactForm from './ContactForm'
+import { shallow, mount } from 'enzyme'
 
 const formFields = [{
   id: 'name',
@@ -11,58 +11,58 @@ const formFields = [{
 },{
   id: 'message',
   value: 'Hello world!'
-}];
+}]
 
 const mockFormData = {
   name: 'John',
   email: 'someone@some123domain.com',
   message: 'Hello world!'
-};
+}
 
 it('should render without crashing', () => {
-  shallow(<ContactForm />);
-});
+  shallow(<ContactForm />)
+})
 
 it('should contain all inputs', () => {
-  const component = shallow(<ContactForm />);
-  expect(component.find('input').length).toEqual(2);
-  expect(component.find('textArea').length).toEqual(1);
-  expect(component.find('button').length).toEqual(2);
-});
+  const component = shallow(<ContactForm />)
+  expect(component.find('input').length).toEqual(2)
+  expect(component.find('textArea').length).toEqual(1)
+  expect(component.find('button').length).toEqual(2)
+})
 
 describe('all inputs should update on change', () => {
   formFields.forEach((formField) => {
     it(`input "${formField.id}" should update the state`, () => {
-      const component = mount(<ContactForm />);
+      const component = mount(<ContactForm />)
       const mockChangeEvent = {
         target: {...formField}
-      };
-      component.find(`#${formField.id}`).at(0).simulate("change", mockChangeEvent);
-      expect(component.state()[formField.id]).toEqual(mockChangeEvent.target.value);
-    });
-  });
-});
+      }
+      component.find(`#${formField.id}`).at(0).simulate("change", mockChangeEvent)
+      expect(component.state()[formField.id]).toEqual(mockChangeEvent.target.value)
+    })
+  })
+})
 
 it('form submit should call handleFormSubmit function', () => {
-  const component = mount(<ContactForm />);
+  const component = mount(<ContactForm />)
   const mockEvent = {
     preventDefault: jest.fn()
-  };
-  spyOn(component.nodes[0], 'handleFormSubmit').and.callThrough();
-  component.setState({...mockFormData});
-  component.find('form').at(0).simulate("submit", mockEvent);
-  expect(component.nodes[0].handleFormSubmit).toBeCalled();
-  expect(mockEvent.preventDefault).toBeCalled();
-});
+  }
+  spyOn(component.nodes[0], 'handleFormSubmit').and.callThrough()
+  component.setState({...mockFormData})
+  component.find('form').at(0).simulate("submit", mockEvent)
+  expect(component.nodes[0].handleFormSubmit).toBeCalled()
+  expect(mockEvent.preventDefault).toBeCalled()
+})
 
 it('reset button should clear the form', () => {
-  const component = mount(<ContactForm />);
+  const component = mount(<ContactForm />)
   const mockEvent = {
     preventDefault: jest.fn()
-  };
-  spyOn(component.nodes[0], 'resetForm').and.callThrough();
-  component.setState({...mockFormData});
-  component.find('button').at(1).simulate("click", mockEvent);
-  expect(component.nodes[0].resetForm).toBeCalled();
-  expect(component.state()).not.toEqual(mockFormData);
-});
+  }
+  spyOn(component.nodes[0], 'resetForm').and.callThrough()
+  component.setState({...mockFormData})
+  component.find('button').at(1).simulate("click", mockEvent)
+  expect(component.nodes[0].resetForm).toBeCalled()
+  expect(component.state()).not.toEqual(mockFormData)
+})

src/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import './index.css';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './index.css'
 
 ReactDOM.render(
   <App />,
   document.getElementById('mountMyApp')
-);
+)

src/layout/Footer.js

@@ -1,5 +1,5 @@
-import React, {Component} from 'react';
-import './Footer.css';
+import React, {Component} from 'react'
+import './Footer.css'
 
 class Footer extends Component {
   render() {
@@ -9,8 +9,8 @@ class Footer extends Component {
           Built to help people learn React! It's 2017 now.
         </div>
       </footer>
-    );
+    )
   }
 }
 
-export default Footer;
+export default Footer

src/layout/Footer.spec.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import Footer from './Footer';
-import { shallow } from 'enzyme';
+import React from 'react'
+import Footer from './Footer'
+import { shallow } from 'enzyme'
 
 it('renders without crashing', () => {
-  shallow(<Footer />);
-});
+  shallow(<Footer />)
+})
 
 it('contains 2017 in the text', () => {
-  const component = shallow(<Footer />);
-  expect(component.text()).toContain("2017");
-});
+  const component = shallow(<Footer />)
+  expect(component.text()).toContain("2017")
+})

src/layout/Header.js

@@ -1,23 +1,23 @@
-import React, {Component} from 'react';
-import './Header.css';
-import {NavLink} from 'react-router-dom';
-import menuItems from '../sampleData/menuItems';
+import React, {Component} from 'react'
+import './Header.css'
+import {NavLink} from 'react-router-dom'
+import menuItems from '../sampleData/menuItems'
 
 class Header extends Component {
   renderMenuItems(menuItems) {
     return menuItems.map((menuItem, index) => {
       const addProps = {
         to: menuItem.to,
         exact: menuItem.exact
-      };
+      }
       return (
         <li key={index}>
           <NavLink className="menu-item"
                    activeClassName="menu-itm--current"
                    {...addProps}>{menuItem.caption}</NavLink>
         </li>
-      );
-    });
+      )
+    })
   }
 
   render() {
@@ -34,8 +34,8 @@ class Header extends Component {
           </nav>
         </div>
       </header>
-    );
+    )
   }
 }
 
-export default Header;
+export default Header

src/layout/Header.spec.js

@@ -1,25 +1,25 @@
-import React from 'react';
-import Header from './Header';
-import { shallow } from 'enzyme';
+import React from 'react'
+import Header from './Header'
+import { shallow } from 'enzyme'
 
 it('renders without crashing', () => {
-  shallow(<Header />);
-});
+  shallow(<Header />)
+})
 
 it('has h1 title', () => {
-  const component = shallow(<Header />);
-  expect(component.find('h1').text()).toContain("My React Site");
-});
+  const component = shallow(<Header />)
+  expect(component.find('h1').text()).toContain("My React Site")
+})
 
 it('contains x2 NavLink (menu items)', () => {
-  const component = shallow(<Header />);
-  expect(component.find('li > NavLink').length).toEqual(2);
-});
+  const component = shallow(<Header />)
+  expect(component.find('li > NavLink').length).toEqual(2)
+})
 
 it('navigation has correct links', () => {
-  const component = shallow(<Header />);
-  expect(component.find('li > NavLink').at(0).props().children).toContain("Home");
-  expect(component.find('li > NavLink').at(0).props().to).toEqual("/");
-  expect(component.find('li > NavLink').at(1).props().children).toContain("Contact");
-  expect(component.find('li > NavLink').at(1).props().to).toEqual("/contact");
-});
+  const component = shallow(<Header />)
+  expect(component.find('li > NavLink').at(0).props().children).toContain("Home")
+  expect(component.find('li > NavLink').at(0).props().to).toEqual("/")
+  expect(component.find('li > NavLink').at(1).props().children).toContain("Contact")
+  expect(component.find('li > NavLink').at(1).props().to).toEqual("/contact")
+})