install pusher client

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",

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);

src/config/index.js

@@ -1,2 +1,3 @@
 /* Environment Variables */
-export const apiURL = process.env.REACT_APP_API_HOST
+export const apiURL = process.env.REACT_APP_API_HOST
+export const pusherLocator = process.env.REACT_APP_PUSHER_INSTANCE_LOCATOR