Use React for Live API Endpoints

.gitignore

@@ -10,3 +10,4 @@ dist/
 drfdocs.egg-info/
 
 rest_framework_docs/static/node_modules/
+rest_framework_docs/static/rest_framework_docs/js/dist.js.map

.travis.yml

@@ -12,6 +12,7 @@ env:
   - DJANGO_VERSION=1.9
 
 install:
+  - cd rest_framework_docs/static/ && npm install && cd ../../
   - pip install -r requirements.txt
   - pip install -U Django==$DJANGO_VERSION
   - pip install codecov

MANIFEST.in

@@ -10,3 +10,6 @@ prune rest_framework_docs/static/node_modules
 
 graft rest_framework_docs/static/rest_framework_docs
 graft rest_framework_docs/templates/rest_framework_docs
+
+recursive-exclude rest_framework_docs/static/rest_framework_docs dist.js.map index.js
+recursive-exclude rest_framework_docs/static/rest_framework_docs/*/* *

rest_framework_docs/static/.eslintrc

@@ -0,0 +1,33 @@
+{
+  "rules": {
+    "max-len": [1, 120, 2],
+    "no-undef": 2,
+    "no-unreachable": 2,
+    "no-unused-vars": 2,
+    "no-undef-init": 2,
+    "no-multiple-empty-lines": [2, {"max": 2}],
+    "indent": [2, 2],
+    "semi": 2,
+    "strict": 0,
+    "space-after-keywords": 2,
+    "space-before-keywords": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": 0,
+    "space-infix-ops": 2,
+    "space-return-throw-case": 2,
+    "space-unary-ops": 2,
+    "quotes": [1, "single", "avoid-escape"]
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "plugins": [
+    "react"
+  ]
+}

rest_framework_docs/static/package.json

@@ -6,12 +6,17 @@
   "scripts": {
     "build-font-awesome": "cp -r node_modules/font-awesome/fonts rest_framework_docs/",
     "build-bootstrap-fonts": "cp -r node_modules/bootstrap/fonts rest_framework_docs/",
+    "build-js": "webpack",
     "build-less": "lessc --clean-css rest_framework_docs/less/style.less rest_framework_docs/css/style.css",
+    "watch-js": "webpack --progress --colors --watch",
     "watch-less": "watch 'npm run build-less' rest_framework_docs/less/",
-    "watch": "npm run watch-less",
-    "build": "npm run build-font-awesome && npm run build-bootstrap-fonts && npm run build-less",
+    "watch": "npm run watch-js & npm run watch-less",
+    "build": "npm run build-font-awesome && npm run build-bootstrap-fonts && npm run build-js && npm run build-less",
+    "release-js": "webpack --config webpack.rel.config.js",
+    "release": "npm run build-font-awesome && npm run build-bootstrap-fonts && npm run release-js && npm run build-less",
     "start": "npm run build && npm run watch-less",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint 'rest_framework_docs/js/' --ignore-pattern 'rest_framework_docs/js/dist.js'",
+    "test": "npm run lint"
   },
   "repository": {
     "type": "git",
@@ -32,11 +37,26 @@
   "dependencies": {
     "bootstrap": "=3.3.6",
     "bootswatch": "=3.3.6",
-    "font-awesome": "=4.5.0"
+    "font-awesome": "=4.5.0",
+    "jquery": "=1.11.3",
+    "react": "=0.14.3",
+    "react-dom": "=0.14.3",
+    "react-modal": "=0.6.1",
+    "superagent": "=1.6.1",
+    "underscore": "=1.8.3",
+    "underscore.string": "=3.2.2"
   },
   "devDependencies": {
+    "babel-core": "=6.3.26",
+    "babel-eslint": "=4.1.6",
+    "babel-loader": "=6.2.0",
+    "babel-preset-es2015": "=6.3.13",
+    "babel-preset-react": "=6.3.13",
+    "eslint": "=1.10.3",
+    "eslint-plugin-react": "=3.11.3",
     "less": "=2.5.3",
     "less-plugin-clean-css": "=1.5.1",
-    "watch": "=0.16.0"
+    "watch": "=0.16.0",
+    "webpack": "=1.12.9"
   }
 }

rest_framework_docs/static/rest_framework_docs/js/components/helpers/header.js

@@ -0,0 +1,12 @@
+var React = require('react');
+
+var Header = React.createClass({
+
+  render: function () {
+    return (
+      <h5 className='section-title'>{this.props.title}</h5>
+    );
+  }
+});
+
+module.exports = Header;

rest_framework_docs/static/rest_framework_docs/js/components/helpers/input.js

@@ -0,0 +1,32 @@
+var React = require('react');
+
+var Input = React.createClass({
+
+  handleChange: function (value) {
+    this.props.onChange(value);
+  },
+
+  render: function () {
+    return (
+      <div className="form-group">
+        <label
+          htmlFor={this.props.name}
+          className="col-sm-4 control-label">
+            {this.props.name}
+        </label>
+        <div className="col-sm-8">
+          <input
+            type={this.props.type}
+            className="form-control input-sm"
+            id={this.props.name}
+            placeholder={this.props.placeholder}
+            onChange={this.handleChange}
+            value={this.props.value}
+            required={this.props.required} />
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = Input;

rest_framework_docs/static/rest_framework_docs/js/components/liveapi.js

@@ -0,0 +1,70 @@
+var React = require('react');
+var APIRequest = require('superagent');
+
+var RequestUtils = require('../utils/request');
+var Request = require('./request');
+var Response = require('./response');
+
+var LiveAPIEndpoints = React.createClass({
+
+  getInitialState: function() {
+    return {
+      endpoint: this.props.endpoint,
+      response: null
+    };
+  },
+
+  getData: function () {
+    var method = this.refs.request.state.selectedMethod;
+    return RequestUtils.shouldAddData(method) ? null : (
+      this.refs.request.state.data
+    );
+  },
+
+  makeRequest: function (event) {
+    event.preventDefault();
+
+    var self = this;
+    var request = this.refs.request.state;
+
+    var headers = {};
+    if (this.refs.request.state.headers.authorization) {
+      headers['Authorization'] = this.refs.request.state.headers.authorization;
+    };
+
+    var data = this.getData();
+
+    // Now Make the Request
+    APIRequest(request.selectedMethod, request.endpoint.path)
+      .set(headers)
+      .send(data)
+      .end(function (err, res) {
+        self.setState({
+          response: res
+        });
+      });
+  },
+
+  render: function () {
+    return (
+      <form className="form-horizontal" onSubmit={this.makeRequest}>
+        <div className="modal-body">
+          <div className="row">
+            <div className="col-md-6 request">
+              <Request endpoint={this.state.endpoint} ref='request' />
+            </div>
+            <div className="col-md-6 response">
+              <Response payload={this.state.response} />
+            </div>
+          </div>
+        </div>
+        <div className="modal-footer">
+          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="submit" className="btn btn-primary">Send</button>
+        </div>
+      </form>
+    );
+  }
+});
+
+module.exports = LiveAPIEndpoints;

rest_framework_docs/static/rest_framework_docs/js/components/request.js

@@ -0,0 +1,98 @@
+var React = require('react');
+
+var Header = require('./helpers/header');
+var Headers = require('./request/headers');
+var FieldsData = require('./request/fields-data');
+var FieldUrl = require('./request/field-url');
+var Methods = require('./request/methods');
+var RequestUtils = require('../utils/request');
+
+var Request = React.createClass({
+  getInitialState: function () {
+    return {
+      data: {},
+      endpoint: null,
+      headers: {},
+      selectedMethod: null,
+    };
+  },
+
+  componentWillMount: function() {
+    var endpoint = this.props.endpoint;
+    var headers = this.state.headers;
+    headers['authorization'] = window.token ? window.token : '';
+
+    this.setState({
+      endpoint: endpoint,
+      headers: headers,
+      selectedMethod: endpoint['methods'][0]
+    });
+  },
+
+  setSelectedMethod: function (method) {
+    this.setState({
+      selectedMethod: method
+    });
+  },
+
+  handleUrlChange: function (event) {
+    var endpoint = this.state.endpoint;
+    endpoint.path = event.target.value;
+
+    this.setState({
+      endpoint: endpoint
+    });
+  },
+
+  handleHeaderChange: function (value, fieldName) {
+    var headers = this.state.headers;
+    headers[fieldName] = value;
+    this.setState({
+      headers: headers
+    });
+  },
+
+  handleDataFieldChange: function (value, fieldName) {
+    var data = this.state.data;
+    data[fieldName] = value;
+    this.setState({
+      data: data
+    });
+  },
+
+  render: function () {
+    var endpoint = this.state.endpoint;
+    return (
+      <div>
+        <h3>Request</h3>
+
+        <FieldUrl
+          name='urlEndpoint'
+          url={endpoint.path}
+          onChange={this.handleUrlChange} />
+
+        <Methods
+          methods={this.state.endpoint.methods}
+          selectedMethod={this.state.selectedMethod}
+          setMethod={this.setSelectedMethod} />
+
+        <Headers
+          headers={this.state.headers}
+          permissions={this.state.endpoint.permissions}
+          handleHeaderChange={this.handleHeaderChange} />
+
+        {RequestUtils.shouldAddData(this.state.method) ? null : (
+          <div>
+            {this.state.endpoint.fields.length ? <Header title='Data' /> : null}
+            <FieldsData
+              fields={endpoint.fields}
+              data={this.state.data}
+              onChange={this.handleDataFieldChange} />
+          </div>
+        )}
+      </div>
+    );
+  }
+});
+
+module.exports = Request;

rest_framework_docs/static/rest_framework_docs/js/components/request/field-url.js

@@ -0,0 +1,39 @@
+var React = require('react');
+
+var Header = require('../helpers/header');
+var Input = require('../helpers/input');
+
+var FieldUrl = React.createClass({
+
+  getInitialState: function() {
+    return {
+      url: this.props.url
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      url: nextProps.url
+    });
+  },
+
+  handleChange: function (value) {
+    this.props.onChange(value);
+  },
+
+  render: function () {
+    return (
+      <div>
+        <Header title='API Endpoint' />
+        <Input
+          type='text'
+          name='Url Endpoint'
+          value={this.state.url}
+          placeholder='Endpoint Url'
+          onChange={this.handleChange} />
+      </div>
+    );
+  }
+});
+
+module.exports = FieldUrl;

rest_framework_docs/static/rest_framework_docs/js/components/request/fields-data.js

@@ -0,0 +1,38 @@
+var React = require('react');
+
+var Input = require('../helpers/input');
+
+var FieldsData = React.createClass({
+
+  handleChange: function (fieldName, event) {
+    this.props.onChange(event.target.value, fieldName);
+  },
+
+  _renderFields: function () {
+    return this.props.fields.map(function (field, key) {
+      var value = this.props.data[field.name];
+      var type = field.name == 'password' ? 'password' : 'text';
+
+      return (
+        <Input
+          key={key}
+          type={type}
+          name={field.name}
+          value={value}
+          placeholder={field.type}
+          required={field.required ? 'required' : false}
+          onChange={this.handleChange.bind(this, field.name)} />
+      );
+    }, this);
+  },
+
+  render: function () {
+    return (
+      <div>
+        {this._renderFields()}
+      </div>
+    );
+  }
+});
+
+module.exports = FieldsData;