feat(status-display): added status display

src/components/App/App.js

@@ -3,10 +3,12 @@ import { Provider } from 'react-redux'
 import store from '../../store'
 
 import Layout from '../Layout'
+import StatusDisplay from '../StatusDisplay'
 
 const App = () => (
   <Provider store={store}>
-    <Layout title="Connect Four" subtitle={() => <p>Under Construction</p>}>
+    <Layout title="Connect Four">
+      <StatusDisplay />
       <p>This is where my board will go eventually</p>
     </Layout>
   </Provider>

src/components/StatusDisplay/index.js

@@ -0,0 +1,4 @@
+import { connect } from 'react-redux'
+import StatusDisplay from './status-display'
+
+export default connect(({ status }) => ({ status }))(StatusDisplay)

src/components/StatusDisplay/status-display.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { root } from './status-display.module.css'
+
+const StatusDisplay = ({ status }) => {
+  if (status) {
+    return <div className={root}>{status}</div>
+  }
+
+  return null
+}
+
+StatusDisplay.propTypes = {
+  status: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired
+}
+
+export default StatusDisplay

src/components/StatusDisplay/status-display.module.css

@@ -0,0 +1,6 @@
+.root {
+  font-size: 1.2em;
+  line-height: 2em;
+  background-color: green;
+  text-align: center;
+}

src/reducers/game-reducer.js

@@ -1,7 +1,6 @@
 const { GAME_WON } = require('../actions/types')
 
 export const defaultState = {
-  status: false,
   board: Array(7).fill(Array(6).fill(0))
 }
 

src/reducers/index.js

@@ -1,7 +1,9 @@
 import { combineReducers } from 'redux'
 
 import gameReducer from './game-reducer'
+import statusReducer from './status-reducer'
 
 export default combineReducers({
+  status: statusReducer,
   game: gameReducer
 })

src/reducers/status-reducer.js

@@ -0,0 +1,7 @@
+export default function statusReducer(state = false, action) {
+  switch (action.type) {
+    default: {
+      return state
+    }
+  }
+}