From 7e7028976093ae01e4888755fec700b9d7edf3e9 Mon Sep 17 00:00:00 2001
From: Johnson Ogwuru <ogwurujohnson@gmail.com>
Date: Fri, 3 Jan 2020 15:23:41 +0100
Subject: [PATCH 1/2] install pusher client

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 39b31ee..9c53942 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@pusher/chatkit-client": "^1.13.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

From bb9a45e872c222e723b403d70c48e7aae3c22e34 Mon Sep 17 00:00:00 2001
From: Johnson Ogwuru <ogwurujohnson@gmail.com>
Date: Fri, 3 Jan 2020 17:25:15 +0100
Subject: [PATCH 2/2] setup pusher for client

---
 src/components/Event/index.js | 48 ++++++++++++++++++++++++++++++++---
 src/config/index.js           |  3 ++-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/Event/index.js b/src/components/Event/index.js
index ee264e5..419754c 100644
--- a/src/components/Event/index.js
+++ b/src/components/Event/index.js
@@ -1,8 +1,43 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { ChatManager, TokenProvider } from '@pusher/chatkit-client';
 import EventDescription from './EventDescription';
 import EventAgenda from './EventAgenda';
 
-const Event = () => {
+import { pusherLocator,apiURL } from '../../config';
+
+const Event = (props) => {
+  const tokenProvider = new TokenProvider({
+    url: `${apiURL}/api/authenticate`,
+  });
+  
+  useEffect(() => {
+    if (props.user) {
+      const chatManager = new ChatManager({
+        instanceLocator: pusherLocator, 
+        userId: props.user.email,
+        tokenProvider
+      })
+
+      chatManager.connect()
+      .then(currentUser => {
+        console.log('Successful connection', currentUser)
+        currentUser.subscribeToRoomMultipart({
+          roomId: `${props.events.title}_1`,
+          hooks: {
+            onMessage: message => {
+              console.log("received message", message)
+            }
+          },
+          messageLimit: 10
+        })
+      })
+      .catch(err => {
+        console.log('Error on connection', err)
+      })
+    }
+  }, )
+
   return (
     <div>
       <EventDescription />
@@ -11,4 +46,11 @@ const Event = () => {
   );
 };
 
-export default Event;
+const mapStateToProps = ({ eventReducer, authReducer }) => ({
+  loading: eventReducer.loading,
+  events: eventReducer.events,
+  loggedIn: authReducer.loggedIn,
+  user: authReducer.user,
+});
+
+export default connect(mapStateToProps, {})(Event);
diff --git a/src/config/index.js b/src/config/index.js
index 9195037..ce05fc2 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,2 +1,3 @@
 /* Environment Variables */
-export const apiURL = process.env.REACT_APP_API_HOST
\ No newline at end of file
+export const apiURL = process.env.REACT_APP_API_HOST
+export const pusherLocator = process.env.REACT_APP_PUSHER_INSTANCE_LOCATOR
\ No newline at end of file