Add diff view & Update to React 16

package.json

@@ -21,11 +21,13 @@
     "classnames": "^2.2.5",
     "hash.js": "^1.1.7",
     "is-my-json-valid": "^2.15.0",
+    "json-stable-stringify": "^1.0.1",
     "oauth-1.0a": "^2.0.0",
     "qs": "^6.3.0",
-    "react": "^15.3.2",
+    "react": "^16.0.0",
     "react-click-outside": "github:tj/react-click-outside",
-    "react-dom": "^15.3.2",
+    "react-diff-viewer": "^3.1.1",
+    "react-dom": "^16.0.0",
     "react-input-autosize": "^1.1.0",
     "react-json-tree": "^0.10.0",
     "react-redux": "^4.4.5",

src/app.js

@@ -5,15 +5,19 @@ import './app.css';
 
 import store from './state';
 import QueryBuilder from './components/query-builder';
+import Toolbar from './components/toolbar';
 import Header from './components/header';
 import Results from './components/results';
+import Diff from './components/toolbar/tools/diff';
 
 const App = () =>
 	(
 		<Provider store={ store }>
 			<div className="App">
 				<Header />
 				<QueryBuilder />
+				<Toolbar />
+				<Diff />
 				<Results />
 			</div>
 		</Provider>

src/components/close-button/index.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import './style.css';
 

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/param-builder/input.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import TagsInput from 'react-tagsinput';
 import 'react-tagsinput/react-tagsinput.css';
 

src/components/query-builder/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 import { connect } from 'react-redux';
 
 import './style.css';
@@ -7,23 +8,29 @@ import { getSelectedEndpoint, getQueryParams, getBodyParams } from '../../state/
 import { setQueryParam, setBodyParam } from '../../state/request/actions';
 import ParamBuilder from '../param-builder';
 
-const QueryBuilder = ( { bodyParams, endpoint, queryParams, setBodyParam, setQueryParam } ) =>
-	(
-		<div className="builder">
-			{ endpoint && endpoint.request.query && <ParamBuilder
+const QueryBuilder = ( { bodyParams, endpoint, queryParams, setBodyParam, setQueryParam } ) => {
+	const hasQuery = endpoint && endpoint.request.query;
+	const hasBody = endpoint && endpoint.request.body;
+	const className = classnames( 'builder', {
+		empty: ! hasQuery && ! hasBody,
+	} );
+	return (
+		<div className={ className }>
+			{ hasQuery && <ParamBuilder
 				title="Query"
 				params={ endpoint.request.query }
 				values={ queryParams }
 				onChange={ setQueryParam }
 			/> }
-			{ endpoint && endpoint.request.body && <ParamBuilder
+			{ hasBody && <ParamBuilder
 				title="Body"
 				params={ endpoint.request.body }
 				values={ bodyParams }
 				onChange={ setBodyParam }
 			/> }
 		</div>
-	)
+	);
+}
 ;
 
 export default connect(

src/components/query-builder/style.css

@@ -20,3 +20,9 @@
 	flex-shrink: 0;
 	align-self: auto;
 }
+
+.empty {
+	padding: 0;
+	border: 0;
+	margin: 0;
+}

src/components/results/header/compare-a.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+
+import { setLeftDiff } from '../../../state/comparer/actions';
+import { getLeftSideId } from '../../../state/comparer/selector';
+
+const CompareA = ( { highlighted, setLeftSide } ) => {
+	const className = classnames( 'compare-a', {
+		highlighted,
+	} );
+	return (
+		<span
+			onClick={ setLeftSide }
+			className={ className }
+			title="Set left side diff"
+		>
+			A
+		</span> );
+};
+
+const mapDispatchToProps = ( dispatch, { json, id } ) => {
+	return { setLeftSide: () => dispatch( setLeftDiff( json, id ) ) };
+};
+
+export default connect( ( state, ownProps ) => {
+	return {
+		highlighted: getLeftSideId( state ) === ownProps.id,
+	};
+}, mapDispatchToProps )( CompareA );

src/components/results/header/compare-b.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+
+import { setRightDiff } from '../../../state/comparer/actions';
+import { getRightSideId } from '../../../state/comparer/selector';
+
+const CompareB = ( { highlighted, setRightSide } ) => {
+	const className = classnames( 'compare-b', {
+		highlighted,
+	} );
+	return (
+		<span
+			onClick={ setRightSide }
+			className={ className }
+			title="Set right side diff"
+		>
+			B
+		</span> );
+};
+
+const mapDispatchToProps = ( dispatch, { json, id } ) => {
+	return { setRightSide: () => dispatch( setRightDiff( json, id ) ) };
+};
+
+export default connect( ( state, ownProps ) => {
+	return {
+		highlighted: getRightSideId( state ) === ownProps.id,
+	};
+}, mapDispatchToProps )( CompareB );

src/components/results/header/index.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ResultsViewSelector from '../results-view-selector';
+import Refresh from './refresh';
+import CompareA from './compare-a';
+import CompareB from './compare-b';
 
 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 +28,12 @@ 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 } />
+					<CompareA json={ response.body } id={ id } />
+					<CompareB json={ response.body } 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,53 @@
 	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 .compare-a {
+	padding: 2px 4px 0;
+	font-size: 16px;
+	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: 16px;
+}
+
+.request-header .compare-b {
+	padding: 2px 4px 0;
+	font-size: 16px;
+	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: 16px;
+}
+
+.request-header .highlighted {
+	border: 1px solid green;
+	color: green;
+}
+
 .request-header .error {
 	white-space: nowrap;
 	font-size: 12px;

src/components/toolbar/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import { getSelectedEndpoint } from '../../state/request/selectors';
+
+import './style.css';
+
+import { getLeftSideDiff, getRightSideDiff, getVisible } from '../../state/comparer/selector';
+import { toggleVisibility } from '../../state/comparer/actions';
+
+const Toolbar = ( { hasBuilder, visible, toogleVisible } ) => {
+	const classNameContainer = classnames( 'header', {
+		'has-builder': hasBuilder,
+	} );
+
+	const classNameButton = classnames( 'toolbar-button', {
+		enabled: visible,
+	} );
+	return (
+		<div className={ classNameContainer }>
+			<button className={ classNameButton } onClick={ toogleVisible }>
+				<span className="compare-a-b">A</span> =|=
+				<span className="compare-a-b">B</span>
+			</button>
+		</div>
+	);
+};
+
+const mapDispatchToProps = dispatch => {
+	return { toogleVisible: () => dispatch( toggleVisibility() ) };
+};
+
+export default connect(
+    state => {
+	const leftSideDiff = getLeftSideDiff( state );
+	const rightSideDiff = getRightSideDiff( state );
+	const visible = getVisible( state );
+	const endpoint = getSelectedEndpoint( state );
+	return {
+		hasBuilder: endpoint && ( endpoint.request.query || endpoint.request.body ),
+		leftSideDiff,
+		rightSideDiff,
+		visible,
+	};
+}, mapDispatchToProps )( Toolbar );

src/components/toolbar/style.css

@@ -0,0 +1,53 @@
+.header {
+    margin-top:48px;
+	min-height: 44px;
+	font-size: 18px;
+	z-index: 4;
+	background: #2487bc;
+	flex-wrap: nowrap;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+}
+
+.has-builder {
+    margin-top:0px;
+}
+
+.compare-a-b {
+	padding: 2px 4px 0;
+	font-size: 16px;
+	border-radius: 2px;
+	text-decoration: none;
+	display: inline-block;
+	vertical-align: middle;
+	margin: 2px 6px 2px 8px;
+	border: 1px solid;
+	height: 18px;
+	line-height: 16px;
+}
+
+.toolbar-button {
+    background-color: #F2F2F2;
+    border-color: rgb(118, 118, 118);
+    border-width: 1px;
+    height: 44px;
+    cursor: pointer;
+    color: #95b7d0;
+}
+
+.enabled {
+    background-color: #2487bc;
+    color: white;
+}
+
+.toolbar-button:hover {
+    background-color: hsl(201,60%,60%);
+    color: black;
+    border-color: black;
+}
+
+.enabled:hover {
+    background-color: #2487bc;
+    color: white;
+}