Adds a react-js client with a create-react-app demo! (#97)

infinitered · Aug 9, 2016 · e43cb65 · e43cb65
1 parent 550f2f7
commit e43cb65
Show file tree

Hide file tree

Showing 26 changed files with 878 additions and 0 deletions.
diff --git a/packages/demo-react-js/.gitignore b/packages/demo-react-js/.gitignore
@@ -0,0 +1,11 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log
diff --git a/packages/demo-react-js/README.md b/packages/demo-react-js/README.md
diff --git a/packages/demo-react-js/copy-internal-deps.sh b/packages/demo-react-js/copy-internal-deps.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+cp ../reactotron-react-js/dist/index.js node_modules/reactotron-react-js/index.js
+cp ../reactotron-core-client/dist/*.js node_modules/reactotron-core-client/
+cp ../reactotron-redux/dist/*.js node_modules/reactotron-redux/
+cp ../reactotron-apisauce/dist/*.js node_modules/reactotron-apisauce/
diff --git a/packages/demo-react-js/favicon.ico b/packages/demo-react-js/favicon.ico
diff --git a/packages/demo-react-js/index.html b/packages/demo-react-js/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/packages/demo-react-js/package.json b/packages/demo-react-js/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "demo-react-js",
+  "version": "0.0.1",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.2.1"
+  },
+  "dependencies": {
+    "apisauce": "^0.3.0",
+    "ramda": "^0.22.1",
+    "ramdasauce": "^1.1.0",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
+    "redux-saga": "^0.11.0",
+    "socket.io": "^1.4.8",
+    "reactotron-core-client": "^0.90.1",
+    "reactotron-react-js": "^0.90.1",
+    "reactotron-apisauce": "^0.90.1",
+    "reactotron-redux": "^0.90.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject",
+    "copy-internal-deps": "./copy-internal-deps.sh"
+  },
+  "eslintConfig": {
+    "extends": "./node_modules/react-scripts/config/eslint.js"
+  }
+}
diff --git a/packages/demo-react-js/src/App.css b/packages/demo-react-js/src/App.css
@@ -0,0 +1,29 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-logo-fast {
+  animation: App-logo-spin infinite 1s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/packages/demo-react-js/src/App.js b/packages/demo-react-js/src/App.js
@@ -0,0 +1,76 @@
+import React, { Component, PropTypes } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { connect } from 'react-redux'
+import { Actions } from './Redux/Startup.redux'
+
+class App extends Component {
+
+  static propTypes = {
+    startup: PropTypes.func.isRequired,
+    message: PropTypes.string,
+    url: PropTypes.string,
+    name: PropTypes.string,
+    sha: PropTypes.string,
+    error: PropTypes.string,
+    fetching: PropTypes.bool
+  }
+
+  componentWillMount () {
+    this.props.startup()
+  }
+
+  renderError () {
+    const { error } = this.props
+    return (
+      <div>
+        <h3 className='App-error-title'>Big Ol Error</h3>
+        <p className='App-error'>
+          { error }
+        </p>
+      </div>
+    )
+  }
+
+  renderMessage () {
+    const { fetching, name, url, message, sha } = this.props
+    if (fetching) {
+      return (<p className='App-message'>Hang tight</p>)
+    }
+
+    return (
+      <div>
+        <p className='App-message'><b>{name}</b></p>
+        <p className='App-message'>
+          <a href={url}>{message}</a>
+        </p>
+        <p className='App-sha'>{sha}</p>
+      </div>
+    )
+  }
+
+  render () {
+    const { error, fetching } = this.props
+    const logoClass = fetching ? 'App-logo-fast' : 'App-logo'
+
+    return (
+      <div className="App">
+        <div className="App-header">
+          <img src={logo} className={logoClass} alt="logo" />
+          <h2>Reactotron Demo</h2>
+        </div>
+        <h3 className='App-message-title'>Latest Commit Message</h3>
+
+        { error ? this.renderError() : this.renderMessage() }
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => state.repoMessage
+
+const mapDispatchToProps = dispatch => ({
+  startup: () => dispatch(Actions.startup())
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/packages/demo-react-js/src/ReactotronConfig.js b/packages/demo-react-js/src/ReactotronConfig.js
@@ -0,0 +1,11 @@
+import Reactotron from 'reactotron-react-js'
+import tronsauce from 'reactotron-apisauce'
+
+Reactotron
+.configure({
+  name: 'Demo Time!'
+})
+.use(tronsauce())
+.connect()
+
+console.tron = Reactotron
diff --git a/packages/demo-react-js/src/Redux/RepoMessage.redux.js b/packages/demo-react-js/src/Redux/RepoMessage.redux.js
@@ -0,0 +1,47 @@
+export const Types = {
+  Request: 'RepoMessage.Request',
+  Receive: 'RepoMessage.Receive',
+  Failure: 'RepoMessage.Failure'
+}
+
+export const Actions = {
+  request: () => ({ type: Types.Request }),
+  receive: (message, url, name, sha) => ({ type: Types.Receive, message, url, name, sha }),
+  failure: (error) => ({ type: Types.Failure, error })
+}
+
+export const INITIAL_STATE = {
+  message: null,
+  url: null,
+  name: null,
+  sha: null,
+  fetching: false,
+  error: null
+}
+
+// we're going out for the repo message
+const request = (state, action) =>
+  ({ ...INITIAL_STATE, fetching: true })
+
+// we've got a repo message
+const receive = (state, action) => {
+  const { message, url, name, sha } = action
+  return { ...state, fetching: false, message, url, name, sha }
+}
+
+// we failed to get the repo message :(
+const failure = (state, action) =>
+  ({ ...state, fetching: false, error: action.error })
+
+// actions ->
+const reducerMap = {
+  [Types.Request]: request,
+  [Types.Receive]: receive,
+  [Types.Failure]: failure
+}
+
+// our reducer
+export const reducer = (state = INITIAL_STATE, action) => {
+  const handler = reducerMap[action.type]
+  return typeof handler === 'function' ? handler(state, action) : state
+}
diff --git a/packages/demo-react-js/src/Redux/RootReducer.js b/packages/demo-react-js/src/Redux/RootReducer.js
@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import { reducer as repoMessageReducer } from './RepoMessage.redux'
+
+export default combineReducers({
+  repoMessage: repoMessageReducer
+})
diff --git a/packages/demo-react-js/src/Redux/Startup.redux.js b/packages/demo-react-js/src/Redux/Startup.redux.js
@@ -0,0 +1,7 @@
+export const Types = {
+  Startup: 'Startup'
+}
+
+export const Actions = {
+  startup: () => ({ type: Types.Startup })
+}
diff --git a/packages/demo-react-js/src/Redux/Store.js b/packages/demo-react-js/src/Redux/Store.js
@@ -0,0 +1,34 @@
+import R from 'ramda'
+import {createStore, applyMiddleware, compose} from 'redux'
+import createLogger from 'redux-logger'
+import createSagaMiddleware from 'redux-saga'
+import rootReducer from './RootReducer'
+import rootSaga from '../Sagas'
+import Reactotron from 'reactotron-react-js'
+import createTrackingEnhancer from 'reactotron-redux'
+
+// the logger master switch
+const USE_LOGGING = true
+
+// silence these saga-based messages
+const SAGA_LOGGING_BLACKLIST = ['EFFECT_TRIGGERED', 'EFFECT_RESOLVED', 'EFFECT_REJECTED']
+
+// create the logger
+const logger = createLogger({
+  predicate: (getState, { type }) => USE_LOGGING && R.not(R.contains(type, SAGA_LOGGING_BLACKLIST))
+})
+
+// a function which can create our store and auto-persist the data
+export default () => {
+  const sagaMiddleware = createSagaMiddleware()
+  const tracker = createTrackingEnhancer(Reactotron, {
+  })
+  const enhancers = compose(
+    tracker,
+    applyMiddleware(logger, sagaMiddleware)
+  )
+
+  const store = createStore(rootReducer, enhancers)
+  sagaMiddleware.run(rootSaga)
+  return store
+}
diff --git a/packages/demo-react-js/src/Sagas/RepoMessage.sagas.js b/packages/demo-react-js/src/Sagas/RepoMessage.sagas.js
@@ -0,0 +1,19 @@
+import RS from 'ramdasauce'
+import { call, put } from 'redux-saga/effects'
+import * as RepoMessage from '../Redux/RepoMessage.redux'
+
+export function * request (api, action) {
+  // make the call to github
+  const { ok, data, status, problem } = yield call(api.get, '/repos/reactotron/reactotron/commits')
+  // are we good?
+  if (ok) {
+    const commit = RS.dotPath('0.commit', data)
+    const { message, url, author, tree } = commit
+    const { name } = author
+    const { sha } = tree
+    // record the last commit's message
+    yield put(RepoMessage.Actions.receive(message, url, name, sha))
+  } else {
+    yield put(RepoMessage.Actions.failure(`uh oh: ${problem} status: ${status}`))
+  }
+}
diff --git a/packages/demo-react-js/src/Sagas/Startup.sagas.js b/packages/demo-react-js/src/Sagas/Startup.sagas.js
@@ -0,0 +1,7 @@
+import { put } from 'redux-saga/effects'
+import * as RepoMessage from '../Redux/RepoMessage.redux'
+
+// process STARTUP actions
+export function * startup () {
+  yield put(RepoMessage.Actions.request())
+}
diff --git a/packages/demo-react-js/src/Sagas/index.js b/packages/demo-react-js/src/Sagas/index.js
@@ -0,0 +1,25 @@
+import { takeEvery, takeLatest } from 'redux-saga'
+import ApiSauce from 'apisauce'
+import Reactotron from 'reactotron-react-js'
+
+import * as Startup from '../Redux/Startup.redux'
+import * as RepoMessage from '../Redux/RepoMessage.redux'
+
+import { startup } from './Startup.sagas'
+import { request as requestRepoMessage } from './RepoMessage.sagas'
+
+const api = ApiSauce.create({
+  baseURL: 'https://api.github.com',
+  headers: {
+    'Accept': 'application/vnd.github.v3+json'
+  }
+})
+
+api.addMonitor(Reactotron.apisauce)
+
+export default function * rootSaga () {
+  yield [
+    takeLatest(RepoMessage.Types.Request, requestRepoMessage, api),
+    takeEvery(Startup.Types.Startup, startup)
+  ]
+}
diff --git a/packages/demo-react-js/src/index.css b/packages/demo-react-js/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/packages/demo-react-js/src/index.js b/packages/demo-react-js/src/index.js
@@ -0,0 +1,16 @@
+import './ReactotronConfig' // we put this guy first
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+import { Provider } from 'react-redux'
+import createStore from './Redux/Store'
+
+const store = createStore()
+
+ReactDOM.render(
+  <Provider store={store}><App /></Provider>,
+  document.getElementById('root')
+);
diff --git a/packages/demo-react-js/src/logo.svg b/packages/demo-react-js/src/logo.svg
diff --git a/packages/reactotron-react-js/.babelrc b/packages/reactotron-react-js/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": [ "es2015-rollup", "stage-1" ]
+}
diff --git a/packages/reactotron-react-js/.gitignore b/packages/reactotron-react-js/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+coverage
+.nyc_output
+dist