From c256526d09eee80965035f80d8ccd7d22ce98ede Mon Sep 17 00:00:00 2001
From: YJ <yjkimjunior@gmail.com>
Date: Wed, 13 Feb 2019 18:10:07 +0800
Subject: [PATCH] Updating readme again with `react-with-observable` option
 (#71)

* keyring docs with more examples and FAQ

* update keyring examples with react-with-observable option
---
 packages/ui-keyring/README.md | 62 ++++++++++++++++++++++++++++++++---
 1 file changed, 57 insertions(+), 5 deletions(-)

diff --git a/packages/ui-keyring/README.md b/packages/ui-keyring/README.md
index 86a0f540..a48d356d 100644
--- a/packages/ui-keyring/README.md
+++ b/packages/ui-keyring/README.md
@@ -28,18 +28,70 @@ render () {
   keyring.saveAddress(address, { ...meta });
 }
 ```
-### Observables
+## Observables
+### Option 1: Declarative subscribe/unsubscribe w/ react-with-observable (recommended 'React' way)
 ```
-import React from 'react';
 import accountObservable from '@polkadot/ui-keyring/observable/accounts';
+import { SingleAddress, SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+import React from 'react';
+import { Subscribe } from 'react-with-observable';
+import { map } from 'rxjs/operators';
 
-class MyReactComponent extends React.Component {
+class MyReactComponent extends React.PureComponent {
+  render () {
+    <Subscribe>
+      {accountObservable.subject.pipe(
+        map((allAccounts: SubjectInfo) =>
+          !allAccounts
+            ? this.renderEmpty()
+            : Object.values(allAccounts).map((account: SingleAddress) =>
+                // Your component goes here
+                console.log(account.json.address)
+            )
+        ))}
+    </Subscribe>
+  }
+
+  renderEmpty () {
+    return (
+      <div> no accounts to display ... </div>
+    );
+  }
+}
+
+```
+
+### Option 2: Imperative subscribe/unsubscribe
+```
+import accountObservable from '@polkadot/ui-keyring/observable/accounts';
+import { SingleAddress, SubjectInfo } from '@polkadot/ui-keyring/observable/types';
+import React from 'react';
+import { Subscription } from 'rxjs';
+
+type State = {
+  allAccounts?: SubjectInfo,
+  subscriptions?: [Subscription]
+}
+
+class MyReactComponent extends React.PureComponent<State> {
   componentDidMount () {
-    accountObservable.subscribe((observedAccounts) => {
+    const accountSubscription = accountObservable.subject.subscribe((observedAccounts) => {
       this.setState({
         accounts: observedAccounts
       });
     })
+
+    this.setState({
+      subscriptions: [accountSubscription]
+    });
+  }
+
+  componentWillUnmount () {
+    const { subscriptions } = this.state;
+
+    for (s in subscriptions) {
+      s.subject.unsubscribe();
+    }
   }
 
   render () {
@@ -48,7 +100,7 @@ class MyReactComponent extends React.Component {
     return (
       <h1>All Accounts</h1>
       {
-        Object.keys(accounts).map(address => {
+        Object.keys(accounts).map((address: SingleAddress) => {
           return <p> {address} </p>;
         })
       }