hocs sorted

Author: thefringeninja

src/components/AuthorizationProvider.js src/components/AuthorizationProvider.tsxsrc/components/AuthorizationProvider.js renamed to src/components/AuthorizationProvider.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { ReactNode, StatelessComponent } from 'react';
 import getDisplayName from './getDisplayName';
 
-const { Consumer, Provider } = React.createContext();
+const { Consumer, Provider } = React.createContext<string | undefined>(
+    undefined,
+);
 
-const AuthorizationProvider = ({ authorization, children }) => (
+const AuthorizationProvider: StatelessComponent<{
+    authorization: string | undefined;
+    children: ReactNode;
+}> = ({ authorization, children }) => (
     <Provider value={authorization}>{children}</Provider>
 );
 

src/components/NavigationProvider.js src/components/NavigationProvider.tsxsrc/components/NavigationProvider.js renamed to src/components/NavigationProvider.tsx

@@ -1,8 +1,19 @@
-import React from 'react';
+import React, { ReactNode, StatelessComponent } from 'react';
+import { NavigationHandler } from '../types';
 import getDisplayName from './getDisplayName';
-const { Consumer, Provider } = React.createContext();
 
-const NavigationProvider = ({ onNavigate, children }) => (
+const defaultNavigationHandler: NavigationHandler = (link, authorization) => {
+    return;
+};
+
+const { Consumer, Provider } = React.createContext<NavigationHandler>(
+    defaultNavigationHandler,
+);
+
+const NavigationProvider: StatelessComponent<{
+    onNavigate: NavigationHandler;
+    children: ReactNode;
+}> = ({ onNavigate, children }) => (
     <Provider value={onNavigate}>{children}</Provider>
 );
 

src/components/getDisplayName.js

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+
+export default <T>(
+    hocName: string,
+    WrappedComponent: ComponentType<T>,
+): string =>
+    `${hocName}(${WrappedComponent.displayName ||
+        WrappedComponent.name ||
+        'Component'})`;

src/components/getDisplayName.ts

@@ -0,0 +1,33 @@
+import React, { ComponentType, PureComponent } from 'react';
+import getDisplayName from './getDisplayName';
+
+type DidMount<T> = (props: T) => void;
+type WillUnmount<T> = (props: T) => void;
+
+const mount = <T extends object>(
+    didMount: DidMount<T>,
+    willUnmount?: WillUnmount<T>,
+) => (WrappedComponent: ComponentType<T>) => {
+    class Mount extends PureComponent<T> {
+        componentDidMount() {
+            didMount(this.props);
+        }
+
+        componentWillUnmount() {
+            if (!willUnmount) {
+                return;
+            }
+            willUnmount(this.props);
+        }
+
+        render() {
+            return React.createElement<T>(WrappedComponent, this.props);
+        }
+    }
+
+    return Mount;
+};
+
+mount.displayName = 'Mount';
+
+export default mount;

src/components/mount.js

@@ -21,7 +21,9 @@ export interface EmbeddedResources {
     [rel: string]: HalResource | HalResource[];
 }
 
+export type NavigationHandler = (link: HalLink, authorization?: string) => void;
+
 export interface NavigatableProps {
-    onNavigate: (link: HalLink, authorization?: string) => void;
+    onNavigate: NavigationHandler;
     authorization?: string;
 }