properly styling the json viewers

Author: thefringeninja

package.json

@@ -14,6 +14,7 @@
   "private": false,
   "devDependencies": {
     "@types/array.prototype.flatmap": "^1.2.0",
+    "@types/base16": "^1.0.1",
     "@types/classnames": "^2.2.6",
     "@types/history": "^4.7.2",
     "@types/json-schema": "^7.0.1",
@@ -39,14 +40,16 @@
     "@material-ui/core": "3.2.1",
     "@material-ui/icons": "3.0.1",
     "array.prototype.flatmap": "1.2.1",
+    "base16": "1.0.0",
     "classnames": "2.2.6",
     "history": "4.7.2",
     "inflector-js": "1.0.1",
+    "invert-color": "1.5.0",
     "json-schema": "0.2.3",
     "jss": "9.4.0",
     "react": "16.5.2",
     "react-dom": "16.5.2",
-    "react-inspector": "2.3.0",
+    "react-json-view": "1.19.1",
     "react-remarkable": "1.1.3",
     "react-schema-form": "0.5.0",
     "react-tap-event-plugin": "3.0.2",

src/stream-store/Viewer/HalViewer/StreamMessage.tsx

@@ -2,36 +2,18 @@ import {
     Card,
     CardActions,
     CardContent,
-    Drawer,
     Tab,
     Tabs,
     Typography,
-    WithStyles,
-    withStyles,
 } from '@material-ui/core';
-import React, {
-    ComponentType,
-    FormEvent,
-    PureComponent,
-    ReactNode,
-} from 'react';
-import Inspector, {
-    NodeRendererProps,
-    ObjectLabel,
-    ObjectName,
-    ObjectRootLabel,
-} from 'react-inspector';
+import React, { ComponentType, FormEvent, PureComponent } from 'react';
 import { Observable as obs } from 'rxjs';
-import uriTemplate from 'uri-template';
-import { StreamBrowser } from '../../../components';
 import { Notes, Settings } from '../../../components/Icons';
 import { Table, TableBody } from '../../../components/StripeyTable';
 import { connect, createState } from '../../../reactive';
-import { HalResource, NavigatableProps } from '../../../types';
-import { hal, http } from '../../../utils';
-import rels from '../../rels';
+import { HalResource } from '../../../types';
 import store from '../../store';
-import { StreamHeader, StreamMessageDetails } from './components';
+import { JsonViewer, StreamHeader, StreamMessageDetails } from './components';
 import { HalViewerProps } from './types';
 
 const tryParseJson = (payload: string): object => {
@@ -79,147 +61,6 @@ const state$ = createState<StreamMessageState>(
     }),
 );
 
-const isPotentialStreamId = (data: any) =>
-    typeof data === 'number' || typeof data === 'string';
-
-const getStreamLinks = ({ _embedded }: HalResource): HalResource[] =>
-    _embedded[rels.feed] || [];
-
-interface StreamMessageJsonState {
-    streams: HalResource[];
-    loading: boolean;
-    open: boolean;
-}
-
-const style = {
-    drawerPaper: {
-        width: 480,
-    },
-    streamId: {
-        '&:hover': {
-            textDecoration: 'underline',
-        },
-    },
-};
-
-interface StreamMessageJsonProps {
-    json: object;
-}
-
-const StreamMessageJson = withStyles(style)(class extends PureComponent<
-    StreamMessageJsonProps &
-        NavigatableProps &
-        HalResource &
-        WithStyles<typeof style>,
-    StreamMessageJsonState
-> {
-    state: StreamMessageJsonState = {
-        loading: false,
-        open: false,
-        streams: [],
-    };
-
-    _handlePotentialStreamIdClick: (
-        e: FormEvent,
-        pattern: string,
-    ) => Promise<void> = async ({ currentTarget: anchorElement }, pattern) => {
-        const { authorization, _links } = this.props;
-
-        this.setState({
-            loading: true,
-            open: true,
-        });
-
-        if (!_links || !_links[rels.browse]) {
-            return;
-        }
-
-        const template = uriTemplate.parse(
-            decodeURI(_links[rels.browse][0].href),
-        );
-
-        const responses = await Promise.all(
-            [...new Set([pattern, String(pattern).replace('-', '')])].map(p =>
-                http.get({
-                    headers: { authorization },
-                    link: {
-                        href: template.expand({ p, t: 'e' }),
-                    },
-                }),
-            ),
-        );
-
-        this.setState({
-            loading: false,
-            streams: Object.values(
-                responses.flatMap(({ body }) =>
-                    getStreamLinks(hal.normalizeResource(body as HalResource)),
-                ),
-            ),
-        });
-    };
-
-    _handlePotentialStreamIdClose = () =>
-        this.setState({
-            open: false,
-        });
-
-    _renderNode = ({
-        depth,
-        name,
-        data,
-        isNonenumerable,
-        ...props
-    }: NodeRendererProps & { children?: ReactNode }) =>
-        depth === 0 ? (
-            <ObjectRootLabel name={name} data={{}} {...props} />
-        ) : isPotentialStreamId(data) ? (
-            <span>
-                <ObjectName name={name} dimmed={isNonenumerable} />
-                <span>: </span>
-                <a
-                    className={this.props.classes.streamId}
-                    onClick={e => this._handlePotentialStreamIdClick(e, data)}
-                >
-                    {data}
-                </a>
-            </span>
-        ) : (
-            <ObjectLabel
-                name={name}
-                data={props.children ? {} : data}
-                isNonenumerable={isNonenumerable}
-                {...props}
-            />
-        );
-
-    render() {
-        const { json, classes } = this.props;
-        const { streams, loading, open } = this.state;
-
-        return (
-            <div className={classes.drawerPaper}>
-                <Inspector
-                    data={json}
-                    expandLevel={32}
-                    nodeRenderer={this._renderNode}
-                />
-                <Drawer
-                    variant={'temporary'}
-                    open={open}
-                    onClose={this._handlePotentialStreamIdClose}
-                    anchor={'right'}
-                    classes={{
-                        paper: classes.drawerPaper,
-                    }}
-                >
-                    <StreamBrowser streams={streams} loading={loading} />
-                </Drawer>
-            </div>
-        );
-    }
-} as ComponentType<StreamMessageJsonProps & HalResource>);
-
 interface StreamMessageTabsState {
     value: number;
 }
