Fix http response view

src/components/HTTPFetchView.jsx

@@ -22,11 +22,8 @@ export function expiresText(expires) {
 
 class Component extends PureComponent {
 
-  updateAPIendpoint() {
-
-
-
-
+  updateAPIendpoint(e) {
+    this.setState({customEndpoint: e.target.value})
   }
 
   fetchUserinfo() {
@@ -36,7 +33,9 @@ class Component extends PureComponent {
   }
 
   fetchCustom() {
-
+    let endpoint = this.state.customEndpoint
+    console.error("Get data from ", endpoint)
+    this.props.httpRequestStart(endpoint)
   }
 
   render() {

src/components/HTTPResponseView.jsx

+import React, { PureComponent } from 'react'
+import {Table, Navbar, Nav, NavItem, NavDropdown, MenuItem, Glyphicon, Jumbotron, Button} from 'react-bootstrap'
+import {Alert, Row, Col, Collapse, FormControl, FormGroup, ControlLabel, HelpBlock, PanelGroup, Panel} from 'react-bootstrap'
+import FontAwesome from 'react-fontawesome'
+
+import HostnameController from '../containers/HostnameController'
+import ServerConfigController from '../containers/ServerConfigController'
+import WhiteBox from './WhiteBox'
+import LoadingIndicator from '../components/LoadingIndicator'
+
+import moment from 'moment'
+import 'moment/locale/nb';
+// import 'moment/locale/en';
+
+moment.locale("en");
+
+
+export function expiresText(expires) {
+  var expiresM = moment.unix(expires)
+  return expiresM.fromNow()
+}
+
+class Component extends PureComponent {
+
+  updateAPIendpoint() {
+
+
+
+
+  }
+
+  fetchUserinfo() {
+    let endpoint = this.props.serverConfig.userinfo_endpoint;
+    console.error("Get userinfo from ", endpoint)
+    this.props.httpRequestStart(endpoint)
+  }
+
+  fetchCustom() {
+
+  }
+
+  handleAlertDismiss() {
+
+  }
+
+  getErrorMessage() {
+    if (this.props.http.error) {
+      return (
+        <Alert bsStyle="danger" onDismiss={this.handleAlertDismiss}>
+          <h4>Error performing HTTP request</h4>
+          <p>{this.props.http.error}</p>
+        </Alert>
+      )
+    }
+    return null
+  }
+  render() {
+    console.error("Component", this.props)
+
+    if (!this.props.http) {
+      return (
+        <p></p>
+      )
+    }
+
+    let headers = []
+    if (this.props.http.response && this.props.http.response.headers) {
+      this.props.http.response.headers.forEach((item) => {
+        headers.push((
+          <tr key={item.key}>
+            <td>{item.key}</td>
+            <td>{item.value}</td>
+          </tr>
+        ))
+      })
+    }
+
+    let bodystr = this.props.http.response ? JSON.stringify(this.props.http.response.body, undefined, 2) : ''
+    let loading = null
+    if (this.props.http.isLoading) {
+      loading = (
+        <LoadingIndicator />
+      )
+    }
+
+
+    return (
+      <Panel header="HTTP Response" eventKey="1" collapsible={true} expanded={true}>
+        <div>
+          <p><code>GET</code> request to <code>{this.props.http.url}</code></p>
+          { loading }
+          {this.getErrorMessage()}
+          <Table striped bordered condensed hover>
+            <tbody>
+              {headers}
+            </tbody>
+          </Table>
+          <pre>{ bodystr }</pre>
+        </div>
+      </Panel>
+    )
+  }
+
+
+}
+
+export default Component

src/components/MainContent.jsx

@@ -6,6 +6,7 @@ import HostnameController from '../containers/HostnameController'
 import ServerConfigController from '../containers/ServerConfigController'
 import TokenViewContainer from '../containers/TokenViewContainer'
 import HTTPFetchContainer from '../containers/HTTPFetchContainer'
+import HTTPResponseContainer from '../containers/HTTPResponseContainer'
 import WhiteBox from './WhiteBox'
 
 
@@ -29,6 +30,7 @@ const MainContent = () => (
         <ServerConfigController />
         <TokenViewContainer />
         <HTTPFetchContainer />
+        <HTTPResponseContainer />
 
       </WhiteBox>
 

src/components/ServerConfigInput.jsx

@@ -77,13 +77,11 @@ class Component extends PureComponent {
               <FormControl type="text" value={tokenEndpoint} onChange={this.updateFieldHandler.bind(this)("tokenEndpoint")} />
           </FormGroup>
 
-
           <h4>Userinfo Endpoint</h4>
           <FormGroup>
               <FormControl type="text" value={userinfoEndpoint} onChange={this.updateFieldHandler.bind(this)("userinfo_endpoint")} />
           </FormGroup>
 
-
           <h4>Client ID</h4>
           <FormGroup>
               <FormControl type="text" bsSize="large" value={this.state.clientId} onChange={this.updateFieldHandler.bind(this)("clientId")} />

src/containers/HTTPResponseContainer.js

+import { connect } from 'react-redux'
+import Component from '../components/HTTPResponseView'
+
+const mapStateToProps = (state) => ({
+  http: state.http
+})
+
+export default connect(mapStateToProps)(Component)

src/reducers/index.js

@@ -36,7 +36,8 @@ const reducer = handleActions({
     start: (state, action) => ({
       ...state,
       http: {
-        url: action.payload
+        url: action.payload,
+        isLoading: true
       }
     }),
     completed: (state, action) => {
@@ -46,6 +47,7 @@ const reducer = handleActions({
           ...state,
           http: {
             url: state.http.url,
+            isLoading: false,
             error: action.payload.toString()
           }
         }
@@ -54,6 +56,7 @@ const reducer = handleActions({
         ...state,
         http: {
           url: state.http.url,
+          isLoading: false,
           response: action.payload
         }
       }