Let there be light

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["es2015", "stage-2", "react"],
+    "plugins": ["transform-object-rest-spread"]
+}

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+
+  "plugins": [
+    "react",
+    "better",
+    "fp",
+    "import",
+    "promise",
+    "standard"
+  ],
+
+  "extends": ["standard-pure-fp", "standard-react"],
+
+  "rules": {
+    // Allow dangling commas for better clarity in diffs
+    "comma-dangle": [2, "always-multiline"],
+
+    // ES6 Rules
+    "arrow-parens": [2, "as-needed"],
+    "prefer-arrow-callback": 2,
+
+    // Relax fp rules for library internals & more common react code in example
+    "better/explicit-return": 0,
+    "better/no-ifs": 0,
+    "fp/no-rest-parameters": 0,
+    "better/no-new": 0,
+    "fp/no-throw": 0,
+    "fp/no-let": 0,
+    "fp/no-this": 0,
+    "fp/no-class": 0,
+    "fp/no-mutation": 0,
+    "fp/no-nil": 0,
+    "fp/no-unused-expression": 0,
+    "fp/no-mutating-methods": [2, { "allowedObjects": ["_", "fp", "R"] }],
+
+    // Extra React rules not provided by standard-react
+    "react/react-in-jsx-scope": 2,
+    "jsx-quotes": [2, "prefer-single"],
+    // Disable propTypes validation
+    "react/prop-types": 0
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+npm-debug.log
+node_modules
+lib
+es
+temp
+dist
+_book

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Josh Burgess
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,5 @@
+##### redux-most
+
+[Most.js](https://github.com/cujojs/most) based middleware for Redux.
+
+Handle async actions with monadic streams & reactive programming.

examples/navigation-react-redux/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/navigation-react-redux/ActionTypes.js

@@ -0,0 +1,9 @@
+export const SEARCHED_USERS = 'SEARCHED_USERS'
+export const RECEIVED_USERS = 'RECEIVED_USERS'
+export const CLEARED_SEARCH_RESULTS = 'CLEARED_SEARCH_RESULTS'
+
+export const REQUESTED_USER_REPOS = 'REQUESTED_USER_REPOS'
+export const RECEIVED_USER_REPOS = 'RECEIVED_USER_REPOS'
+
+export const CHECKED_ADMIN_ACCESS = 'CHECKED_ADMIN_ACCESS'
+export const ACCESS_DENIED = 'ACCESS_DENIED'

examples/navigation-react-redux/README.md

@@ -0,0 +1,6 @@
+#### Instructions
+```
+npm install
+npm run start
+```
+Then, open your browser and navigate to localhost:3000

examples/navigation-react-redux/actions/index.js

@@ -0,0 +1,42 @@
+import * as ActionTypes from '../ActionTypes'
+
+export const searchUsers = query => ({
+  type: ActionTypes.SEARCHED_USERS,
+  payload: {
+    query,
+  },
+})
+
+export const receiveUsers = users => ({
+  type: ActionTypes.RECEIVED_USERS,
+  payload: {
+    users,
+  },
+})
+
+export const clearSearchResults = _ => ({
+  type: ActionTypes.CLEARED_SEARCH_RESULTS,
+})
+
+export const requestReposByUser = user => ({
+  type: ActionTypes.REQUESTED_USER_REPOS,
+  payload: {
+    user,
+  },
+})
+
+export const receiveUserRepos = (user, repos) => ({
+  type: ActionTypes.RECEIVED_USER_REPOS,
+  payload: {
+    user,
+    repos,
+  },
+})
+
+export const checkAdminAccess = _ => ({
+  type: ActionTypes.CHECKED_ADMIN_ACCESS,
+})
+
+export const accessDenied = _ => ({
+  type: ActionTypes.ACCESS_DENIED,
+})

examples/navigation-react-redux/components/Repos.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const Repos = ({ repos, user }) =>
+  <ul>
+    {
+      repos.length
+      ? repos.map(repo =>
+        <li key={repo.id}>
+          <a
+            href={repo.html_url}
+            target='__blank'
+          >
+            {repo.full_name}
+          </a>
+        </li>)
+      : <p>{user} has no repos</p>
+    }
+  </ul>
+
+export default Repos

examples/navigation-react-redux/components/UserSearchInput.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const UserSearchInput = ({ value, defaultValue, onChange }) => {
+  const handleOnChange = evt => onChange(evt.target.value)
+  return (
+    <input
+      type='text'
+      placeholder='Search for a GH user'
+      defaultValue={defaultValue}
+      onChange={handleOnChange}
+    />
+  )
+}
+
+export default UserSearchInput

examples/navigation-react-redux/components/UserSearchResults.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link } from 'react-router'
+
+const UserSearchResults = ({ results, loading }) =>
+  <ul style={{
+    opacity: loading ? 0.3 : 1,
+  }}>
+    {results.map(result => (
+      <li key={result.id}>
+        <Link to={`/repos/${result.login}`}>
+          {result.login}
+        </Link>
+      </li>
+    ))}
+  </ul>
+
+export default UserSearchResults

examples/navigation-react-redux/configureStore.js

@@ -0,0 +1,22 @@
+import { createStore, applyMiddleware, compose } from 'redux'
+import { createEpicMiddleware } from 'redux-most'
+import { browserHistory } from 'react-router'
+import { routerMiddleware } from 'react-router-redux'
+import rootReducer from './reducers'
+import rootEpic from './epics'
+
+const epicMiddleware = createEpicMiddleware(rootEpic)
+
+const configureStore = _ =>
+  createStore(
+    rootReducer,
+    compose(
+      applyMiddleware(
+        epicMiddleware,
+        routerMiddleware(browserHistory)
+      ),
+      window.devToolsExtension ? window.devToolsExtension() : f => f
+    )
+  )
+
+export default configureStore

examples/navigation-react-redux/containers/Admin.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { checkAdminAccess } from '../actions'
+
+class Admin extends React.Component {
+  componentDidMount () {
+    this.props.checkAdminAccess()
+  }
+
+  render () {
+    if (!this.props.adminAccess) {
+      return (
+        <p>Checking access...</p>
+      )
+    }
+    if (this.props.adminAccess === 'GRANTED') {
+      return (
+        <p>Access granted</p>
+      )
+    }
+    return (
+      <p>
+        Access denied. Redirecting back home.
+      </p>
+    )
+  }
+}
+
+export default connect(
+  ({ adminAccess }) => ({ adminAccess }),
+  { checkAdminAccess }
+)(Admin)

examples/navigation-react-redux/containers/App.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const App = ({ children }) =>
+  <div>
+    {children}
+  </div>
+
+export default App

examples/navigation-react-redux/containers/ReposByUser.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import Repos from '../components/Repos'
+import { requestReposByUser } from '../actions'
+
+class ReposByUser extends React.Component {
+  componentDidMount () {
+    this.props.requestReposByUser(this.props.params.user)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { user } = this.props.params
+    if (user !== nextProps.params.user) {
+      this.props.requestReposByUser(user)
+    }
+  }
+
+  render () {
+    const {
+      reposByUser,
+      user,
+    } = this.props
+    if (!reposByUser[user]) {
+      return (
+        <p>Loading</p>
+      )
+    }
+    return (
+      <Repos
+        repos={reposByUser[user]}
+        user={user}
+      />
+    )
+  }
+}
+
+export default connect(
+  ({ reposByUser }, ownProps) => ({
+    reposByUser,
+    user: ownProps.params.user,
+  }),
+  { requestReposByUser }
+)(ReposByUser)

examples/navigation-react-redux/containers/UserSearch.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+import UserSearchInput from '../components/UserSearchInput'
+import UserSearchResults from '../components/UserSearchResults'
+import { searchUsers } from '../actions'
+
+class UserSearch extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handleUserSearch = this.handleUserSearch.bind(this)
+  }
+
+  componentDidMount () {
+    this.handleUserSearch(this.props.query)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.props.query !== nextProps.query) {
+      this.handleUserSearch(nextProps.query)
+    }
+  }
+
+  handleUserSearch (query) {
+    this.props.searchUsers(query)
+  }
+
+  render () {
+    const {
+      query,
+      results,
+      searchInFlight,
+    } = this.props
+    return (
+      <div>
+        <Link
+          to='/admin'
+          style={{
+            display: 'block',
+            marginBottom: 10,
+          }}>
+          Admin Panel
+        </Link>
+        <UserSearchInput
+          defaultValue={query}
+          onChange={this.handleUserSearch}
+        />
+        <UserSearchResults
+          results={results}
+          loading={searchInFlight}
+        />
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ routing, userResults, searchInFlight }) => ({
+    query: routing.locationBeforeTransitions.query.q,
+    results: userResults,
+    searchInFlight,
+  }),
+  { searchUsers }
+)(UserSearch)