From ffe5e48e1f97c472c9aedb14aca5edaa3fb6c7db Mon Sep 17 00:00:00 2001
From: Abdul Rehman Talat <rehman.talat@gmail.com>
Date: Sun, 30 Sep 2018 21:06:49 +0500
Subject: [PATCH] =?UTF-8?q?feat(=F0=9F=8E=A3=20BlueRainHook=20Component):?=
 =?UTF-8?q?=20New=20component=20to=20handler=20async=20hook=20logic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Processes the async hook logic and returns final value as a param in
render prop function
---
 COMMIT.md                                    |  2 +
 src/components/BlueRainHook/BlueRainHook.tsx | 45 ++++++++++++++++++++
 src/components/BlueRainHook/index.ts         |  1 +
 3 files changed, 48 insertions(+)
 create mode 100644 src/components/BlueRainHook/BlueRainHook.tsx
 create mode 100644 src/components/BlueRainHook/index.ts

diff --git a/COMMIT.md b/COMMIT.md
index ad689921..602a3e53 100644
--- a/COMMIT.md
+++ b/COMMIT.md
@@ -4,7 +4,9 @@ Emoji reference of Commitizen scopes for this repo:
 📦 BlueRainModule
 🎁 ComponentRegistry
 🎣 HookRegistry
+🎣 BlueRainHook Component
 🗿 Icons
+🍱 JSON Schema
 🔌 PluginRegistry
 📖 README
 📕 Storybook
diff --git a/src/components/BlueRainHook/BlueRainHook.tsx b/src/components/BlueRainHook/BlueRainHook.tsx
new file mode 100644
index 00000000..c0a87070
--- /dev/null
+++ b/src/components/BlueRainHook/BlueRainHook.tsx
@@ -0,0 +1,45 @@
+import { BlueRain } from '../../BlueRain';
+import { BlueRainConsumer } from '../../Context';
+import Loadable from 'react-loadable';
+import React from 'react';
+
+// const example = () => (
+// 	<BlueRainHook hook="bluerain.event" value={5} args={{ foo: 'bar' }}>
+// 	{(value) => console.log(value)}
+// 	</BlueRainHook>
+// );
+
+export interface BlueRainHookProperties<T = any> {
+	hook: string;
+	value: T;
+	args?: { [key: string]: any };
+	children: ((value: any) => React.ReactNode);
+}
+
+export class BlueRainHook extends React.PureComponent<BlueRainHookProperties> {
+
+	public static defaultProps = {
+		args: {}
+	};
+
+	render() {
+
+		const { hook, value, args, children } = this.props;
+
+		return (
+			<BlueRainConsumer children={(BR: BlueRain) => {
+
+				const AsyncBlueRainHook = Loadable({
+					loader: () => BR.Hooks.run(hook, value, args),
+					loading: () => <BR.Components.Text>Loading</BR.Components.Text>,
+					render(loadedValue: any) {
+						return children(loadedValue);
+					}
+				});
+
+				return <AsyncBlueRainHook />;
+
+			}} />
+		);
+	}
+}
diff --git a/src/components/BlueRainHook/index.ts b/src/components/BlueRainHook/index.ts
new file mode 100644
index 00000000..0153e9aa
--- /dev/null
+++ b/src/components/BlueRainHook/index.ts
@@ -0,0 +1 @@
+export * from './BlueRainHook';