refactor(App): reorganize counter components

Author: David Zukowski

src/components/Counter/Counter.scss

@@ -1,15 +1,15 @@
 import React from 'react'
 import { IndexLink, Link } from 'react-router'
-import classes from './Header.scss'
+import './Header.scss'
 
 export const Header = () => (
   <div>
     <h1>React Redux Starter Kit</h1>
-    <IndexLink to='/' activeClassName={classes.activeRoute}>
+    <IndexLink to='/' activeClassName='route--active'>
       Home
     </IndexLink>
     {' · '}
-    <Link to='/counter' activeClassName={classes.activeRoute}>
+    <Link to='/counter' activeClassName='route--active'>
       Counter
     </Link>
   </div>

src/components/Counter/index.js

@@ -1,4 +1,4 @@
-.activeRoute {
+.route--active {
   font-weight: bold;
   text-decoration: underline;
 }

src/components/Header/Header.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import Header from '../../components/Header'
-import classes from './CoreLayout.scss'
+import './CoreLayout.scss'
 import '../../styles/core.scss'
 
 export const CoreLayout = ({ children }) => (
   <div className='container text-center'>
     <Header />
-    <div className={classes.mainContainer}>
+    <div className='core-layout__viewport'>
       {children}
     </div>
   </div>

src/components/Header/Header.scss

@@ -1,3 +1,3 @@
-.mainContainer {
-  padding-top:20px;
+.core-layout__viewport {
+  padding-top: 4rem;
 }

src/layouts/CoreLayout/CoreLayout.js

@@ -1,15 +1,8 @@
 import React from 'react'
-import classes from './Counter.scss'
 
 export const Counter = (props) => (
-  <div>
-    <h2 className={classes.counterContainer}>
-      Counter:
-      {' '}
-      <span className={classes['counter--green']}>
-        {props.counter}
-      </span>
-    </h2>
+  <div style={{ margin: '0 auto' }} >
+    <h2>Counter: {props.counter}</h2>
     <button className='btn btn-default' onClick={props.increment}>
       Increment
     </button>

src/layouts/CoreLayout/CoreLayout.scss

@@ -6,7 +6,7 @@ import { increment, doubleAsync } from '../modules/counter'
     wiring in the actions and state necessary to render a presentational
     component - in this case, the counter:   */
 
-import Counter from 'components/Counter'
+import Counter from '../components/Counter'
 
 /*  Object of action creators (can also be function that returns object).
     Keys will be passed as props to presentational components. Here we are

src/components/Counter/Counter.js renamed to src/routes/Counter/components/Counter.js

@@ -1,23 +1,21 @@
-:global {
-  @import 'base';
-  @import '~normalize.css/normalize';
+@import 'base';
+@import '~normalize.css/normalize';
 
-  // Some best-practice CSS that's useful for most apps
-  // Just remove them if they're not what you want
-  html {
-    box-sizing: border-box;
-  }
-
-  html,
-  body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
+// Some best-practice CSS that's useful for most apps
+// Just remove them if they're not what you want
+html {
+  box-sizing: border-box;
+}
 
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
 }
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}

src/routes/Counter/containers/CounterContainer.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Header } from 'components/Header/Header'
-import classes from 'components/Header/Header.scss'
 import { IndexLink, Link } from 'react-router'
 import { shallow } from 'enzyme'
 
@@ -20,15 +19,15 @@ describe('(Component) Header', () => {
   describe('Navigation links...', () => {
     it('Should render a Link to Home route', () => {
       expect(_wrapper.contains(
-        <IndexLink activeClassName={classes.activeRoute} to='/'>
+        <IndexLink activeClassName='route--active' to='/'>
           Home
         </IndexLink>
       )).to.be.true
     })
 
     it('Should render a Link to Counter route', () => {
       expect(_wrapper.contains(
-        <Link activeClassName={classes.activeRoute} to='/counter'>
+        <Link activeClassName='route--active' to='/counter'>
           Counter
         </Link>
       )).to.be.true