Use Redux and Redux DevTool

package.json

@@ -15,30 +15,33 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "babel-core": "^6.0.20",
     "babel-polyfill": "^6.16.0",
-    "normalize.css": "^5.0.0",
+    "babel-preset-es2015": "^6.0.15",
+    "babel-preset-react": "^6.0.15",
+    "babel-preset-stage-0": "^6.0.15",
     "react": "^15.3.2",
-    "react-addons-css-transition-group": "^15.3.2",
-    "react-document-title": "^2.0.2",
     "react-dom": "^15.3.2",
     "react-ga": "^2.1.2",
+    "react-redux": "^5.0.1",
     "react-router": "^3.0.0",
-    "sircus": "^3.0.0",
+    "react-router-redux": "^4.0.7",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0",
     "wpapi": "^1.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.0.20",
     "babel-loader": "^6.0.1",
-    "babel-preset-es2015": "^6.0.15",
-    "babel-preset-react": "^6.0.15",
-    "babel-preset-stage-0": "^6.0.15",
     "browser-sync": "^2.18.2",
     "bs-html-injector": "^3.0.3",
     "chokidar": "^1.6.1",
     "copy": "^0.3.0",
     "del": "^2.2.2",
     "json-loader": "^0.5.4",
     "react-hot-loader": "^3.0.0-beta.6",
+    "redux-devtools": "^3.3.1",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.1.1",
     "standard": "^8.3.0",
     "standard-loader": "^5.0.0",
     "webpack": "^1.13.3",

src/client/Routes.js

@@ -1,32 +1,28 @@
 import React from 'react'
-import { Router, Route, IndexRoute, browserHistory } from 'react-router'
+import { Router, Route, IndexRoute } from 'react-router'
 import ReactGA from 'react-ga'
-
-import Defalult from './container/Default'
-import About from './pages/About'
-import Page from './pages/Pages'
-import Frontpage from './pages/Frontpage'
-import Posts from './pages/Posts'
-import PostsDetail from './pages/PostsDetail'
-import NoMatch from './pages/NoMatch'
+import Root from './containers/Root'
+import Frontpage from './containers/Frontpage'
+import Archive from './containers/Archive'
+import Single from './containers/Single'
+import Page from './containers/Page'
+import NoMatch from './containers/NoMatch'
 
 ReactGA.initialize('UA-000000-01')
 
 function logPageView () {
-  console.log(`logPageView: ${window.location.pathname}`)
   ReactGA.set({ page: window.location.pathname })
   ReactGA.pageview(window.location.pathname)
 }
 
