Active method

Author: Emmanouil Konstantinidis

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

@@ -21,7 +21,7 @@ var LiveAPIEndpoints = React.createClass({
   },
 
   getData: function () {
-    var method = this.refs.request.state.method;
+    var method = this.refs.request.state.selectedMethod;
     return RequestUtils.shouldAddData(method) ? null : (
       this.refs.request.state.data
     );
@@ -35,7 +35,7 @@ var LiveAPIEndpoints = React.createClass({
     var data = this.getData();
 
     // Now Make the Request
-    APIRequest(request.method, request.urlEndpoint)
+    APIRequest(request.selectedMethod, request.urlEndpoint)
       .send(data)
       .end(function (err, res) {
         self.setState({

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

@@ -1,3 +1,4 @@
+var _ = require('underscore');
 var React = require('react');
 
 var FieldsData = require('./request/fields-data');
@@ -7,24 +8,46 @@ var Methods = require('./request/methods');
 var RequestUtils = require('../utils/request');
 
 var Request = React.createClass({
-
   getInitialState: function () {
     return {
+      endpoint: {},
       data: {},
-      method: null,
-      urlEndpoint: this.props.endpoint.path
+      selectedMethod: null,
     };
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillMount: function() {
+    var endpoint = this.props.endpoint;
+    endpoint['methods'] = this.transformMethods(endpoint.methods);
+
+    this.setState({
+      endpoint: endpoint,
+      selectedMethod: endpoint['methods'][0]
+    });
+  },
+
+  componentWillReceiveProps: function (nextProps) {
+    var endpoint = nextProps.endpoint;
+    endpoint['methods'] = _.isArray(endpoint.methods) ? endpoint.methods : this.transformMethods(endpoint.methods);
+
     this.setState({
-      urlEndpoint: nextProps.endpoint.path 
+      endpoint: endpoint,
+      selectedMethod: endpoint['methods'][0]
     });
   },
 
-  setMethod: function (method) {
+  transformMethods: function (methods) {
+    return methods
+      .replace(/\W+/g, ' ')
+      .replace(/^[ ]+|[ ]+$/g,'')
+      .split(' ');
+  },
+
+  setSelectedMethod: function (method) {
+    console.log('REQUEST _ setSelectedMethod');
+
     this.setState({
-      method: method
+      selectedMethod: method
     });
   },
 
@@ -43,7 +66,7 @@ var Request = React.createClass({
   },
 
   render: function () {
-    var endpoint = this.props.endpoint;
+    var endpoint = this.state.endpoint;
 
     return (
       <div>
@@ -52,11 +75,14 @@ var Request = React.createClass({
         <Header title='API Endpoint' />
         <FieldUrl
           name='urlEndpoint'
-          url={this.state.urlEndpoint}
+          url={endpoint.path}
           onChange={this.handleInputChange.bind(this, 'urlEndpoint')} />
 
         <Header title='Method' />
-        <Methods methods={endpoint.methods} active={this.state.method} setMethod={this.setMethod} />
+        <Methods
+          methods={this.state.endpoint.methods}
+          selectedMethod={this.state.selectedMethod}
+          setMethod={this.setSelectedMethod} />
 
         <Header title='Headers' />
         <div className="form-group">

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

@@ -4,35 +4,35 @@ var Methods = React.createClass({
 
   getInitialState: function() {
     return {
-      methods: []
+      methods: [],
+      selectedMethod: null
     };
   },
 
   componentWillMount: function() {
-    var methods = this.props.methods
-        .replace(/\W+/g, ' ')
-        .replace(/^[ ]+|[ ]+$/g,'')
-        .split(' ');
-
     this.setState({
-      methods: methods
+      methods: this.props.methods,
+      selectedMethod: this.props.selectedMethod
     });
+  },
 
-    this.props.setMethod(methods[0]);
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      methods: nextProps.methods,
+      selectedMethod: nextProps.selectedMethod
+    });
   },
 
   setMethod: function (value) {
     this.props.setMethod(value);
   },
 
   render: function () {
-    // var self = this;
-
     return (
       <div className='btn-group methods'>
         {this.state.methods.map(function (method, i) {
           var methodClass = 'btn btn-sm method ' + method.toLowerCase() +
-            (this.props.active == method ? ' active' : null);
+            (this.state.selectedMethod == method ? ' active' : null);
           return (
             <button
               key={i}