Merge pull request #17 from thefringeninja/reactive-rs

Migrate Reactive Bits to Typescript

Author: thefringeninja

package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@types/classnames": "^2.2.6",
     "@types/history": "^4.7.2",
+    "@types/json-schema": "^7.0.1",
     "@types/jss": "^9.5.7",
     "@types/prettier": "^1.13.2",
     "@types/react": "^16.4.18",
@@ -36,6 +37,7 @@
     "classnames": "2.2.6",
     "history": "4.7.2",
     "inflector-js": "1.0.1",
+    "json-schema": "0.2.3",
     "jss": "9.4.0",
     "react": "16.5.2",
     "react-dom": "16.5.2",

src/SqlStreamStoreBrowser.js

@@ -49,7 +49,7 @@ const onNavigate = (link, authorization) =>
 
 const initialNavigation = ({ authorization }) =>
     onNavigate(
-        { href: window.location.href, type: mediaTypes.hal },
+        { href: window.location.href, type: mediaTypes.any },
         authorization,
     );
 

src/components/Notifications.tsx

@@ -7,7 +7,12 @@ import {
 } from '@material-ui/core';
 import { amber, blue, green, red } from '@material-ui/core/colors';
 import classNames from 'classnames';
-import React, {ComponentType, createElement, ReactNode, StatelessComponent} from 'react';
+import React, {
+    ComponentType,
+    createElement,
+    ReactNode,
+    StatelessComponent,
+} from 'react';
 import { Observable as obs } from 'rxjs';
 import uuid from 'uuid';
 import { CheckCircle, Close, Error, Info, Warning } from '../components/Icons';
@@ -195,7 +200,9 @@ const Notification: ComponentType<NotificationProps> = withStyles(styles)(
     ),
 );
 
