Reset modal on close

Author: Emmanouil Konstantinidis

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

@@ -14,12 +14,6 @@ var LiveAPIEndpoints = React.createClass({
     };
   },
 
-  componentWillReceiveProps: function(nextProps) {
-    this.setState({
-      endpoint: nextProps.endpoint
-    });
-  },
-
   getData: function () {
     var method = this.refs.request.state.selectedMethod;
     return RequestUtils.shouldAddData(method) ? null : (

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

@@ -1,4 +1,3 @@
-var _ = require('underscore');
 var React = require('react');
 
 var FieldsData = require('./request/fields-data');
@@ -10,7 +9,7 @@ var RequestUtils = require('../utils/request');
 var Request = React.createClass({
   getInitialState: function () {
     return {
-      endpoint: {},
+      endpoint: null,
       data: {},
       selectedMethod: null,
     };
@@ -26,16 +25,6 @@ var Request = React.createClass({
     });
   },
 
-  componentWillReceiveProps: function (nextProps) {
-    var endpoint = nextProps.endpoint;
-    endpoint['methods'] = _.isArray(endpoint.methods) ? endpoint.methods : this.transformMethods(endpoint.methods);
-
-    this.setState({
-      endpoint: endpoint,
-      selectedMethod: endpoint['methods'][0]
-    });
-  },
-
   transformMethods: function (methods) {
     return methods
       .replace(/\W+/g, ' ')
@@ -51,10 +40,13 @@ var Request = React.createClass({
     });
   },
 
-  handleInputChange: function (value, event) {
-    var state = this.state;
-    state[value] = event.target.value;
-    this.setState(state);
+  handleUrlChange: function (event) {
+    var endpoint = this.state.endpoint;
+    endpoint.path = event.target.value;
+
+    this.setState({
+      endpoint: endpoint
+    });
   },
 
   handleDataFieldChange: function (value, fieldName) {
@@ -67,7 +59,6 @@ var Request = React.createClass({
 
   render: function () {
     var endpoint = this.state.endpoint;
-
     return (
       <div>
         <h3>Request</h3>
@@ -76,7 +67,7 @@ var Request = React.createClass({
         <FieldUrl
           name='urlEndpoint'
           url={endpoint.path}
-          onChange={this.handleInputChange.bind(this, 'urlEndpoint')} />
+          onChange={this.handleUrlChange} />
 
         <Header title='Method' />
         <Methods

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

@@ -6,7 +6,7 @@ var FieldUrl = React.createClass({
 
   getInitialState: function() {
     return {
-      value: this.props.url
+      url: this.props.url
     };
   },
 

rest_framework_docs/static/rest_framework_docs/js/components/response.js

@@ -6,17 +6,22 @@ var Response = React.createClass({
 
   getInitialState: function () {
     return {
-      endpoints: [],
+      payload: this.props.payload,
     };
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      payload: nextProps.payload
+    });
+  },
+
   saveToken: function () {
-    window.token = 'Token ' + this.props.payload.body.token;
-    console.log('Token ' + this.props.payload.body.token);
+    window.token = 'Token ' + this.state.payload.body.token;
   },
 
   render: function () {
-    if (!this.props.payload) {
+    if (!this.state.payload) {
       return (
         <div>
           <h3>Response</h3>
@@ -25,10 +30,10 @@ var Response = React.createClass({
       );
     }
 
-    var responseJSON = JSONpp.prettyPrint(this.props.payload.body);
-    var hasToken = this.props.payload.body.hasOwnProperty('token');
-    var statusText = this.props.payload.statusText.toLowerCase();
-    var statusCodeFirstChar = String(this.props.payload.status).charAt(0);
+    var responseJSON = JSONpp.prettyPrint(this.state.payload.body);
+    var hasToken = this.state.payload.body.hasOwnProperty('token');
+    var statusText = this.state.payload.statusText.toLowerCase();
+    var statusCodeFirstChar = String(this.state.payload.status).charAt(0);
     var statusCodeClass = 'label status-code pull-right status-code-' + statusCodeFirstChar;
 
     return (