Refactor/state management (temando#109)

Remove redux, upgrade react-router to V4. Closes temando#95.

Author: nfour

package.json

@@ -37,17 +37,15 @@
     "lodash": "^4.17.4",
     "markdown-it": "^8.3.1",
     "prop-types": "^15.5.8",
+    "qs": "^6.4.0",
     "react": "^15.5.4",
     "react-addons-create-fragment": "^15.5.4",
     "react-document-title": "^2.0.2",
     "react-dom": "^15.5.4",
-    "react-json-view": "^1.8.2",
-    "react-redux": "^5.0.3",
-    "react-router": "3.0.0",
-    "react-router-redux": "^4.0.8",
+    "react-json-view": "^1.8.4",
+    "react-router": "^4.1.1",
+    "react-router-dom": "^4.1.1",
     "react-scrollable-anchor": "^0.4.2",
-    "redux": "^3.6.0",
-    "redux-thunk": "^2.2.0",
     "superagent": "^3.5.2"
   },
   "devDependencies": {
@@ -61,11 +59,11 @@
     "babel-preset-stage-1": "^6.22.0",
     "balloon-css": "^0.4.0",
     "css-loader": "^0.28.4",
-    "eslint": "^3.19.0",
+    "eslint": "^4.0.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-config-standard-react": "^5.0.0",
     "eslint-plugin-import": "^2.3.0",
-    "eslint-plugin-node": "^4.2.2",
+    "eslint-plugin-node": "^5.0.0",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.0.1",
     "eslint-plugin-standard": "^3.0.1",

src/components/Example/Example.js

@@ -58,7 +58,8 @@ export default class Example extends Component {
             displayObjectSize={false}
             collapsed={this.state.collapseAll}
             enableClipboard={false}
-        />}
+          />
+        }
       </div>
     )
   }

src/containers/Base.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { configureAnchors } from 'react-scrollable-anchor'
+import DocumentTitle from 'react-document-title'
+import PropTypes from 'prop-types'
+import { parse as parseQuery } from 'qs'
+
+import Page from '../components/Page/Page'
+import { getDefinition, parseDefinition } from '../lib/definitions'
+import '../general.scss'
+
+export default class Base extends Component {
+  state = {
+    parserType: 'open-api-v3',
+    definitionUrl: null,
+    definition: null,
+    parsedDefinition: null
+  }
+
+  setDefinition = async ({ definitionUrl, parserType = this.state.parserType }) => {
+    const definition = await getDefinition(definitionUrl)
+    const parsedDefinition = await parseDefinition(definition, parserType)
+
+    this.setState({ definitionUrl, definition, parsedDefinition, parserType })
+  }
+
+  async componentDidMount () {
+    const { location } = this.props
+    const { parserType } = this.state
+
+    const definitionUrl = parseQuery(location.search.split('?')[1]).url
+
+    await this.setDefinition({ definitionUrl, parserType })
+
+    configureAnchors({ offset: -10, scrollDuration: 100 })
+  }
+
+  render () {
+    const { parsedDefinition: definition, definitionUrl } = this.state
+    const { location } = this.props
+
+    // TODO: add input to add a url
+    return (
+      <DocumentTitle title={definition ? definition.title : 'Open API v3 renderer'}>
+        <div className='main'>
+          {!definition && "Welcome to Temando's new Open API Renderer. Watch this space!"}
+          {definition && <Page definition={definition} location={location} specUrl={definitionUrl} />}
+        </div>
+      </DocumentTitle>
+    )
+  }
+}
+
+Base.contextTypes = {
+  router: PropTypes.object
+}
+
+Base.propTypes = {
+  location: PropTypes.object
+}

src/handlers/BaseHandler.js

@@ -1,25 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-import { Router, browserHistory } from 'react-router'
-import { syncHistoryWithStore } from 'react-router-redux'
-import 'babel-polyfill'
+import { BrowserRouter as Router } from 'react-router-dom'
 
-import routes from './routes'
-import configureStore from './store/configure'
-
-// const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
-
-const store = configureStore()
-const history = syncHistoryWithStore(browserHistory, store)
+import { routes } from './routes'
 
 export default class App extends React.Component {
   render () {
-    return (
-      <Provider store={store}>
-        <Router history={history}>{routes}</Router>
-      </Provider>
-    )
+    return <Router>{routes}</Router>
   }
 }
 

src/index.js

@@ -0,0 +1,33 @@
+import request from 'superagent'
+import yaml from 'js-yaml'
+import getParserFunction from '../parser/parserFactory'
+
+export async function getDefinition (url) {
+  if (!url) { throw new Error('Missing url') }
+
+  const response = await request
+    .get(url)
+    .timeout({
+      response: 5000,
+      deadline: 60000
+    })
+
+  let definition = response.body
+
+  // TODO move this to another place
+  if (url.endsWith('.yaml') || url.endsWith('.yml')) {
+    definition = yaml.safeLoad(response.text)
+  } else if (url.endsWith('json')) {
+    definition = JSON.parse(response.text)
+  }
+
+  return definition
+}
+
+export async function parseDefinition (definition, parserType) {
+  const parser = getParserFunction(parserType)
+
+  const parsedDefinition = await parser(definition)
+
+  return parsedDefinition
+}

src/lib/definitions.js

@@ -1,9 +1,7 @@
 import React from 'react'
-import { Route } from 'react-router'
-import BaseHandler from './handlers/BaseHandler'
+import { Route } from 'react-router-dom'
+import Base from './containers/Base'
 
-const routes = (
-  <Route path='/' component={BaseHandler} />
+export const routes = (
+  <Route exact path='/' component={Base} />
 )
-
-export default routes

src/routes.js

@@ -13,7 +13,8 @@ const extractSass = new ExtractTextPlugin({
 module.exports = {
   context: `${__dirname}/src`,
   entry: {
-    bundle: ['core-js/es7', './index.js'],
+    // TODO: remove babel polyfill, use transforms
+    bundle: ['babel-polyfill', 'core-js/es7', './index.js'],
 
     // Everything in the `dependencies` should be considered a `vendor` library
     vendor: [