add redux structure

Author: ianwang

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "env",
+    "next/babel"
+  ],
+  "plugins": [
+    ["module-resolver", {
+      "root": ["./src"]
+    }]
+  ]
+}

package.json

@@ -1,11 +1,22 @@
 {
   "dependencies": {
+    "axios": "^0.17.1",
+    "babel-plugin-module-resolver": "^3.0.0",
+    "babel-preset-env": "^1.6.1",
     "compression": "^1.7.1",
     "express": "^4.16.2",
-    "next": "^4.1.2",
+    "humps": "^2.0.1",
+    "immutable": "^3.8.2",
+    "next": "4.2.0",
+    "next-redux-wrapper": "^1.3.5",
     "next-routes": "^1.1.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "prop-type": "^0.0.1",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
   },
   "name": "nextjs-real-world",
   "version": "1.0.0",

pages/index.js

@@ -1,20 +1,4 @@
-import { Link } from '../routes'
+import withReduxStore from 'store/createStore'
+import SearchRepoContainer from 'containers/SearchRepoContainer'
 
-export default () => (
-  <div className='hello'>
-    next.js real world
-    <div>
-      <Link route='/about'>About</Link>
-    </div>
-    <style jsx>{`
-      .hello {
-        font: 20px Helvetica, Arial, sans-serif;
-        background: #f8f8f8;
-        color: #b0b0b0;
-        padding: 2em;
-        height: 100vh;
-        text-align: center;
-      }
-    `}</style>
-  </div>
-)
+export default withReduxStore(SearchRepoContainer)

routes.js

@@ -1,4 +1,12 @@
 const nextRoutes = require('next-routes')
 const routes = module.exports = nextRoutes()
 
-routes.add('about', '/about')
+const APP_ROUTES = [{
+  page: 'index',
+  pattern: '/'
+}, {
+  page: 'about',
+  pattern: '/about'
+}]
+
+APP_ROUTES.forEach(route => routes.add(route))

src/actions/repos.js

@@ -0,0 +1,26 @@
+
+import github from 'libs/github'
+
+export const GET_TOP_REPOS = Symbol('GET_TOP_REPOS')
+export const GET_TOP_REPOS_SUCCESS = Symbol('GET_TOP_REPOS_SUCCESS')
+
+export function getTopRepos({ lang }) {
+  return dispatch => {
+
+    dispatch({
+      type: GET_TOP_REPOS
+    })
+
+    return github.getTopRepos({ lang }).then(res => {
+       dispatch(onGetTopRepo(lang, res))
+    })
+  }
+}
+
+function onGetTopRepo(lang, payload) {
+  return {
+    type: GET_TOP_REPOS_SUCCESS,
+    lang,
+    payload
+  }
+}

src/components/SeachResults.js

@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+
+const REPO_COUNT = 10
+const SearchResults = ({ repos }) => {
+  return (
+    <Fragment>
+      <h2>Top { REPO_COUNT } { repos.get('lang') } repos</h2>
+      <small>{ repos.get('totalCount').toLocaleString() } found</small>
+      <ul>
+        {
+          repos.get('items').take(REPO_COUNT).map(item => (
+            <li key={item.get('id')}>
+              <a href={item.get('url')} target='_blank'>
+                { item.get('name') }
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </Fragment>
+  )
+}
+
+SearchResults.propTypes = {
+  repos: PropTypes.instanceOf(Map).isRequired,
+}
+
+export default SearchResults

src/config.js

@@ -0,0 +1,5 @@
+export default {
+  env: process.env.NODE_ENV,
+  mode: process.env.MODE,
+  githubApiEndpoint: process.env.GITHUB_API_ENDPOINT,
+}

src/containers/SearchRepoContainer.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Map } from 'immutable'
+import { connect } from 'react-redux'
+
+import config from 'config'
+import { getTopRepos } from 'actions/repos'
+import SearchResults from 'components/SeachResults'
+
+class SearchRepoContainer extends Component {
+
+  static async getInitialProps ({ store, query }) {
+
+    let lang = query.lang || 'javascript'
+    await store.dispatch(getTopRepos({ lang }))
+  }
+
+  componentDidMount() {
+    let { getTopRepos } = this.props
+    getTopRepos({ lang: 'ruby' })
+  }
+
+  render() {
+    let { repos } = this.props
+    return (
+      <SearchResults repos={repos} />
+    )
+  }
+
+}
+
+function mapStateToProps (state) {
+  return {
+    repos: state.repos
+  }
+}
+
+SearchRepoContainer.propTypes = {
+  repos: PropTypes.instanceOf(Map).isRequired,
+  getTopRepos: PropTypes.func.isRequired
+}
+
+export { SearchRepoContainer }
+export default connect(mapStateToProps, {
+  getTopRepos
+})(SearchRepoContainer)

src/libs/github.js

@@ -0,0 +1,15 @@
+import axios from 'axios'
+import humps from 'humps'
+
+const ENDPOINT = 'https://api.github.com'
+
+const github = {
+  getTopRepos({ lang = 'javascript' }) {
+    let path = `${ENDPOINT}/search/repositories?q=language:${lang}&sort=stars&order=desc`
+    return axios.get(path).then(res => {
+      return humps.camelizeKeys(res.data)
+    })
+  }
+}
+
+export default github

src/reducers/index.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux'
+
+import repos from './repos'
+
+export default combineReducers({
+  repos
+})

src/reducers/repos.js

@@ -0,0 +1,26 @@
+import Immutable from 'immutable'
+import * as ActionType from 'actions/repos'
+
+export const initialState = Immutable.fromJS({
+  isLoading: false,
+  lang: ''
+})
+
+export default function(state = initialState, action) {
+  switch (action.type) {
+
+    case ActionType.GET_TOP_REPOS:
+      return state.set('isLoading', true)
+
+    case ActionType.GET_TOP_REPOS_SUCCESS:
+      return state.merge(
+        Object.assign({}, action.payload, {
+          isLoading: false,
+          lang: action.lang
+        })
+      )
+
+    default:
+      return state
+  }
+}

src/store/createStore.js

@@ -0,0 +1,60 @@
+import Immutable from 'immutable'
+import thunkMiddleware from 'redux-thunk'
+import { createLogger } from 'redux-logger'
+import withRedux from 'next-redux-wrapper'
+import { createStore, applyMiddleware, compose } from 'redux'
+
+import config from 'config'
+import rootReducer from '../reducers'
+
+function createMiddlewares({ isServer }) {
+
+  let middlewares = [
+    thunkMiddleware,
+  ]
+
+  if(config.env === 'development' && typeof window !== 'undefined') {
+    middlewares.push(createLogger({
+      level: 'info',
+      collapsed: true,
+      stateTransformer: (state) => {
+        let newState = {}
+
+        for (let i of Object.keys(state)) {
+          if (Immutable.Iterable.isIterable(state[i])) {
+            newState[i] = state[i].toJS()
+          } else {
+            newState[i] = state[i]
+          }
+        }
+
+        return newState
+      }
+    }))
+  }
+
+  return middlewares
+}
+
+function immutableChildren(obj) {
+  let state = {}
+  Object.keys(obj).map((key) => {
+    state[key] = Immutable.fromJS(obj[key])
+  })
+  return state
+}
+
+export const initStore = (initialState = {}, context) => {
+
+  let { isServer } = context
+  let middlewares = createMiddlewares({ isServer })
+  let state = immutableChildren(initialState)
+
+  return createStore(
+    rootReducer,
+    state,
+    compose(applyMiddleware(...middlewares))
+  )
+}
+
+export default (comp) => withRedux(initStore)(comp)