Add HAL Typescript Types and Convert HyperMedia Controls to TSX

package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts-ts start",
-    "build": "prettier --list-different \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\" && react-scripts-ts build",
+    "build": "prettier --list-different \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\" && tslint --project ./ && react-scripts-ts build",
     "eject": "react-scripts-ts eject",
-    "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\""
+    "format": "prettier --write \"src/**/*.js\" \"src/**/*.ts\" \"src/**/*.tsx\" && tslint --project ./ --fix"
   },
   "main": "src/index.tsx",
   "private": false,

src/components/HyperMediaControls/Dialog.js → src/components/HyperMediaControls/Dialog.tsx

@@ -1,29 +1,48 @@
-import React, { PureComponent } from 'react';
 import {
     Button,
     Dialog,
-    DialogTitle,
     DialogActions,
     DialogContent,
+    DialogTitle,
     Slide,
     withStyles,
+    WithStyles,
 } from '@material-ui/core';
+import React, {
+    FormEventHandler,
+    PureComponent,
+    StatelessComponent,
+} from 'react';
 
+import { SlideProps } from '@material-ui/core/Slide';
+import { HalLink } from '../../types';
 import RelIcon from '../RelIcon';
-import RelButton from './RelButton';
 import HelpButton from './HelpButton';
+import RelButton from './RelButton';
 const styles = theme => ({
     button: {
         margin: theme.spacing.unit,
     },
 });
 
-const SlideUp = props => <Slide direction={'up'} {...props} />;
+const SlideUp: StatelessComponent<SlideProps> = props => (
+    <Slide direction={'up'} {...props} />
+);
+
+const isStandardRel = (rel: string) => rel.indexOf(':') === -1;
 
