Style tweaks

Author: mjackson

modules/IndexLink.js

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Link from './Link'
 
 /**
  * An <IndexLink> is used to link to an <IndexRoute>.
  */
-class IndexLink extends React.Component {
+class IndexLink extends Component {
 
   render() {
     return <Link {...this.props} onlyActiveOnIndex={true} />

modules/IndexRedirect.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import invariant from 'invariant'
 import warning from 'warning'
+import invariant from 'invariant'
+import React, { Component } from 'react'
 import Redirect from './Redirect'
 import { falsy } from './PropTypes'
 
@@ -9,7 +9,7 @@ const { string, object } = React.PropTypes
 /**
  * An <IndexRedirect> is used to redirect from an indexRoute.
  */
-class IndexRedirect extends React.Component {
+class IndexRedirect extends Component {
 
   static createRouteFromReactElement(element, parentRoute) {
     if (parentRoute) {

modules/IndexRoute.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import invariant from 'invariant'
 import warning from 'warning'
+import invariant from 'invariant'
+import React, { Component } from 'react'
 import { createRouteFromReactElement } from './RouteUtils'
 import { component, components, falsy } from './PropTypes'
 
@@ -10,7 +10,7 @@ const { bool, func } = React.PropTypes
  * An <IndexRoute> is used to specify its parent's <Route indexRoute> in
  * a JSX route config.
  */
-class IndexRoute extends React.Component {
+class IndexRoute extends Component {
 
   static createRouteFromReactElement(element, parentRoute) {
     if (parentRoute) {

modules/Link.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 
 const { bool, object, string, func } = React.PropTypes
 
@@ -36,7 +36,7 @@ function isEmptyObject(object) {
  *
  *   <Link ... query={{ show: true }} state={{ the: 'state' }} />
  */
-class Link extends React.Component {
+class Link extends Component {
 
   static contextTypes = {
     history: object

modules/Redirect.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import invariant from 'invariant'
+import React, { Component } from 'react'
 import { createRouteFromReactElement } from './RouteUtils'
 import { formatPattern } from './PatternUtils'
 import { falsy } from './PropTypes'
@@ -13,7 +13,7 @@ const { string, object } = React.PropTypes
  * Redirects are placed alongside routes in the route configuration
  * and are traversed in the same manner.
  */
-class Redirect extends React.Component {
+class Redirect extends Component {
 
   static createRouteFromReactElement(element) {
     const route = createRouteFromReactElement(element)

modules/Route.js

@@ -1,6 +1,6 @@
-import React from 'react'
 import warning from 'warning'
 import invariant from 'invariant'
+import React, { Component } from 'react'
 import { createRouteFromReactElement } from './RouteUtils'
 import { component, components } from './PropTypes'
 
@@ -16,7 +16,7 @@ const { string, bool, func } = React.PropTypes
  * that lead to it are considered "active" and their components are
  * rendered into the DOM, nested in the same order as in the tree.
  */
-class Route extends React.Component {
+class Route extends Component {
 
   static createRouteFromReactElement(element) {
     const route = createRouteFromReactElement(element)

modules/Router.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import warning from 'warning'
+import React, { Component } from 'react'
 import createHashHistory from 'history/lib/createHashHistory'
 import { createRoutes } from './RouteUtils'
 import RoutingContext from './RoutingContext'
@@ -13,7 +13,7 @@ const { func, object } = React.PropTypes
  * a router that renders a <RoutingContext> with all the props
  * it needs each time the URL changes.
  */
-class Router extends React.Component {
+class Router extends Component {
 
   static propTypes = {
     history: object,

modules/RoutingContext.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import invariant from 'invariant'
+import React, { Component } from 'react'
 import getRouteParams from './getRouteParams'
 
 const { array, func, object } = React.PropTypes
@@ -8,7 +8,7 @@ const { array, func, object } = React.PropTypes
  * A <RoutingContext> renders the component tree for a given router state
  * and sets the history object and the current location in context.
  */
-class RoutingContext extends React.Component {
+class RoutingContext extends Component {
 
   static propTypes = {
     history: object.isRequired,

modules/__tests__/IndexLink-test.js

@@ -1,7 +1,7 @@
 /*eslint-env mocha */
 /*eslint react/prop-types: 0*/
 import expect from 'expect'
-import React from 'react'
+import React, { Component } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import createHistory from 'history/lib/createMemoryHistory'
 import IndexRoute from '../IndexRoute'
@@ -12,7 +12,7 @@ import Link from '../Link'
 
 describe('An <IndexLink>', function () {
 
-  class App extends React.Component {
+  class App extends Component {
     render() {
       return (
         <div>
@@ -28,51 +28,51 @@ describe('An <IndexLink>', function () {
     }
   }
 
-  class Website extends React.Component {
+  class Wrapper extends Component {
     render() {
       return <div>website wrapper {this.props.children}</div>
     }
   }
 
-  class WebsiteOverview extends React.Component {
+  class IndexPage extends Component {
     render() {
       return <div>website overview</div>
     }
   }
 
-  class WebsiteContact extends React.Component {
+  class ContactPage extends Component {
     render() {
       return <div>contact page</div>
     }
   }
 
-  class WebsiteProducts extends React.Component {
+  class ProductsPage extends Component {
     render() {
       return <div>website products {this.props.children}</div>
     }
   }
 
-  class WebsiteProductsProduct extends React.Component {
+  class ProductPage extends Component {
     render() {
       return <div>specific product {this.props.params.productId}</div>
     }
   }
 
-  class WebsiteProductsIndex extends React.Component {
+  class ProductsIndexPage extends Component {
     render() {
       return <div>list of products</div>
     }
   }
 
   const routes = (
     <Route component={App}>
-      <Route path="/website" component={Website}>
-        <Route path="products" component={WebsiteProducts}>
-          <Route path=":productId" component={WebsiteProductsProduct} />
-          <IndexRoute component={WebsiteProductsIndex} />
+      <Route path="/website" component={Wrapper}>
+        <Route path="products" component={ProductsPage}>
+          <Route path=":productId" component={ProductPage} />
+          <IndexRoute component={ProductsIndexPage} />
         </Route>
-        <Route path="contact" component={WebsiteContact} />
-        <IndexRoute component={WebsiteOverview} />
+        <Route path="contact" component={ContactPage} />
+        <IndexRoute component={IndexPage} />
       </Route>
     </Route>
   )

modules/__tests__/IndexRoute-test.js

@@ -1,7 +1,7 @@
 /*eslint-env mocha */
 /*eslint react/prop-types: 0*/
 import expect from 'expect'
-import React from 'react'
+import React, { Component } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import createHistory from 'history/lib/createMemoryHistory'
 import IndexRoute from '../IndexRoute'
@@ -10,15 +10,15 @@ import Route from '../Route'
 
 describe('An <IndexRoute>', function () {
 
-  class Parent extends React.Component {
+  class Parent extends Component {
     render() {
       return <div>parent {this.props.children}</div>
     }
   }
 
-  class Child extends React.Component {
+  class Child extends Component {
     render() {
-      return <div>child </div>
+      return <div>child</div>
     }
   }
 
@@ -31,21 +31,21 @@ describe('An <IndexRoute>', function () {
     unmountComponentAtNode(node)
   })
 
-  it('renders when its parent’s url matches exactly', function (done) {
+  it("renders when its parent's URL matches exactly", function (done) {
     render((
       <Router history={createHistory('/')}>
         <Route path="/" component={Parent}>
           <IndexRoute component={Child}/>
         </Route>
       </Router>
     ), node, function () {
-      expect(node.textContent.trim()).toEqual('parent child')
+      expect(node.textContent).toEqual('parent child')
       done()
     })
   })
 
   describe('nested deeply in the route hierarchy', function () {
-    it('renders when its parent’s url matches exactly', function (done) {
+    it("renders when its parent's URL matches exactly", function (done) {
       render((
         <Router history={createHistory('/test')}>
           <Route path="/" component={Parent}>
@@ -56,7 +56,7 @@ describe('An <IndexRoute>', function () {
           </Route>
         </Router>
       ), node, function () {
-        expect(node.textContent.trim()).toEqual('parent parent child')
+        expect(node.textContent).toEqual('parent parent child')
         done()
       })
     })