sorted everything except the reducer

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/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);

src/types/index.d.ts

@@ -1,9 +1,19 @@
+import { HttpRequest, HttpResponse } from '../types';
 import mediaTypes from './mediaTypes';
 
-const isJson = mediaType =>
+declare global {
+    interface Headers {
+        entries: () => Iterable<string>;
+    }
+}
+
+const isJson = (mediaType: string | undefined) =>
     mediaType === mediaTypes.json || (mediaType || '').endsWith('+json');
 
-const getBody = async (response, headers) => {
+const getBody = async (
+    response: Response,
+    headers: { [key: string]: string },
+) => {
     const body = await response.text();
     if (!isJson(headers['content-type'])) {
         return body;
@@ -15,16 +25,19 @@ const getBody = async (response, headers) => {
     }
 };
 
-const getHeaders = headers =>
+const getHeaders = (headers: Headers) =>
     [...headers.entries()].reduce(
-        (acc, [key, value]) => ({
-            ...acc,
-            [key]: value,
-        }),
+        (acc, [key, value]) =>
+            value
+                ? {
+                      ...acc,
+                      [key]: value,
+                  }
+                : acc,
         {},
     );
 
-const mapResponse = async response => {
+const mapResponse = async (response: Response): Promise<HttpResponse> => {
     const { ok, status, statusText, url } = response;
 
     const headers = getHeaders(response.headers);
@@ -39,26 +52,34 @@ const mapResponse = async response => {
     };
 };
 
-const get = ({ link, headers = {} }) =>
+const get = ({ link, headers = {} }: HttpRequest) =>
     fetch(link.href, {
         headers: new Headers({
             accept: link.type || mediaTypes.hal,
             ...headers,
         }),
     }).then(mapResponse);
 
-const post = ({ link, body, headers = {} }) =>
+interface HttpRequestWithBody extends HttpRequest {
+    body: object;
+}
+
+const post = <TRequest extends object, TResponse extends object>({
+    link,
+    body,
+    headers = {},
+}: HttpRequestWithBody) =>
     fetch(link.href, {
+        body: JSON.stringify(body),
         headers: new Headers({
-            'content-type': mediaTypes.json,
             accept: link.type || mediaTypes.hal,
+            'content-type': mediaTypes.json,
             ...headers,
         }),
         method: 'post',
-        body: JSON.stringify(body),
     }).then(mapResponse);
 
-const _delete = ({ link, headers = {} }) =>
+const _delete = ({ link, headers = {} }: HttpRequest) =>
     fetch(link.href, {
         headers: new Headers({
             accept: link.type || mediaTypes.hal,
@@ -67,8 +88,16 @@ const _delete = ({ link, headers = {} }) =>
         method: 'delete',
     }).then(mapResponse);
 
-export default {
+interface Http {
+    get: (request: HttpRequest) => Promise<HttpResponse>;
+    post: (request: HttpRequestWithBody) => Promise<HttpResponse>;
+    delete: (request: HttpRequest) => Promise<HttpResponse>;
+}
+
+const http: Http = {
+    delete: _delete,
     get,
     post,
-    delete: _delete,
 };
+
+export default http;

src/utils/history.js src/utils/history.tssrc/utils/history.js renamed to src/utils/history.ts

@@ -1,19 +1,21 @@
 import { resolve } from 'uri-js';
+import { HalLinks } from '../types';
 
 const toArray = maybeArray =>
     !!maybeArray && Array.isArray(maybeArray) ? maybeArray : [maybeArray];
 
-export const resolveLinks = (url, links) =>
+export const resolveLinks = (url: string, links: HalLinks): HalLinks =>
     Object.keys(links).reduce(
         (akk, rel) => ({
             ...akk,
             [rel]: toArray(links[rel]).map(({ href, ...link }) => ({
                 ...link,
-                rel,
                 href: resolve(url, href || './', { tolerant: true }),
+                rel,
             })),
         }),
-        {},
+        // tslint:disable-next-line:no-object-literal-type-assertion
+        {} as HalLinks,
     );
 
 export { default as history } from './history';