Change SubscriptionClient config to send token through connectionParams

README.md

@@ -1,5 +1,5 @@
 
-## React Native The Meeting App v1.0.0
+## The SNS v1.0.0
 
 ### A [React Native](https://facebook.github.io/react-native/docs/getting-started.html) Starter Kit with [NativeBase](https://nativebase.io/) + [React Navigation](https://reactnavigation.org/) + [Redux](https://github.com/reactjs/redux) Apps (iOS & Android)
 
@@ -41,4 +41,19 @@ $ npm install
 	* Run `npm start` in your terminal
 	* Scan the QR code in your Expo app
   * Opt #2:
-	* Run `npm run android` in your terminal
+	* Run `npm run android` in your
+
+### Note
+- Because `subscriptions-transport-ws` version `0.9.8` isn't support `Promise` in `connectionParams`, I suggest a temporary approach (be patient to wait later version =_=):
+ - After run `npm install`, go to `node_modules/subscriptions-transport-ws/dist/client.js` and change `SubscriptionClient.prototype.connect` like this
+```js
+if (typeof _this.connectionParams === 'function') {
+    Promise.resolve(_this.connectionParams()).then((payload) => {
+        _this.sendMessage(undefined, 'connection_init', payload);
+        _this.flushUnsentMessagesQueue();
+        });
+    } else {
+        _this.sendMessage(undefined, 'connection_init', _this.connectionParams);
+        _this.flushUnsentMessagesQueue();
+}
+```

src/container/Sidebar/actions.js

@@ -2,7 +2,7 @@ import { NavigationActions } from "react-navigation";
 import { AsyncStorage } from "react-native";
 
 import * as utils from "../../utils/common";
-import { client } from "../../store";
+import { client, wsClient } from "../../store";
 import { LOGOUT_SUCCSESS } from "../../constants";
 
 export const logOut = navigation => {
@@ -14,6 +14,8 @@ export const logOut = navigation => {
 
     // reset apollo store to make sure user is really logout
     client.resetStore();
+    wsClient.unsubscribeAll();
+    wsClient.close();
 
     // redirect to login screen
     navigation.dispatch(

src/store.js

@@ -6,6 +6,7 @@ import { WebSocketLink } from "apollo-link-ws";
 import { split, ApolloLink } from "apollo-link";
 import { Observable} from "rxjs/Observable";
 import { getMainDefinition } from "apollo-utilities";
+import { SubscriptionClient } from "subscriptions-transport-ws";
 
 import { AsyncStorage } from "react-native";
 import thunk from "redux-thunk";
@@ -51,12 +52,20 @@ const middlewareAuthLink = new ApolloLink(
 const httpLinkWithAuthToken = middlewareAuthLink.concat(httpLink);
 
 // Create a WebSocket link:
-const wsLink = new WebSocketLink({
-  uri: `wss://${HOST}/subscriptions`,
-  options: {
+export const wsClient = new SubscriptionClient(
+  `wss://${HOST}/subscriptions`,
+  {
     reconnect: true,
+    lazy: true,
+    connectionParams: async () => {
+      return {
+        token: await AsyncStorage.getItem(ACCESS_TOKEN),
+      };
+    }
   }
-});
+);
+
+const wsLink = new WebSocketLink(wsClient);
 
 // using the ability to split links, you can send data to each link
 // depending on what kind of operation is being sent