Update url if another modal

Author: Emmanouil Konstantinidis

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

@@ -9,10 +9,17 @@ var LiveAPIEndpoints = React.createClass({
 
   getInitialState: function() {
     return {
+      endpoint: this.props.endpoint,
       response: null
     };
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      endpoint: nextProps.endpoint
+    });
+  },
+
   getData: function () {
     var method = this.refs.request.state.method;
     return RequestUtils.shouldAddData(method) ? null : (
@@ -38,13 +45,12 @@ var LiveAPIEndpoints = React.createClass({
   },
 
   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.props.endpoint} ref='request' />
+              <Request endpoint={this.state.endpoint} ref='request' />
             </div>
             <div className="col-md-6 response">
               <Response payload={this.state.response} />

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

@@ -16,6 +16,12 @@ var Request = React.createClass({
     };
   },
 
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      urlEndpoint: nextProps.endpoint.path 
+    });
+  },
+
   setMethod: function (method) {
     this.setState({
       method: method
@@ -46,7 +52,7 @@ var Request = React.createClass({
         <Header title='API Endpoint' />
         <FieldUrl
           name='urlEndpoint'
-          value={this.state.urlEndpoint}
+          url={this.state.urlEndpoint}
           onChange={this.handleInputChange.bind(this, 'urlEndpoint')} />
 
         <Header title='Method' />

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

@@ -4,6 +4,18 @@ var Input = require('../helpers/input');
 
 var FieldUrl = React.createClass({
 
+  getInitialState: function() {
+    return {
+      value: this.props.url
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      url: nextProps.url
+    });
+  },
+
   handleChange: function (value) {
     this.props.onChange(value);
   },
@@ -12,7 +24,7 @@ var FieldUrl = React.createClass({
     return (
       <Input
         name='Url Endpoint'
-        value={this.props.value}
+        value={this.state.url}
         placeholder='Endpoint Url'
         onChange={this.handleChange} />
     );

rest_framework_docs/static/rest_framework_docs/js/dist.js

@@ -30837,10 +30837,17 @@ var LiveAPIEndpoints = React.createClass({
 
   getInitialState: function getInitialState() {
     return {
+      endpoint: this.props.endpoint,
       response: null
     };
   },
 
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    this.setState({
+      endpoint: nextProps.endpoint
+    });
+  },
+
   getData: function getData() {
     var method = this.refs.request.state.method;
     return RequestUtils.shouldAddData(method) ? null : this.refs.request.state.data;
@@ -30862,7 +30869,6 @@ var LiveAPIEndpoints = React.createClass({
   },
 
   render: function render() {
-
     return React.createElement(
       'form',
       { className: 'form-horizontal', onSubmit: this.makeRequest },
@@ -30875,7 +30881,7 @@ var LiveAPIEndpoints = React.createClass({
           React.createElement(
             'div',
             { className: 'col-md-6 request' },
-            React.createElement(Request, { endpoint: this.props.endpoint, ref: 'request' })
+            React.createElement(Request, { endpoint: this.state.endpoint, ref: 'request' })
           ),
           React.createElement(
             'div',
@@ -30926,6 +30932,12 @@ var Request = React.createClass({
     };
   },
 
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    this.setState({
+      urlEndpoint: nextProps.endpoint.path
+    });
+  },
+
   setMethod: function setMethod(method) {
     this.setState({
       method: method
@@ -30960,7 +30972,7 @@ var Request = React.createClass({
       React.createElement(Header, { title: 'API Endpoint' }),
       React.createElement(FieldUrl, {
         name: 'urlEndpoint',
-        value: this.state.urlEndpoint,
+        url: this.state.urlEndpoint,
         onChange: this.handleInputChange.bind(this, 'urlEndpoint') }),
       React.createElement(Header, { title: 'Method' }),
       React.createElement(Methods, { methods: endpoint.methods, active: this.state.method, setMethod: this.setMethod }),
@@ -31007,14 +31019,26 @@ var Input = require('../helpers/input');
 var FieldUrl = React.createClass({
   displayName: 'FieldUrl',
 
+  getInitialState: function getInitialState() {
+    return {
+      value: this.props.url
+    };
+  },
+
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+    this.setState({
+      url: nextProps.url
+    });
+  },
+
   handleChange: function handleChange(value) {
     this.props.onChange(value);
   },
 
   render: function render() {
     return React.createElement(Input, {
       name: 'Url Endpoint',
-      value: this.props.value,
+      value: this.state.url,
       placeholder: 'Endpoint Url',
       onChange: this.handleChange });
   }