@@ -231,7 +72,6 @@ interface StreamMessageTabsProps {
     };
 }
 
-// tslint:disable-next-line:max-classes-per-file
 class StreamMessageTabs extends PureComponent<
     StreamMessageTabsProps & HalResource,
     StreamMessageTabsState
@@ -284,12 +124,8 @@ class StreamMessageTabs extends PureComponent<
                     </Tabs>
                 </CardActions>
                 <CardContent>
-                    {value === 0 && (
-                        <StreamMessageJson json={payload} {...props} />
-                    )}
-                    {value === 1 && (
-                        <StreamMessageJson json={metadata} {...props} />
-                    )}
+                    {value === 0 && <JsonViewer json={payload} {...props} />}
+                    {value === 1 && <JsonViewer json={metadata} {...props} />}
                 </CardContent>
             </Card>
         );

src/stream-store/Viewer/HalViewer/StreamMetadata.tsx

@@ -1,13 +1,6 @@
-import {
-    ExpansionPanel,
-    ExpansionPanelDetails,
-    ExpansionPanelSummary,
-    Typography,
-} from '@material-ui/core';
-import React, { CSSProperties, PureComponent, StatelessComponent } from 'react';
+import React, { CSSProperties, StatelessComponent } from 'react';
 import { Observable as obs } from 'rxjs';
 import { Hyperlink } from '../../../components';
-import { Code } from '../../../components/Icons';
 import {
     Table,
     TableBody,
@@ -19,6 +12,7 @@ import { connect, createState } from '../../../reactive';
 import { HalLinks, HalResource } from '../../../types';
 import rels from '../../rels';
 import store from '../../store';
+import { JsonViewer } from './components';
 import { HalViewerProps } from './types';
 
 const metadata$ = store.hal$.body$.map(metadata => metadata);
@@ -81,44 +75,6 @@ const StreamMetadataDetails: StatelessComponent<StreamMetadataDetailsProps> = ({
     </TableRow>
 );
 
-interface StreamMetadataJsonProps {
-    metadataJson: any;
-}
-
-interface StreamMetadataJsonState {
-    expanded: boolean;
-}
-class StreamMetadataJson extends PureComponent<
-    StreamMetadataJsonProps,
-    StreamMetadataJsonState
-> {
-    state = {
-        expanded: true,
-    };
-
-    _handleClick = () => {
-        const { expanded } = this.state;
-        this.setState({
-            expanded: !expanded,
-        });
-    };
-
-    render() {
-        const { metadataJson } = this.props;
-        const { expanded } = this.state;
-        return (
-            <ExpansionPanel expanded={expanded} onClick={this._handleClick}>
-                <ExpansionPanelSummary expandIcon={<Code />}>
-                    <Typography variant={'h6'}>{'Metadata'}</Typography>
-                </ExpansionPanelSummary>
-                <ExpansionPanelDetails>
-                    <pre>{JSON.stringify(metadataJson, null, 4)}</pre>
-                </ExpansionPanelDetails>
-            </ExpansionPanel>
-        );
-    }
-}
-
 const StreamMetadata: StatelessComponent<
     StreamMetadataState & HalViewerProps
 > = ({ metadata }) => (
@@ -131,7 +87,7 @@ const StreamMetadata: StatelessComponent<
                 <StreamMetadataDetails {...metadata} />
             </TableBody>
         </Table>
-        <StreamMetadataJson metadataJson={metadata.metadataJson} />
+        <JsonViewer json={metadata.metadataJson} />
     </section>
 );