diff --git a/src/components/param-builder/index.js b/src/components/param-builder/index.js index a0ba73c..0881c50 100644 --- a/src/components/param-builder/index.js +++ b/src/components/param-builder/index.js @@ -36,7 +36,7 @@ const ParamBuilder = ( { title, params, values = {}, onChange } ) => { parameter={ parameter } id={ `param-${ paramKey }` } name={ paramKey } - position="right" + position="bottom" /> diff --git a/src/components/results/header/index.js b/src/components/results/header/index.js index ffdc0ae..ecfb54e 100644 --- a/src/components/results/header/index.js +++ b/src/components/results/header/index.js @@ -1,9 +1,10 @@ import React from 'react'; import ResultsViewSelector from '../results-view-selector'; +import Refresh from './refresh'; import './style.css'; -const RequestHeader = ( { result: { loading, request: { path, method, apiName, version }, duration, response }, view, onViewChange } ) => { +const RequestHeader = ( { result: { id, loading, request: { path, method, apiName, version }, duration, response }, view, onViewChange } ) => { const filename = path .replace( /^\//, '' ) .replace( /\//g, '-' ) + '.json'; @@ -25,7 +26,10 @@ const RequestHeader = ( { result: { loading, request: { path, method, apiName, v ) } { duration && ( - { `${ duration }ms` } +
+ {`${ duration }ms`} + +
) } { response && !! response.body && (
diff --git a/src/components/results/header/refresh.js b/src/components/results/header/refresh.js new file mode 100644 index 0000000..c1b2a47 --- /dev/null +++ b/src/components/results/header/refresh.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +import { refresh } from '../../../state/results/actions'; + +const Refresh = ( { refreshResult } ) => ( + + + ); + +const mapDispatchToProps = ( dispatch, { id } ) => { + return { refreshResult: () => dispatch( refresh( id ) ) }; +}; + +export default connect( undefined, mapDispatchToProps )( Refresh ); diff --git a/src/components/results/header/style.css b/src/components/results/header/style.css index 3a0f4fa..15dad1c 100644 --- a/src/components/results/header/style.css +++ b/src/components/results/header/style.css @@ -81,6 +81,20 @@ content: "\1F4CB\FE0E"; } +.request-header .refresh { + padding: 2px 4px 0; + font-size: 18px; + border-radius: 2px; + text-decoration: none; + display: inline-block; + vertical-align: middle; + margin: 2px 0 2px 8px; + border: 1px solid #95b7d0; + color: #95b7d0; + height: 18px; + line-height: 12px; +} + .request-header .error { white-space: nowrap; font-size: 12px; diff --git a/src/state/results/actions.js b/src/state/results/actions.js index 9f45abe..22f9e9a 100644 --- a/src/state/results/actions.js +++ b/src/state/results/actions.js @@ -3,6 +3,7 @@ import { getRequestMethod, getCompleteQueryUrl, getBodyParams } from '../request import { getSelectedApi, getSelectedVersion } from '../ui/selectors'; import { get } from '../../api'; import { getResponseStatus, getResponseError } from '../../lib/api'; +import { getResultById } from './selectors'; window.responses = []; const recordResponse = response => { @@ -44,10 +45,10 @@ const receiveResults = ( { }; }; -const triggerRequest = ( { id, version, apiName, method, path } ) => { +const triggerRequest = ( { id, request } ) => { return { type: REQUEST_TRIGGER, - payload: { id, version, apiName, method, path }, + payload: { id, request }, }; }; @@ -60,16 +61,13 @@ export const request = () => ( dispatch, getState ) => { const api = get( apiName ); const body = getBodyParams( state ); const start = new Date().getTime(); - const request = api.buildRequest( version, method, path, body ); + const request = { apiName, api, version, method, path, body }; dispatch( triggerRequest( { id: start, - version, - apiName, - method, - path, + request, } ) ); - return api.authProvider.request( request ) + return api.authProvider.request( api.buildRequest( request.version, request.method, request.path, request.body ) ) .then( ( { status, body, error } ) => { const end = new Date().getTime(); dispatch( receiveResults( { @@ -85,3 +83,30 @@ export const request = () => ( dispatch, getState ) => { } ) ); } ); }; + +export const refresh = id => ( dispatch, getState ) => { + const state = getState(); + const result = getResultById( state, id ); + const request = result.request; + const start = new Date().getTime(); + dispatch( triggerRequest( { + id, + request, + } ) ); + + return request.api.authProvider.request( request.api.buildRequest( request.version, request.method, request.path, request.body ) ) + .then( ( { status, body, error } ) => { + const end = new Date().getTime(); + dispatch( receiveResults( { + id, + apiVersion: request.apiVersion, + apiName: request.apiName, + method: request.method, + path: request.path, + status: getResponseStatus( status, body, error ), + body, + error: getResponseError( status, body, error, true ), + duration: end - start, + } ) ); + } ); +}; diff --git a/src/state/results/reducer.js b/src/state/results/reducer.js index 50421d0..9ce7920 100644 --- a/src/state/results/reducer.js +++ b/src/state/results/reducer.js @@ -2,10 +2,10 @@ import { createReducer } from '../../lib/redux/create-reducer'; import { REQUEST_RESULTS_RECEIVE, REQUEST_TRIGGER } from '../actions'; const reducer = createReducer( {}, { - [ REQUEST_TRIGGER ]: ( state, { payload: { id, version, apiName, method, path } } ) => { + [ REQUEST_TRIGGER ]: ( state, { payload: { id, request } } ) => { return ( { ...state, - [ id ]: { id, loading: true, request: { version, apiName, method, path } }, + [ id ]: { id, loading: true, request }, } ); }, [ REQUEST_RESULTS_RECEIVE ]: ( state, { payload: { id, status, body, error, duration } } ) => { diff --git a/src/state/results/selectors.js b/src/state/results/selectors.js index e618a9c..a6e3181 100644 --- a/src/state/results/selectors.js +++ b/src/state/results/selectors.js @@ -9,3 +9,8 @@ export const getResults = state => { .map( key => results[ key ] ) .sort( ( a, b ) => b.id - a.id ); }; + +export const getResultById = ( state, id ) => { + const results = getResults( state ); + return results.filter( result => result.id === id )[ 0 ]; +};