feat(json): use react-json-view for great good

replaces components/JSON.tsx

currently only being used in body with a depth > 2 and schema display

app/components/Body.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { CSSTransition } from 'react-transition-group'
+import ReactJson from 'react-json-view'
 
 import Toast, { ToastTypes } from './chrome/Toast'
 import SpinnerWithIcon from './chrome/SpinnerWithIcon'
 import HandsonTable from './HandsonTable'
-import JSON from './JSON'
 import { ApiAction } from '../store/api'
 
 import { Structure } from '../models/dataset'
@@ -57,7 +57,11 @@ const Body: React.FunctionComponent<BodyProps> = ({ value, pageInfo, headers, st
  />
  )
  } else { // otherwise use our nifty JSON renderer
- bodyContent = <JSON body={value} />
+ bodyContent = <ReactJson
+ name={null}
+ src={value}
+ displayDataTypes={false}
+ />
  }
 
  return (

app/components/Schema.tsx

@@ -1,19 +1,26 @@
 import * as React from 'react'
+import ReactJson from 'react-json-view'
+
 import { Dataset } from '../models/dataset'
 import SpinnerWithIcon from './chrome/SpinnerWithIcon'
 
 interface SchemaProps {
  schema: Dataset['schema']
 }
 
-const Schema: React.FunctionComponent<SchemaProps> = (props: SchemaProps) => {
- if (!props.schema) {
+const Schema: React.FunctionComponent<SchemaProps> = ({ schema }) => {
+ if (!schema) {
  return <SpinnerWithIcon loading={true} />
  }
 
  return (
  <div className='content'>
- <pre>{JSON.stringify(props.schema, null, 2)}</pre>
+ <ReactJson
+ name={null}
+ src={schema}
+ enableClipboard={false}
+ displayDataTypes={false}
+ />
  </div>
  )
 }

package.json

@@ -192,6 +192,7 @@
  "moment": "2.24.0",
  "react": "16.8.6",
  "react-dom": "16.8.6",
+ "react-json-view": "^1.19.1",
  "react-redux": "7.1.0",
  "react-router": "5.0.1",
  "react-router-dom": "5.0.1",