migrated all the viewers

views that view a single resource are broken atm

Author: thefringeninja

src/components/HyperMediaControls/Dialog.tsx

@@ -8,11 +8,7 @@ import {
     withStyles,
     WithStyles,
 } from '@material-ui/core';
-import React, {
-    FormEventHandler,
-    PureComponent,
-    StatelessComponent,
-} from 'react';
+import React, { PureComponent, StatelessComponent } from 'react';
 
 import { SlideProps } from '@material-ui/core/Slide';
 import { HalLink } from '../../types';

src/components/HyperMediaControls/HelpButton.tsx

@@ -5,7 +5,7 @@ import {
     WithStyles,
     withStyles,
 } from '@material-ui/core';
-import React, { PureComponent, ReactNode } from 'react';
+import React, { ComponentType, PureComponent, ReactNode } from 'react';
 import Remarkable from 'react-remarkable';
 import uriTemplate from 'uri-template';
 import { HalLink } from '../../types';
@@ -33,7 +33,7 @@ interface DocumentationProps {
     readonly onClose: () => void;
 }
 
-const Documentation = withStyles(theme => ({
+const Documentation: ComponentType<DocumentationProps> = withStyles(theme => ({
     drawerPaper: {
         padding: theme.spacing.unit * 2,
         width: '45%',

src/components/HyperMediaControls/index.tsx

@@ -1,29 +1,34 @@
 import { Card, CardActions } from '@material-ui/core';
-import React, { StatelessComponent } from 'react';
+import { JSONSchema7 } from 'json-schema';
+import React, { ComponentType, StatelessComponent } from 'react';
+import { Observable } from 'rxjs';
 import { connect, createState } from '../../reactive';
 import { navigation, rels, store } from '../../stream-store';
-import { HalLinks } from '../../types';
+import { HalLinks, HalResource } from '../../types';
 import FormButton from './FormButton';
 import LinkButton from './LinkButton';
 
 const isNotSelf = (rel: string, links: HalLinks): boolean =>
     links[rels.self] && links[rel][0].href !== links[rels.self][0].href;
 
-const state$ = createState(store.url$.map(href => ['href', () => href]));
+interface HyperMediaControlsState {
+    href: string;
+}
+
+const state$ = createState<HyperMediaControlsState>(
+    store.url$.map(href => ['href', () => href]),
+    Observable.of<HyperMediaControlsState>({ href: '' }),
+);
 
 interface HyperMediaControlsProps {
     actions: any;
-    href: string;
     links: HalLinks;
-    forms: { [rel: string]: any };
+    forms: { [rel: string]: HalResource & JSONSchema7 };
 }
 
-const HyperMediaControls: StatelessComponent<HyperMediaControlsProps> = ({
-    forms,
-    href,
-    actions,
-    links,
-}) => (
+const HyperMediaControls: StatelessComponent<
+    HyperMediaControlsProps & HyperMediaControlsState
+> = ({ actions, forms, href, links }) => (
     <Card>
         <CardActions>
             <div>
@@ -54,4 +59,6 @@ const HyperMediaControls: StatelessComponent<HyperMediaControlsProps> = ({
     </Card>
 );
 
-export default connect(state$)(HyperMediaControls);
+export default connect(state$)(HyperMediaControls) as ComponentType<
+    HyperMediaControlsProps
+>;

src/components/Notifications.tsx

@@ -214,4 +214,4 @@ const Notifications: StatelessComponent<NotificationsState> = ({
     </div>
 );
 
-export default connect(state$)(Notifications);
+export default connect<{}, NotificationsState>(state$)(Notifications);

src/components/RelIcon.ts

@@ -1,5 +1,5 @@
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import { createElement, ReactElement } from 'react';
+import { createElement, ReactElement, StatelessComponent } from 'react';
 import { rels } from '../stream-store';
 import {
     ChevronLeft,
@@ -33,11 +33,13 @@ const fontIconByRel = {
     [rels.curies]: Help,
 };
 
-interface RelIconProps extends SvgIconProps {
+interface RelIconProps {
     rel: string;
 }
 
-const RelIcon = ({ rel, ...props }: RelIconProps): ReactElement<SvgIconProps> =>
-    createElement(fontIconByRel[rel] || SqlStreamStore, props);
+const RelIcon: StatelessComponent<RelIconProps & SvgIconProps> = ({
+    rel,
+    ...props
+}) => createElement(fontIconByRel[rel] || SqlStreamStore, props);
 
 export default RelIcon;

src/components/StreamBrowser.tsx

@@ -51,4 +51,4 @@ const StreamBrowser: ComponentType<StreamBrowserProps> = withStyles(styles)(
     ),
 );
 
-export default StreamBrowser;
+export default StreamBrowser as ComponentType<StreamBrowserProps>;

src/components/StripeyTable/index.tsx

@@ -8,15 +8,16 @@ import {
     WithStyles,
     withStyles,
 } from '@material-ui/core';
+import { TableCellProps } from '@material-ui/core/TableCell';
 import { TableRowProps } from '@material-ui/core/TableRow';
-import React from 'react';
+import React, { ComponentType } from 'react';
 
 const TableCell = withStyles(theme => ({
     head: {
         backgroundColor: theme.palette.primary.dark,
         color: theme.palette.common.white,
     },
-}))(MaterialTableCell);
+}))(MaterialTableCell) as ComponentType<TableCellProps>;
 
 const tableRowStyles = theme => ({
     row: {
@@ -33,6 +34,6 @@ const TableRow = withStyles(tableRowStyles)(
     }: TableRowProps & WithStyles<typeof tableRowStyles>) => (
         <MaterialTableRow {...props} className={classes.row} />
     ),
-);
+) as ComponentType<TableRowProps>;
 
 export { Table, TableBody, TableHead, TableCell, TableRow, TableFooter };

src/index.tsx

@@ -2,9 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import SqlStreamStoreBrowser from './SqlStreamStoreBrowser';
 
-const anyWindow = window as any;
-anyWindow.SqlStreamStoreBrowser = SqlStreamStoreBrowser;
-anyWindow.ReactDOM = ReactDOM;
-anyWindow.React = React;
+declare global {
+    interface Window {
+        React: typeof React;
+        ReactDOM: typeof ReactDOM;
+        SqlStreamStoreBrowser: typeof SqlStreamStoreBrowser;
+    }
+}
+
+window.SqlStreamStoreBrowser = SqlStreamStoreBrowser;
+window.ReactDOM = ReactDOM;
+window.React = React;
 
 export default SqlStreamStoreBrowser;

src/reactive/index.ts

@@ -4,9 +4,9 @@ import { Observable, ReplaySubject, Subscription } from 'rxjs';
 
 export const createAction = <T>() => new ReplaySubject<T>(1);
 
-export const createState = <TState>(
+export const createState = <TState extends object>(
     reducer$,
-    initialState$ = Observable.of({}),
+    initialState$: Observable<TState>,
 ): Observable<TState> =>
     initialState$
         .merge(reducer$)
@@ -20,7 +20,11 @@ export const createState = <TState>(
                 } as TState),
         )
         .publishReplay(1)
-        .refCount() as Observable<TState>;
+        .refCount();
+
+const createLogger = <TState>() => (state: TState) =>
+// tslint:disable-next-line:no-console
+    console.debug(state, typeof state);
 
 export const connect = <TProps extends object, TState extends object>(
     state$: Observable<TState>,
@@ -31,8 +35,9 @@ export const connect = <TProps extends object, TState extends object>(
         subscription: Subscription;
 
         componentWillMount() {
-            this.subscription = state$.subscribe(s => {
-                this.setState(s || {});
+            const log = createLogger<TState>();
+            this.subscription = state$.do(log).subscribe(s => {
+                this.setState(s);
             });
         }