the many anys are gone!

Author: thefringeninja

src/components/HyperMediaControls/index.tsx

@@ -1,6 +1,6 @@
 import { Card, CardActions } from '@material-ui/core';
 import { JSONSchema7 } from 'json-schema';
-import React, { ComponentType, StatelessComponent } from 'react';
+import React, { ComponentType } from 'react';
 import { Observable } from 'rxjs';
 import { connect, createState } from '../../reactive';
 import { navigation, rels, store } from '../../stream-store';
@@ -59,4 +59,6 @@ const HyperMediaControls: ComponentType<
     </Card>
 );
 
-export default connect(state$)(HyperMediaControls);
+export default connect<HyperMediaControlsProps, HyperMediaControlsState>(
+    state$,
+)(HyperMediaControls);

src/components/StripeyTable/index.tsx

@@ -9,16 +9,15 @@ import {
     WithStyles,
     withStyles,
 } from '@material-ui/core';
-import { TableCellProps } from '@material-ui/core/TableCell';
 import { TableRowProps } from '@material-ui/core/TableRow';
-import React, { ComponentType } from 'react';
+import React from 'react';
 
 const TableCell = withStyles(theme => ({
     head: {
         backgroundColor: theme.palette.primary.dark,
         color: theme.palette.common.white,
     },
-}))(MaterialTableCell) as ComponentType<TableCellProps>;
+}))(MaterialTableCell);
 
 const tableRowStyles = (theme: Theme) => ({
     row: {
@@ -35,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/stream-store/Viewer/HalViewer/Home.tsx

@@ -73,10 +73,13 @@ const Info: StatelessComponent<InfoState> = ({ provider, versions }) => (
     </Table>
 );
 
-const Index: StatelessComponent<IndexState> = ({ provider, versions }) => (
+const Index: ComponentType<IndexState & HalViewerProps> = ({
+    provider,
+    versions,
+}) => (
     <section>
         <Info provider={provider} versions={versions} />
     </section>
 );
 
-export default connect(state$)(Index) as ComponentType<HalViewerProps>;
+export default connect<HalViewerProps, IndexState>(state$)(Index);

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

@@ -92,10 +92,12 @@ interface StreamState {
     messages: Array<Message & HalResource>;
 }
 
-const Stream: StatelessComponent<StreamState> = ({ messages = [] }) => (
+const Stream: ComponentType<StreamState & HalViewerProps> = ({
+    messages = [],
+}) => (
     <section>
         <Messages messages={messages} />
     </section>
 );
 
-export default connect(state$)(Stream) as ComponentType<HalViewerProps>;
+export default connect<HalViewerProps, StreamState>(state$)(Stream);

…-store/Viewer/HalViewer/StreamBrowser.ts …store/Viewer/HalViewer/StreamBrowser.tsxsrc/stream-store/Viewer/HalViewer/StreamBrowser.ts renamed to src/stream-store/Viewer/HalViewer/StreamBrowser.tsx src/stream-store/Viewer/HalViewer/StreamBrowser.ts renamed to src/stream-store/Viewer/HalViewer/StreamBrowser.tsx

@@ -1,6 +1,6 @@
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 import { Observable as obs } from 'rxjs';
-import StreamBrowser from '../../../components/StreamBrowser';
+import { StreamBrowser } from '../../../components';
 import { connect, createState } from '../../../reactive';
 import { HalResource } from '../../../types';
 import rels from '../../rels';
@@ -21,4 +21,12 @@ const state$ = createState<StreamBrowserState>(
     obs.of<StreamBrowserState>({ loading: false, streams: [] }),
 );
 
-export default connect(state$)(StreamBrowser);
+const StreamBrowserComponent: ComponentType<
+    StreamBrowserState & HalViewerProps
+> = ({ streams, loading }) => (
+    <StreamBrowser loading={loading} streams={streams} />
+);
+
+export default connect<HalViewerProps, StreamBrowserState>(state$)(
+    StreamBrowserComponent,
+);

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

@@ -11,10 +11,15 @@ import {
 import React, {
     ComponentType,
     CSSProperties,
+    FormEvent,
+    FormEventHandler,
     PureComponent,
+    ReactEventHandler,
+    ReactNode,
     StatelessComponent,
 } from 'react';
 import Inspector, {
+    NodeRendererProps,
     ObjectLabel,
     ObjectName,
     ObjectRootLabel,
@@ -51,7 +56,7 @@ const message$ = store.hal$.body$.map(({ payload, metadata, ...body }) => ({
     payload: tryParseJson(payload),
 }));
 
-interface StreamMessageState {
+interface StreamMessageState extends HalResource {
     message: {
         messageId: string;
         createdUtc: string;
@@ -67,6 +72,8 @@ interface StreamMessageState {
 const state$ = createState<StreamMessageState>(
     message$.map(message => ['message', () => message]),
     obs.of<StreamMessageState>({
+        _embedded: {},
+        _links: {},
         message: {
             createdUtc: '',
             messageId: '',
@@ -127,10 +134,10 @@ const StreamMessageDetails: StatelessComponent<
     </TableRow>
 );
 
-const isPotentialStreamId = data =>
+const isPotentialStreamId = (data: any) =>
     typeof data === 'number' || typeof data === 'string';
 
-const getStreamLinks = ({ _embedded }): HalResource[] =>
+const getStreamLinks = ({ _embedded }: HalResource): HalResource[] =>
     _embedded[rels.feed] || [];
 
 interface StreamMessageJsonState {
@@ -167,10 +174,10 @@ const StreamMessageJson = withStyles(style)(class extends PureComponent<
         streams: [],
     };
 
-    _handlePotentialStreamIdClick = async (
-        { currentTarget: anchorElement },
-        pattern,
-    ) => {
+    _handlePotentialStreamIdClick: (
+        e: FormEvent,
+        pattern: string,
+    ) => Promise<void> = async ({ currentTarget: anchorElement }, pattern) => {
         const { authorization, _links } = this.props;
 
         this.setState({
@@ -212,7 +219,13 @@ const StreamMessageJson = withStyles(style)(class extends PureComponent<
             open: false,
         });
 
-    _renderNode = ({ depth, name, data, path, isNonenumerable, ...props }) =>
+    _renderNode = ({
+        depth,
+        name,
+        data,
+        isNonenumerable,
+        ...props
+    }: NodeRendererProps & { children?: ReactNode }) =>
         depth === 0 ? (
             <ObjectRootLabel name={name} data={{}} {...props} />
         ) : isPotentialStreamId(data) ? (
@@ -282,7 +295,8 @@ class StreamMessageTabs extends PureComponent<
         value: 0,
     };
 
-    _handleChange = (e, value) => this.setState({ value });
+    _handleChange: (e: FormEvent, value: number) => void = (e, value) =>
+        this.setState({ value });
 
     render() {
         const {
@@ -315,7 +329,7 @@ class StreamMessageTabs extends PureComponent<
     }
 }
 
-const StreamMessage: StatelessComponent<StreamMessageState & HalResource> = ({
+const StreamMessage: ComponentType<StreamMessageState & HalViewerProps> = ({
     message,
     ...props
 }) => (
@@ -332,4 +346,6 @@ const StreamMessage: StatelessComponent<StreamMessageState & HalResource> = ({
     </section>
 );
 
-export default connect(state$)(StreamMessage) as ComponentType<HalViewerProps>;
+export default connect<HalViewerProps, StreamMessageState>(state$)(
+    StreamMessage,
+);

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

@@ -124,9 +124,9 @@ class StreamMetadataJson extends PureComponent<
     }
 }
 
-const StreamMetadata: StatelessComponent<StreamMetadataState> = ({
-    metadata,
-}) => (
+const StreamMetadata: StatelessComponent<
+    StreamMetadataState & HalViewerProps
+> = ({ metadata }) => (
     <section>
         <Table style={{ tableLayout: 'auto' }}>
             <TableHead>
@@ -140,4 +140,6 @@ const StreamMetadata: StatelessComponent<StreamMetadataState> = ({
     </section>
 );
 
-export default connect(state$)(StreamMetadata) as ComponentType<HalViewerProps>;
+export default connect<HalViewerProps, StreamMetadataState>(state$)(
+    StreamMetadata,
+);

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

@@ -15,12 +15,12 @@ import { preventDefault } from '../../../utils';
 import store from '../../store';
 import { HalViewerProps } from './types';
 
-interface UnregcognizedRelViewerState {
+interface UnrecognizedRelViewerState {
     data: object;
 }
-const state$ = createState<UnregcognizedRelViewerState>(
+const state$ = createState<UnrecognizedRelViewerState>(
     store.hal$.body$.map(data => ['data', () => data]),
-    obs.of<UnregcognizedRelViewerState>({
+    obs.of<UnrecognizedRelViewerState>({
         data: {},
     }),
 );
@@ -56,7 +56,7 @@ const MaybeLinkLabel: ComponentType<ObjectLabelProps> = withNavigation<
 );
 
 class UnrecognizedRelViewer extends React.PureComponent<
-    UnregcognizedRelViewerState
+    UnrecognizedRelViewerState & HalViewerProps
 > {
     _nodeRenderer = ({ depth, ...props }: NodeRendererProps) =>
         depth === 0 ? (
@@ -76,4 +76,6 @@ class UnrecognizedRelViewer extends React.PureComponent<
     }
 }
 
-export default connect(state$)(UnrecognizedRelViewer);
+export default connect<HalViewerProps, UnrecognizedRelViewerState>(state$)(
+    UnrecognizedRelViewer,
+);

src/stream-store/Viewer/MarkdownViewer/index.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@material-ui/core';
-import React from 'react';
+import React, { ComponentType } from 'react';
 import Remarkable from 'react-remarkable';
 import { Observable } from 'rxjs';
 import { connect, createState } from '../../../reactive';
@@ -17,7 +17,7 @@ const state$ = createState<MarkdownViewerState>(
     }),
 );
 
-const MarkdownViewer = ({ body }: { body: string }) => (
+const MarkdownViewer: ComponentType<MarkdownViewerState> = ({ body }) => (
     <Typography>
         <Remarkable
             options={{
@@ -28,4 +28,4 @@ const MarkdownViewer = ({ body }: { body: string }) => (
         </Remarkable>
     </Typography>
 );
-export default connect(state$)(MarkdownViewer);
+export default connect<{}, MarkdownViewerState>(state$)(MarkdownViewer);

src/stream-store/Viewer/index.ts

@@ -8,7 +8,7 @@ const viewers = {
     [mediaTypes.hal]: HalViewer,
 };
 
-const Viewer = ({ mediaType, ...props }: { mediaType: string } & any) =>
+const Viewer = ({ mediaType, ...props }: { mediaType: string }) =>
     createElement(viewers[mediaType] || 'div', props);
 
 export default Viewer;