Add/refresh data

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"
 										/>
 									</td>
 								</tr>

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
 				</span>
 			) }
 			{ duration && (
-				<span className="duration">{ `${ duration }ms` }</span>
+				<div>
+					<span className="duration">{`${ duration }ms`}</span>
+					<Refresh id={ id } />
+				</div>
 			) }
 			{ response && !! response.body && (
 				<div>

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 } ) => (
+	<span
+		onClick={ refreshResult }
+		className="refresh"
+		title="Refresh"
+	>
+		<i className="refresh-icon">↺</i>
+	</span> );
+
+const mapDispatchToProps = ( dispatch, { id } ) => {
+	return { refreshResult: () => dispatch( refresh( id ) ) };
+};
+
+export default connect( undefined, mapDispatchToProps )( Refresh );

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;

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,
+			} ) );
+		} );
+};

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 } } ) => {

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 ];
+};