Merge pull request #19 from thefringeninja/no-implicity-any

Set noImplicitAny to true

Author: thefringeninja

.babelrc

@@ -22,12 +22,15 @@
     "@types/react-dom": "^16.0.9",
     "@types/react-tap-event-plugin": "^0.0.30",
     "@types/react-transition-group": "^2.0.14",
+    "@types/remarkable": "^1.7.1",
     "@types/uuid": "^3.4.4",
     "babel-plugin-module-resolver": "3.1.1",
     "prettier": "1.14.2",
     "react-scripts-ts": "3.1.0",
     "source-map-explorer": "1.6.0",
     "tslint-config-prettier": "1.15.0",
+    "tslint-immutable": "4.8.0",
+    "tslint-react": "3.6.0",
     "typescript": "3.1.3",
     "typesync": "0.4.0"
   },

package.json

@@ -1,5 +1,6 @@
 import { AppBar, CssBaseline, Toolbar, Typography } from '@material-ui/core';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import { JSONSchema7 } from 'json-schema';
 import React, { ComponentType } from 'react';
 import { Observable as obs } from 'rxjs';
 import {
@@ -14,13 +15,13 @@ import { SqlStreamStore } from './components/Icons';
 import { connect, createState } from './reactive';
 import { actions, store, Viewer } from './stream-store';
 import theme from './theme';
-import { HalLink, HalLinks } from './types';
+import { AuthorizationProps, HalLink, HalLinks } from './types';
 import { mediaTypes } from './utils';
 
-const getSelfAlias = links =>
+const getSelfAlias = (links: HalLinks) =>
     Object.keys(links)
         .flatMap(rel => links[rel])
-        .filter(({ rel }) => rel.indexOf('streamStore:') === 0)
+        .filter(({ rel }) => rel && rel.indexOf('streamStore:') === 0)
         .filter(
             ({ rel, href }) =>
                 !!links.self.filter(link => link.href === href).length,
@@ -36,20 +37,21 @@ const self$ = store.hal$.links$
 interface SqlStreamStoreBrowserState {
     loading: boolean;
     mediaType: string;
-    links: HalLinks;
+    _links: HalLinks;
     self: HalLink;
+    forms: { [rel: string]: JSONSchema7 };
 }
 const state$ = createState<SqlStreamStoreBrowserState>(
     obs.merge(
         self$.map(self => ['self', () => self]),
-        store.hal$.links$.map(links => ['links', () => links]),
+        store.hal$.links$.map(links => ['_links', () => links]),
         store.hal$.forms$.map(forms => ['forms', () => forms]),
         store.hal$.loading$.map(loading => ['loading', () => loading]),
         store.hal$.mediaType$.map(mediaType => ['mediaType', () => mediaType]),
     ),
     obs.of({
+        _links: {},
         forms: {},
-        links: {},
         loading: false,
         mediaType: mediaTypes.hal,
         self: {
@@ -62,7 +64,7 @@ const onNavigate = (link: HalLink, authorization: string | undefined) =>
     link.href.indexOf('#') === -1 &&
     actions.get.request.next({ link, headers: { authorization } });
 
-const initialNavigation = ({ authorization }) =>
+const initialNavigation = ({ authorization }: AuthorizationProps) =>
     onNavigate(
         { href: window.location.href, type: mediaTypes.any },
         authorization,
@@ -82,29 +84,31 @@ const Hero = () => (
 const SqlStreamStoreBrowser: ComponentType<
     SqlStreamStoreBrowserState
 > = withAuthorization()(
-    mount<SqlStreamStoreBrowserState & { authorization: string | undefined }>(
-        initialNavigation,
-    )(({ loading, ...props }) => (
-        <MuiThemeProvider theme={theme}>
-            <div>
-                <CssBaseline />
-                <Hero />
-                <Loading open={loading} />
-                <NavigationProvider onNavigate={onNavigate}>
-                    <Viewer {...props} />
-                    <Notifications />
-                </NavigationProvider>
-            </div>
-        </MuiThemeProvider>
-    )),
+    mount<SqlStreamStoreBrowserState & AuthorizationProps>(initialNavigation)(
+        ({ loading, ...props }) => (
+            <MuiThemeProvider theme={theme}>
+                <div>
+                    <CssBaseline />
+                    <Hero />
+                    <Loading open={loading} />
+                    <NavigationProvider onNavigate={onNavigate}>
+                        <Viewer {...props} />
+                        <Notifications />
+                    </NavigationProvider>
+                </div>
+            </MuiThemeProvider>
+        ),
+    ),
 );
 
 const AuthorizedSqlStreamStoreBrowser: ComponentType<
-    SqlStreamStoreBrowserState & { authorization: string | undefined }
+    SqlStreamStoreBrowserState & AuthorizationProps
 > = ({ authorization, ...props }) => (
     <AuthorizationProvider authorization={authorization}>
         <SqlStreamStoreBrowser {...props} />
     </AuthorizationProvider>
 );
 
-export default connect(state$)(AuthorizedSqlStreamStoreBrowser);
+export default connect<SqlStreamStoreBrowserState, AuthorizationProps>(state$)(
+    AuthorizedSqlStreamStoreBrowser,
+);

src/SqlStreamStoreBrowser.tsx

@@ -1,21 +1,25 @@
-import React, { ReactNode, StatelessComponent } from 'react';
+import React, { ComponentType, ReactNode, StatelessComponent } from 'react';
+import { AuthorizationProps } from '../types';
 import getDisplayName from './getDisplayName';
 
 const { Consumer, Provider } = React.createContext<string | undefined>(
     undefined,
 );
 
-const AuthorizationProvider: StatelessComponent<{
-    authorization: string | undefined;
-    children: ReactNode;
-}> = ({ authorization, children }) => (
+const AuthorizationProvider: StatelessComponent<
+    AuthorizationProps & {
+        children: ReactNode;
+    }
+> = ({ authorization, children }) => (
     <Provider value={authorization}>{children}</Provider>
 );
 
 export default AuthorizationProvider;
 
-const withAuthorization = () => WrappedComponent => {
-    const Component = props => (
+const withAuthorization = () => <T extends object>(
+    WrappedComponent: ComponentType<T & AuthorizationProps>,
+) => {
+    const Component = (props: T) => (
         <Consumer>
             {authorization => (
                 <WrappedComponent {...props} authorization={authorization} />
@@ -26,7 +30,7 @@ const withAuthorization = () => WrappedComponent => {
         'WithAuthorization',
         WrappedComponent,
     );
-    return Component;
+    return Component as ComponentType<T>;
 };
 
 export { withAuthorization };

src/components/AuthorizationProvider.tsx

@@ -5,17 +5,18 @@ import {
     DialogContent,
     DialogTitle,
     Slide,
+    Theme,
     withStyles,
     WithStyles,
 } from '@material-ui/core';
-import React, { PureComponent, StatelessComponent } from 'react';
-
 import { SlideProps } from '@material-ui/core/Slide';
+import React, { FormEvent, PureComponent, StatelessComponent } from 'react';
 import { HalLink } from '../../types';
 import RelIcon from '../RelIcon';
 import HelpButton from './HelpButton';
 import RelButton from './RelButton';
-const styles = theme => ({
+
+const styles = (theme: Theme) => ({
     button: {
         margin: theme.spacing.unit,
     },
@@ -53,7 +54,7 @@ export default withStyles(styles)(
                 open: false,
             });
 
-        _onSubmit = e => {
+        _onSubmit = (e: FormEvent) => {
             const { onSubmit } = this.props;
 
             e.preventDefault();

src/components/HyperMediaControls/Dialog.tsx

@@ -1,6 +1,7 @@
-import React, { PureComponent } from 'react';
+import { JSONSchema7 } from 'json-schema';
+import React, { FormEvent, PureComponent } from 'react';
 import { SchemaForm } from 'react-schema-form';
-import { HalLink, NavigatableProps } from '../../types';
+import { AuthorizationProps, FormActions, HalLink } from '../../types';
 import { withAuthorization } from '../AuthorizationProvider';
 import Dialog from './Dialog';
 import TextAreaField from './TextAreaField';
@@ -11,12 +12,12 @@ const mapper = {
     uuid: UuidField,
 };
 
-const getValue = value => {
+const getValue = (value: FormEvent<HTMLInputElement>) => {
     if (typeof value === 'object') {
         try {
-            return JSON.parse(value.target.value);
+            return JSON.parse(value.currentTarget.value);
         } catch (e) {
-            return value.target.value;
+            return value.currentTarget.value;
         }
     }
 
@@ -26,10 +27,9 @@ const getValue = value => {
 interface FormButtonProps {
     rel: string;
     link: HalLink;
-    actions;
+    actions: FormActions;
     curies: HalLink[];
-    schema;
-    title: string;
+    schema: JSONSchema7;
 }
 
 interface FormButtonState {
@@ -39,7 +39,7 @@ interface FormButtonState {
 }
 
 class FormButton extends PureComponent<
-    FormButtonProps & NavigatableProps,
+    FormButtonProps & AuthorizationProps,
     FormButtonState
 > {
     state = {
@@ -60,7 +60,7 @@ class FormButton extends PureComponent<
         }
     };
 
-    _onModelChange = (key, value) => {
+    _onModelChange = (key: string, value: FormEvent<HTMLInputElement>) => {
         const { model, ...state } = this.state;
         this.setState({
             ...state,

src/components/HyperMediaControls/FormButton.tsx

@@ -17,15 +17,15 @@ const getCurie = (rel: string, curies: HalLink[]): HalLink => {
     const [prefix, rest] = rel.split(':', 2);
 
     return !rest || rest.indexOf(':') !== -1
-        ? { href: rel }
+        ? { href: rel, rel }
         : curies
               .filter(({ name }) => name === prefix)
               .map(({ href, ...link }) => ({
                   ...link,
                   href: uriTemplate
                       .parse(decodeURI(href))
                       .expand({ rel: rest }),
-              }))[0] || { href: rel };
+              }))[0] || { href: rel, rel };
 };
 
 interface DocumentationProps {
@@ -88,8 +88,7 @@ class HelpButton extends PureComponent<HelpButtonProps, HelpButtonState> {
         disabled: false,
         ...getCurie(rel, curies),
     });
-    state = {
-        curies: [],
+    state: HelpButtonState = {
         disabled: true,
         documentation: '',
         href: '',

src/components/HyperMediaControls/HelpButton.tsx

@@ -1,5 +1,5 @@
 import { PropTypes, TextField } from '@material-ui/core';
-import React, { PureComponent, StatelessComponent } from 'react';
+import React, { ComponentType, FormEventHandler, PureComponent } from 'react';
 import uriTemplate from 'uri-template';
 import { HalLink, NavigatableProps } from '../../types';
 import { preventDefault } from '../../utils';
@@ -18,19 +18,23 @@ interface TemplatedLinkButtonProps extends LinkButtonProps {
     readonly curies: HalLink[];
 }
 
-const TemplatedLinkButton: StatelessComponent<
+const TemplatedLinkButton: ComponentType<
     TemplatedLinkButtonProps
-> = withNavigation()(
+> = withNavigation<TemplatedLinkButtonProps>()(
     class extends PureComponent<
         TemplatedLinkButtonProps & NavigatableProps,
         { [variable: string]: string }
     > {
         state = {};
 
-        _onChange = variable => ({ target }) =>
+        _onChange = (
+            variable: string,
+        ): FormEventHandler<
+            HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement
+        > => ({ currentTarget }) =>
             this.setState({
                 ...this.state,
-                [variable]: target.value,
+                [variable]: currentTarget.value,
             });
 
         render() {
@@ -70,9 +74,9 @@ interface NonTemplatedLinkButtonProps extends LinkButtonProps {
     readonly title: string;
 }
 
-const NonTemplatedLinkButton: StatelessComponent<
+const NonTemplatedLinkButton: ComponentType<
     NonTemplatedLinkButtonProps
-> = withNavigation()(
+> = withNavigation<NonTemplatedLinkButtonProps>()(
     ({
         link,
         rel,

src/components/HyperMediaControls/LinkButton.tsx

@@ -1,7 +1,6 @@
 import { Button } from '@material-ui/core';
 import { ButtonProps } from '@material-ui/core/Button';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import React, { ReactNode, StatelessComponent } from 'react';
+import React, { StatelessComponent } from 'react';
 import RelIcon from '../RelIcon';
 
 interface RelButtonProps {

src/components/HyperMediaControls/RelButton.tsx

@@ -1,9 +1,11 @@
 import { TextField } from '@material-ui/core';
-import React, { ComponentType, StatelessComponent } from 'react';
-import { ComposedComponent } from 'react-schema-form';
-import { FormInputProps } from './reactSchemaForms';
+import React, { StatelessComponent } from 'react';
+import {
+    ComposedComponent,
+    ReactSchemaFormInputProps,
+} from 'react-schema-form';
 
-const TextAreaField: StatelessComponent<FormInputProps> = ({
+const TextAreaField: StatelessComponent<ReactSchemaFormInputProps> = ({
     form,
     error,
     onChangeValidate,
@@ -27,6 +29,4 @@ const TextAreaField: StatelessComponent<FormInputProps> = ({
     </div>
 );
 
-export default ComposedComponent.default(TextAreaField) as ComponentType<
-    FormInputProps
->;
+export default ComposedComponent.default(TextAreaField);