-const isStandardRel = rel => rel.indexOf(':') === -1;
+interface HyperMediaDialogProps {
+    rel: string;
+    title?: string;
+    curies: HalLink[];
+    onSubmit: () => void;
+}
 
 export default withStyles(styles)(
-    class HyperMediaDialog extends PureComponent {
+    class HyperMediaDialog extends PureComponent<
+        HyperMediaDialogProps & WithStyles<typeof styles>,
+        { open: boolean }
+    > {
         state = {
             open: false,
         };
@@ -49,18 +68,16 @@ export default withStyles(styles)(
         };
 
         render() {
-            const { label, rel, title, classes, children, curies } = this.props;
+            const { rel, title, classes, children, curies } = this.props;
             const { open } = this.state;
 
             return (
                 <span>
                     <RelButton
-                        label={label}
                         onClick={this._onOpen}
                         className={classes.button}
                         rel={rel}
                         title={title}
-                        color={'action'}
                     />
                     <Dialog
                         open={open}

src/components/HyperMediaControls/FormButton.js → src/components/HyperMediaControls/FormButton.tsx

@@ -1,13 +1,14 @@
 import React, { PureComponent } from 'react';
 import { SchemaForm } from 'react-schema-form';
+import { HalLink, NavigatableProps } from '../../types';
 import { withAuthorization } from '../AuthorizationProvider';
 import Dialog from './Dialog';
-import UuidField from './UuidField';
 import TextAreaField from './TextAreaField';
+import UuidField from './UuidField';
 
 const mapper = {
-    uuid: UuidField,
     textarea: TextAreaField,
+    uuid: UuidField,
 };
 
 const getValue = value => {
@@ -22,19 +23,39 @@ const getValue = value => {
     return value;
 };
 
-class FormButton extends PureComponent {
-    state = {};
+interface FormButtonProps {
+    rel: string;
+    link: HalLink;
+    actions;
+    curies: HalLink[];
+    schema;
+    title: string;
+}
+
+interface FormButtonState {
+    model: {
+        [key: string]: any;
+    };
+}
+
+class FormButton extends PureComponent<
+    FormButtonProps & NavigatableProps,
+    FormButtonState
+> {
+    state = {
+        model: {},
+    };
     _onSubmit = () => {
         const { rel, link, actions, authorization } = this.props;
         const { model: body } = this.state;
 
         if (actions[rel]) {
             actions[rel].request.next({
                 body,
-                link,
                 headers: {
                     authorization,
                 },
+                link,
             });
         }
     };
@@ -51,11 +72,10 @@ class FormButton extends PureComponent {
     };
 
     render() {
-        const { schema, rel, title, curies } = this.props;
+        const { schema, rel, curies } = this.props;
         const { model } = this.state;
         return (
             <Dialog
-                label={title}
                 rel={rel}
                 title={schema.title}
                 curies={curies}

src/components/HyperMediaControls/HelpButton.js → src/components/HyperMediaControls/HelpButton.tsx

@@ -1,13 +1,19 @@
-import React, { PureComponent } from 'react';
-import { Button, Drawer, withStyles } from '@material-ui/core';
+import {
+    Button,
+    Drawer,
+    Typography,
+    WithStyles,
+    withStyles,
+} from '@material-ui/core';
+import React, { PureComponent, ReactNode } from 'react';
 import Remarkable from 'react-remarkable';
 import uriTemplate from 'uri-template';
-import { Help } from '../Icons';
-import { withAuthorization } from '../AuthorizationProvider';
+import { HalLink } from '../../types';
 import { http } from '../../utils';
-import Typography from '@material-ui/core/es/Typography/Typography';
+import { withAuthorization } from '../AuthorizationProvider';
+import { Help } from '../Icons';
 
-const getCurie = (rel, curies) => {
+const getCurie = (rel: string, curies: HalLink[]): HalLink => {
     const [prefix, rest] = rel.split(':', 2);
 
     return !rest || rest.indexOf(':') !== -1
@@ -22,62 +28,90 @@ const getCurie = (rel, curies) => {
               }))[0] || { href: rel };
 };
 
+interface DocumentationProps {
+    readonly open: boolean;
+    readonly onClose: () => void;
+}
+
 const Documentation = withStyles(theme => ({
     drawerPaper: {
-        width: '45%',
         padding: theme.spacing.unit * 2,
+        width: '45%',
     },
-}))(({ open, children, onClose, classes }) => (
-    <Drawer
-        open={open}
-        onClose={onClose}
-        anchor={'right'}
-        classes={{
-            paper: classes.drawerPaper,
-        }}
-    >
-        <Typography>
-            <Remarkable
-                options={{
-                    typographer: true,
-                }}
-            >
-                {children}
-            </Remarkable>
-        </Typography>
-    </Drawer>
-));
+}))(
+    ({
+        open,
+        children,
+        onClose,
+        classes,
+    }: DocumentationProps & WithStyles & { children: ReactNode }) => (
+        <Drawer
+            open={open}
+            onClose={onClose}
+            anchor={'right'}
+            classes={{
+                paper: classes.drawerPaper,
+            }}
+        >
+            <Typography>
+                <Remarkable
+                    options={{
+                        typographer: true,
+                    }}
+                >
+                    {children}
+                </Remarkable>
+            </Typography>
+        </Drawer>
+    ),
+);
 
-class HelpButton extends PureComponent {
-    state = {
-        open: false,
-        href: null,
-        type: null,
-        disabled: true,
-        documentation: null,
-    };
+interface HelpButtonProps {
+    rel: string;
+    curies: HalLink[];
+    disabled?: boolean;
+    authorization?: string;
+}
+
+interface HelpButtonState extends HalLink {
+    open: boolean;
+    documentation: string;
+    disabled: boolean;
+}
 
-    static getDerivedStateFromProps = ({ rel, curies }, state) => ({
+class HelpButton extends PureComponent<HelpButtonProps, HelpButtonState> {
+    static getDerivedStateFromProps = (
+        { rel, curies }: HelpButtonProps,
+        state: HelpButtonState,
+    ): HelpButtonState => ({
         ...state,
         disabled: false,
         ...getCurie(rel, curies),
     });
+    state = {
+        curies: [],
+        disabled: true,
+        documentation: '',
+        href: '',
+        open: false,
+        type: '',
+    };
 
     _handleOnClick = async () => {
         const { authorization } = this.props;
         const { href, type } = this.state;
         const { body: documentation } = await http.get({
-            link: { href, type },
             headers: { authorization },
+            link: { href, type },
         });
 
         this.setState({
             ...this.state,
-            open: true,
             documentation:
                 typeof documentation === 'string'
                     ? documentation
                     : JSON.stringify(documentation),
+            open: true,
         });
     };
 

src/components/HyperMediaControls/LinkButton.js → src/components/HyperMediaControls/LinkButton.tsx

@@ -1,13 +1,30 @@
-import React, { PureComponent } from 'react';
-import { TextField } from '@material-ui/core';
+import { PropTypes, TextField } from '@material-ui/core';
+import React, { PureComponent, StatelessComponent } from 'react';
 import uriTemplate from 'uri-template';
+import { HalLink, NavigatableProps } from '../../types';
+import { preventDefault } from '../../utils';
 import { withNavigation } from '../NavigationProvider';
 import Dialog from './Dialog';
 import RelButton from './RelButton';
-import { preventDefault } from '../../utils';
+import Color = PropTypes.Color;
+
+interface LinkButtonProps {
+    readonly rel: string;
+    readonly link: HalLink;
+    color: Color;
+}
+
+interface TemplatedLinkButtonProps extends LinkButtonProps {
+    readonly curies: HalLink[];
+}
 
-const TemplatedLinkButton = withNavigation()(
-    class TemplatedLinkButton extends PureComponent {
+const TemplatedLinkButton: StatelessComponent<
+    TemplatedLinkButtonProps
+> = withNavigation()(
+    class extends PureComponent<
+        TemplatedLinkButtonProps & NavigatableProps,
+        { [variable: string]: string }
+    > {
         state = {};
 
         _onChange = variable => ({ target }) =>
@@ -23,7 +40,6 @@ const TemplatedLinkButton = withNavigation()(
 
             return (
                 <Dialog
-                    label={link.title}
                     rel={rel}
                     title={link.title}
                     curies={curies}
@@ -50,20 +66,39 @@ const TemplatedLinkButton = withNavigation()(
     },
 );
 
-const NonTemplatedLinkButton = withNavigation()(
-    ({ link, rel, authorization, onNavigate }) => (
+interface NonTemplatedLinkButtonProps extends LinkButtonProps {
+    readonly title: string;
+}
+
+const NonTemplatedLinkButton: StatelessComponent<
+    NonTemplatedLinkButtonProps
+> = withNavigation()(
+    ({
+        link,
+        rel,
+        authorization,
+        onNavigate,
+    }: NonTemplatedLinkButtonProps & NavigatableProps) => (
         <RelButton
             rel={rel}
             title={link.title}
-            color={'action'}
             onClick={preventDefault(() => onNavigate(link, authorization))}
         />
     ),
 );
 
-export default ({ link, ...props }) =>
+export default ({
+    link,
+    ...props
+}: TemplatedLinkButtonProps | NonTemplatedLinkButtonProps) =>
     link.templated === true ? (
-        <TemplatedLinkButton link={link} {...props} />
+        <TemplatedLinkButton
+            link={link}
+            {...props as TemplatedLinkButtonProps}
+        />
     ) : (
-        <NonTemplatedLinkButton link={link} {...props} />
+        <NonTemplatedLinkButton
+            link={link}
+            {...props as NonTemplatedLinkButtonProps}
+        />
     );