-const Routes = () => {
+const Routes = ({ history }) => {
   return (
-    <Router history={browserHistory} onUpdate={logPageView} key={Math.random()}>
-      <Route path='/' component={Defalult}>
+    <Router history={history} onUpdate={logPageView} key={Math.random()}>
+      <Route path='/' component={Root}>
         <IndexRoute component={Frontpage} />
-        <Route path='about' component={About} />
         <Route path='sample-page' component={Page} />
-        <Route path='archives' component={Posts} />
-        <Route path='archives/:id' component={PostsDetail} />
+        <Route path='archives' component={Archive} />
+        <Route path='archives/:id' component={Single} />
         <Route path='*' component={NoMatch} />
       </Route>
     </Router>

src/client/actions/index.js

@@ -0,0 +1,94 @@
+import Wpapi from 'wpapi'
+import { GET_FRONTPAGE, GET_ARCHIVES, GET_PAGE, GET_SINGLE, WP_API, WP_POSTS_PER_PAGE, WP_PAGE_ON_FRONT } from '../constants'
+
+const wp = new Wpapi({ endpoint: WP_API })
+
+/*
+ * frontpage
+ */
+export const getFrontpage = (loading) => {
+  return function (dispatch) {
+    dispatch(receivePost(GET_FRONTPAGE, '', '', '', loading = true))
+    if (WP_PAGE_ON_FRONT !== '0') {
+      wp.pages().id(WP_PAGE_ON_FRONT).embed().then((res) => {
+        dispatch(receivePost(GET_FRONTPAGE, res.id, res.title.rendered, res.content.rendered, loading = false))
+      }).catch((err) => {
+        console.log(err)
+      })
+    } else {
+      const notFrontpage = {
+        id: '',
+        title: 'Frontpage',
+        content: 'No static Frontpage is selected.'
+      }
+      dispatch(receivePost(GET_FRONTPAGE, notFrontpage.id, notFrontpage.title, notFrontpage.content, loading = false))
+    }
+  }
+}
+
+/*
+ * page
+ */
+export const getPage = (route, loading) => {
+  return function (dispatch) {
+    dispatch(receivePost(GET_PAGE, '', '', '', loading = true))
+    return wp.pages().slug(route.path).embed().then((res) => {
+      dispatch(receivePost(GET_PAGE, res[0].id, res[0].title.rendered, res[0].content.rendered, loading = false))
+    }).catch((err) => {
+      console.log(err)
+    })
+  }
+}
+
+/*
+ * single
+ */
+export const getSingle = (params, loading) => {
+  return function (dispatch) {
+    dispatch(receivePost(GET_SINGLE, '', '', '', loading = true))
+    return wp.posts().id(params.id).embed().then((res) => {
+      dispatch(receivePost(GET_SINGLE, res.id, res.title.rendered, res.content.rendered, loading = false))
+    }).catch((err) => {
+      console.log(err)
+    })
+  }
+}
+
+function receivePost (type, id, title, content, loading) {
+  return {
+    type: type,
+    payload: {
+      id: id,
+      title: title,
+      content: content,
+      loading: loading
+    }
+  }
+}
+
+/*
+ * archive
+ */
+export const getArchive = (loading, pageNum = 1, totalPages, posts) => {
+  return function (dispatch) {
+    dispatch(receiveArchive(loading = true, pageNum, totalPages, posts))
+    return wp.posts().page(pageNum).perPage(WP_POSTS_PER_PAGE).embed().then((res) => {
+      const totalPages = res._paging.totalPages
+      dispatch(receiveArchive(loading = false, pageNum, totalPages, res))
+    }).catch((err) => {
+      console.log(err)
+    })
+  }
+}
+
+function receiveArchive (loading, pageNum, totalPages, posts) {
+  return {
+    type: GET_ARCHIVES,
+    payload: {
+      pageNum: pageNum,
+      totalPages: totalPages,
+      posts: posts,
+      loading: loading
+    }
+  }
+}

src/client/components/DevTools.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+export default createDevTools(
+  <DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q'>
+    <LogMonitor theme='tomorrow' preserveScrollTop={false} />
+  </DockMonitor>
+)

src/client/components/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const Footer = (props) => {
+const Footer = () => {
   return (
     <footer />
   )

src/client/components/Header.js

@@ -1,24 +1,21 @@
 import React from 'react'
 import { Link } from 'react-router'
-import { WP_PARAMS } from '../constants'
+import { WP_SITE_TITLE } from '../constants'
 
-const Header = (props) => {
+const Header = () => {
   return (
     <header>
       <h1>
-        <Link to='/'>{WP_PARAMS.SITE_TITLE}</Link>
+        <Link to='/'>{WP_SITE_TITLE}</Link>
       </h1>
-      <nav id='primary'>
+      <nav>
         <ul className='ListInline'>
           <li>
             <Link to='/archives'>Posts</Link>
           </li>
           <li>
             <Link to='/sample-page'>Sample page</Link>
           </li>
-          <li>
-            <Link to='/about'>About</Link>
-          </li>
         </ul>
       </nav>
     </header>

src/client/components/Loader.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Loader = () => {
+  return (
+    <div>
+      Loading...
+    </div>
+  )
+}
+
+export default Loader

src/client/components/Post.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Post = ({ id, title, content }) => {
+  return (
+    <article key={id}>
+      <h2>{title}</h2>
+      <div dangerouslySetInnerHTML={{__html: content}} />
+    </article>
+  )
+}
+
+export default Post

src/client/components/PostsList.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+const PostsList = ({ id, title, date }) => {
+  const url = `archives/${id}`
+  return (
+    <Link to={url} key={id}>
+      <h2>{title.rendered}</h2>
+      <p>{date}</p>
+    </Link>
+  )
+}
+
+export default PostsList

src/client/constants/index.js

@@ -1 +1,13 @@
-export const WP_PARAMS = global.WP_PARAMETERS
+const WP_PARAMS = global.WP_PARAMETERS
+
+export const WP_URL = WP_PARAMS.API
+export const WP_SITE_TITLE = WP_PARAMS.SITE_TITLE
+export const WP_SITE_DESCRIPTION = WP_PARAMS.SITE_DESCRIPTION
+export const WP_API = WP_PARAMS.API
+export const WP_PAGE_ON_FRONT = WP_PARAMS.PAGE_ON_FRONT
+export const WP_POSTS_PER_PAGE = WP_PARAMS.POSTS_PER_PAGE
+
+export const GET_FRONTPAGE = 'GET_FRONTPAGE'
+export const GET_PAGE = 'GET_PAGE'
+export const GET_ARCHIVES = 'GET_ARCHIVES'
+export const GET_SINGLE = 'GET_SINGLE'

src/client/containers/Archive.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { getArchive } from '../actions'
+import { WP_SITE_TITLE } from '../constants'
+import PostsList from '../components/PostsList'
+import Loader from '../components/Loader'
+
+class Archive extends Component {
+  componentWillMount () {
+    const {
+      getArchive,
+      pageNum = 1,
+      loading = true,
+      totalPages,
+      posts
+    } = this.props
+
+    getArchive(loading, pageNum, totalPages, posts)
+  }
+
+  render () {
+    const { posts, loading } = this.props
+    let list = posts.map((post) => {
+      return (
+        <PostsList key={post.id} {...post} />
+      )
+    })
+
+    document.title = 'Archive | ' + WP_SITE_TITLE
+
+    return (
+      <div>
+        {loading ? <Loader /> : list}
+      </div>
+    )
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    posts: state.archive.posts,
+    pageNum: state.archive.pageNum,
+    totalPages: state.archive.totalPages,
+    loading: state.archive.loading
+  }
+}
+
+export default connect(mapStateToProps, {getArchive})(Archive)