-const Notifications: StatelessComponent<{ notifications: NotificationProps[] }> = ({ notifications }) => (
+const Notifications: StatelessComponent<{
+    notifications: NotificationProps[];
+}> = ({ notifications }) => (
     <div>
         {notifications.map(notification => (
             <Notification key={notification.messageId} {...notification} />

src/stream-store/actions.js

@@ -0,0 +1,51 @@
+import { Action, Location } from 'history';
+import { ReplaySubject } from 'rxjs';
+import { createAction } from '../reactive';
+import { HttpRequest, HttpResponse } from '../types';
+import { history, http } from '../utils';
+
+type Actions = {
+    [P in keyof typeof http]: {
+        request: ReplaySubject<HttpRequest>;
+        response: ReplaySubject<HttpResponse>;
+    }
+};
+
+const verbs = Object.keys(http);
+
+const actions: Actions = verbs.reduce(
+    (akk, verb: keyof typeof http) => ({
+        ...akk,
+        [verb]: {
+            request: createAction(),
+            response: createAction(),
+        },
+    }),
+    // tslint:disable-next-line:no-object-literal-type-assertion
+    {} as Actions,
+);
+
+verbs.forEach(verb =>
+    actions[verb].request
+        .flatMap(request => http[verb](request))
+        .subscribe(response => actions[verb].response.next(response)),
+);
+
+actions.get.response.subscribe(({ url }) => history.push(url));
+
+const getUrl = (location: Location) =>
+    `${location.pathname}${location.search}${location.hash}`;
+
+history.listen(
+    (location: Location, action: Action): void => {
+        if (action !== 'POP') {
+            return;
+        }
+        actions.get.request.next({
+            headers: {},
+            link: { href: getUrl(location) },
+        });
+    },
+);
+
+export default actions;

src/stream-store/actions.ts

@@ -1,34 +1,46 @@
+import { JSONSchema7 } from 'json-schema';
 import { Observable as obs } from 'rxjs';
+import { HalResource } from '../types';
 import { resolveLinks } from '../utils';
 import actions from './actions';
 
 const mediaType$ = actions.get.response.map(
     ({ headers }) => headers['content-type'].split(';')[0],
 );
 
-const body$ = actions.get.response.map(({ body }) => body);
+const body$ = actions.get.response.map(({ body }) => body as HalResource);
 
 const url$ = actions.get.response.map(({ url }) => url);
 
 const links$ = body$
     .zip(url$)
     .map(([{ _links }, url]) => resolveLinks(url, _links || {}));
 
-const forms$ = body$.map(({ _embedded }) =>
-    Object.keys(_embedded || {})
-        .filter(
-            rel =>
-                _embedded[rel].$schema &&
-                _embedded[rel].$schema.endsWith('schema#'),
-        )
-        .reduce((akk, rel) => ({ ...akk, [rel]: _embedded[rel] }), {}),
+const isJsonSchema = (schema: JSONSchema7 & HalResource) =>
+    schema.$schema && schema.$schema.endsWith('schema#');
+
+const forms$ = body$.map(({ _embedded }) => _embedded || {}).map(embedded =>
+    Object.keys(embedded)
+        .filter(rel => isJsonSchema(embedded[rel]))
+        .reduce(
+            (akk, rel) => ({
+                ...akk,
+                [rel]: embedded[rel],
+            }),
+            // tslint:disable-next-line:no-object-literal-type-assertion
+            {} as JSONSchema7,
+        ),
 );
 
 const verbs = Object.keys(actions);
 
-const requests$ = obs.merge(...verbs.map(verb => actions[verb].request));
+const requests$ = obs.merge(
+    ...verbs.map((verb: keyof typeof actions) => actions[verb].request),
+);
 
-const responses$ = obs.merge(...verbs.map(verb => actions[verb].response));
+const responses$ = obs.merge(
+    ...verbs.map((verb: keyof typeof actions) => actions[verb].response),
+);
 
 const delayedRequests$ = requests$.delay(1000);
 
@@ -48,10 +60,10 @@ const loading$ = requests$
     );
 
 export default {
-    links$,
-    forms$,
     body$,
-    url$,
+    forms$,
+    links$,
     loading$,
     mediaType$,
+    url$,
 };

src/stream-store/index.js src/stream-store/index.tssrc/stream-store/index.js renamed to src/stream-store/index.ts

@@ -15,6 +15,7 @@ export interface HalLinks {
 export interface HalResource {
     readonly _links?: HalLinks;
     readonly _embedded?: EmbeddedResources;
+    [key: string]: any;
 }
 
 export interface EmbeddedResources {
@@ -29,10 +30,12 @@ export interface NavigatableProps {
 }
 
 export interface HttpResponse {
-    body: { [key: string]: any } | string | undefined;
+    body: object | undefined | string;
+    headers: { [key: string]: string };
+    ok: boolean;
     status: number;
     statusText: string;
-    ok: boolean;
+    url: string;
 }
 
 export interface HttpProblemDetailsResponse extends HttpResponse {
@@ -42,3 +45,9 @@ export interface HttpProblemDetailsResponse extends HttpResponse {
         type: string;
     };
 }
+
+export interface HttpRequest {
+    body?: object;
+    link: HalLink;
+    headers: { [key: string]: string | undefined };
+}

src/stream-store/store.js src/stream-store/store.tssrc/stream-store/store.js renamed to src/stream-store/store.ts

@@ -3,13 +3,13 @@ import { parse } from 'uri-js';
 
 const history = createBrowserHistory();
 
-const getPathAndQuery = url => {
+const getPathAndQuery = (url: string): string => {
     const { path, query } = parse(url);
 
-    return query ? `${path}?${query}` : path;
+    return query ? `${path}?${query}` : path || '';
 };
 
-const push = url => {
+const push = (url: string) => {
     const pathAndQuery = getPathAndQuery(url);
     if (pathAndQuery !== getPathAndQuery(window.location.href)) {
         history.push(pathAndQuery);