Merge pull request #56 from thefringeninja/jason

No More Strings for JSON

Author: thefringeninja

src/components/HyperMediaControls/FormButton.tsx

@@ -12,18 +12,6 @@ const mapper = {
     uuid: UuidField,
 };
 
-const getValue = (value: FormEvent<HTMLInputElement>) => {
-    if (typeof value === 'object') {
-        try {
-            return JSON.parse(value.currentTarget.value);
-        } catch (e) {
-            return value.currentTarget.value;
-        }
-    }
-
-    return value;
-};
-
 interface FormButtonProps {
     rel: string;
     link: HalLink;
@@ -66,7 +54,7 @@ class FormButton extends PureComponent<
             ...state,
             model: {
                 ...model,
-                [key]: getValue(value),
+                [key]: value,
             },
         });
     };

src/components/HyperMediaControls/TextAreaField.tsx

@@ -1,32 +1,79 @@
 import { TextField } from '@material-ui/core';
-import React, { StatelessComponent } from 'react';
+import React, { ChangeEvent } from 'react';
 import {
     ComposedComponent,
     ReactSchemaFormInputProps,
 } from 'react-schema-form';
 
-const TextAreaField: StatelessComponent<ReactSchemaFormInputProps> = ({
-    form,
-    error,
-    onChangeValidate,
-    value,
-}) => (
-    <div className={form.htmlClass}>
-        <TextField
-            type={form.type}
-            label={form.title}
-            placeholder={form.placeholder}
-            helperText={error || form.description}
-            error={!!error}
-            onChange={onChangeValidate}
-            value={value}
-            disabled={form.readonly}
-            fullWidth
-            multiline
-            rows={15}
-            rowsMax={15}
-        />
-    </div>
-);
+const getDisplayValue = (value: object | string): string =>
+    typeof value === 'string' ? value : JSON.stringify(value);
+
+class TextAreaField extends React.PureComponent<
+    ReactSchemaFormInputProps<HTMLTextAreaElement>
+> {
+    constructor(props: ReactSchemaFormInputProps<HTMLTextAreaElement>) {
+        super(props);
+    }
+
+    _onChangeValidate = (
+        e: ChangeEvent<HTMLTextAreaElement>,
+        v?: any,
+    ): void => {
+        const { form, onChangeValidate } = this.props;
+
+        const tryParseJson = (value: string): string | object => {
+            try {
+                return JSON.parse(value);
+            } catch (e) {
+                return value;
+            }
+        };
+
+        onChangeValidate(
+            {
+                ...e,
+                currentTarget: {
+                    ...e.currentTarget,
+                    // @ts-ignore
+                    value:
+                        form.schema.type === 'object'
+                            ? tryParseJson(e.target.value)
+                            : e.target.value,
+                },
+                target: {
+                    // @ts-ignore
+                    value:
+                        form.schema.type === 'object'
+                            ? tryParseJson(e.target.value)
+                            : e.target.value,
+                },
+            },
+            v,
+        );
+    };
+
+    render() {
+        const { form, error, value } = this.props;
+
+        return (
+            <div className={form.htmlClass}>
+                <TextField
+                    type={form.type}
+                    label={form.title}
+                    placeholder={form.placeholder}
+                    helperText={error || form.description}
+                    error={!!error}
+                    onChange={this._onChangeValidate}
+                    value={getDisplayValue(value)}
+                    disabled={form.readonly}
+                    fullWidth
+                    multiline
+                    rows={15}
+                    rowsMax={15}
+                />
+            </div>
+        );
+    }
+}
 
 export default ComposedComponent(TextAreaField);

src/components/HyperMediaControls/UuidField.tsx

@@ -7,8 +7,10 @@ import {
 } from 'react-schema-form';
 import uuid from 'uuid';
 
-class UuidField extends React.PureComponent<ReactSchemaFormInputProps> {
-    constructor(props: ReactSchemaFormInputProps) {
+class UuidField extends React.PureComponent<
+    ReactSchemaFormInputProps<HTMLInputElement>
+> {
+    constructor(props: ReactSchemaFormInputProps<HTMLInputElement>) {
         super(props);
 
         const { model, form, setDefault } = this.props;

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

@@ -16,18 +16,10 @@ import { HalResource } from 'types';
 import { JsonViewer, StreamHeader, StreamMessageDetails } from './components';
 import { HalViewerProps } from './types';
 
-const tryParseJson = (payload: string): object => {
-    try {
-        return JSON.parse(payload);
-    } catch (e) {
-        return {};
-    }
-};
-
 const message$ = store.hal$.body$.map(({ payload, metadata, ...body }) => ({
     ...body,
-    metadata: tryParseJson(metadata),
-    payload: tryParseJson(payload),
+    metadata,
+    payload,
 }));
 
 interface StreamMessageState extends HalResource {

src/types/react-schema-form.d.ts

@@ -1,21 +1,29 @@
 declare module 'react-schema-form' {
     import { JSONSchema7 } from 'json-schema';
-    import { ComponentType, FormEventHandler } from 'react';
+    import {
+        ChangeEvent,
+        ComponentType,
+        FormEvent,
+        FormEventHandler,
+    } from 'react';
 
     interface Form {
         description: string;
         htmlClass: string;
         key: string;
         placeholder: string;
         readonly: boolean;
+        schema: JSONSchema7;
         title: string;
         type: string;
     }
 
-    export interface ReactSchemaFormInputProps {
+    export interface ReactSchemaFormInputProps<
+        T extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    > {
         error: string;
         form: Form;
-        onChangeValidate: FormEventHandler;
+        onChangeValidate: (e: ChangeEvent<T>, v?: any) => void;
         model: { [key: string]: any };
         onChange: (key: string, value: string) => void;
         setDefault: (
@@ -42,7 +50,13 @@ declare module 'react-schema-form' {
 
     export const SchemaForm: ComponentType<ReactSchemaFormProps>;
 
-    export const ComposedComponent: <T>(
+    export const ComposedComponent: <
+        T,
+        TElement extends
+            | HTMLInputElement
+            | HTMLTextAreaElement
+            | HTMLSelectElement
+    >(
         component: ComponentType<T>,
-    ) => ComponentType<ReactSchemaFormInputProps>;
+    ) => ComponentType<ReactSchemaFormInputProps<TElement>>;
 }