Socket refactor

app/assets/javascripts/bundle.js

@@ -1096,16 +1096,23 @@ var Listener = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, Listener);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Listener).call(this, props));
-    _this.createSubscriptions = _this.createSubscriptions.bind(_assertThisInitialized(_this));
+    _this.membership = {};
+    _this.createSubscription = _this.createSubscription.bind(_assertThisInitialized(_this));
     return _this;
   } // calls create subscriptions once the client page is rendered
 
 
   _createClass(Listener, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.currentUser) {
-        this.createSubscriptions();
+      var _this2 = this;
+
+      if (this.props.currentUser && this.props.memberships.length > 0) {
+        debugger;
+        this.membership = this.props.memberships.select(function (mem) {
+          return mem.channelId === _this2.props.currentChannel;
+        });
+        this.createSubscription();
       }
     } // calls createSubscriptions if a channel re render is needed but won't recreate
     // already existing Action Cable subscriptions
@@ -1115,41 +1122,44 @@ var Listener = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       //DO NOT REMOVE THIS IF CHECK!
       if (prevProps && prevProps.currentChannel !== this.props.currentChannel) {
-        this.createSubscriptions();
+        this.membership = this.props.memberships[this.props.currentChannel];
+        this.createSubscription();
       }
     } // iterates through and deletes Action Cable subscriptions on logout
 
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.chats.forEach(function (channel) {
-        channel.unsubscribe();
-      });
+      // this.chats.forEach(channel => {
+      //     channel.unsubscribe();
+      // })
+      this.membership.unsubscribe();
     }
   }, {
-    key: "createSubscriptions",
-    value: function createSubscriptions() {
-      var _this2 = this;
+    key: "createSubscription",
+    value: function createSubscription() {
+      var _this3 = this;
 
-      var memberships = this.props.memberships;
-      this.chats = memberships.map(function (membership) {
-        return App.cable.subscriptions.create({
-          channel: "ChatChannel",
-          room: membership.channelId
-        }, {
-          connected: function connected() {// console.log(`Connected to ${membership.channelId}`);
-          },
-          disconnected: function disconnected() {// console.log("Disconnected!");
-          },
-          received: function received(data) {
-            var payload = {
-              messages: _defineProperty({}, data.message.id, data.message),
-              user: _defineProperty({}, data.user.id, data.user)
-            };
+      var that = this;
+      debugger;
+      App.cable.subscriptions.create({
+        channel: "ChatChannel",
+        room: that.membership.channelId
+      }, {
+        connected: function connected() {
+          console.log("Connected to ".concat(that.membership.channelId));
+        },
+        disconnected: function disconnected() {
+          console.log("Disconnected!");
+        },
+        received: function received(data) {
+          var payload = {
+            messages: _defineProperty({}, data.message.id, data.message),
+            user: _defineProperty({}, data.user.id, data.user)
+          };
 
-            _this2.props.receiveMessage(payload);
-          }
-        });
+          _this3.props.receiveMessage(payload);
+        }
       });
     }
   }, {
@@ -1185,9 +1195,9 @@ __webpack_require__.r(__webpack_exports__);
 
 var mapStateToProps = function mapStateToProps(state) {
   return {
+    memberships: Object.values(state.entities.memberships),
     currentUser: state.session.id,
-    currentChannel: state.session.currentChannel,
-    memberships: Object.values(state.entities.memberships)
+    currentChannel: state.session.currentChannel
   };
 };
 
@@ -1385,7 +1395,7 @@ var Client = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement("div", {
         className: "client-main-page"
-      }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_sidebar_sidebar_container__WEBPACK_IMPORTED_MODULE_5__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_channel_channel_show_container__WEBPACK_IMPORTED_MODULE_1__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_channel_channel_header_container__WEBPACK_IMPORTED_MODULE_0__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_channel_listener_container__WEBPACK_IMPORTED_MODULE_2__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_modal_modal__WEBPACK_IMPORTED_MODULE_3__["default"], null));
+      }, react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_sidebar_sidebar_container__WEBPACK_IMPORTED_MODULE_5__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_channel_channel_show_container__WEBPACK_IMPORTED_MODULE_1__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_channel_channel_header_container__WEBPACK_IMPORTED_MODULE_0__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_modal_modal__WEBPACK_IMPORTED_MODULE_3__["default"], null), react__WEBPACK_IMPORTED_MODULE_4___default.a.createElement(_channel_listener_container__WEBPACK_IMPORTED_MODULE_2__["default"], null));
     }
   }]);
 

db/seeds.rb

@@ -1,11 +1,3 @@
-# This file should contain all the record creation needed to seed the database with its default values.
-# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
-#
-# Examples:
-#
-#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
-#   Character.create(name: 'Luke', movie: movies.first)
-
 Message.destroy_all
 Membership.destroy_all
 Channel.destroy_all

frontend/actions/message_actions.js

@@ -4,10 +4,6 @@ export const RECEIVE_MESSAGE = 'RECEIVE_MESSAGE';
 export const RECEIVE_NEW_MESSAGE = 'RECEIVE_NEW_MESSAGE';
 export const RECEIVE_MESSAGE_ERRORS = 'RECEIVE_MESSAGE_ERRORS';
 
-export const receiveMessages = messages => ({
-
-})
-
 export const receiveMessage = payload => ({
     type: RECEIVE_MESSAGE,
     payload

frontend/components/App.jsx

@@ -3,7 +3,7 @@ import ClientContainer from './client/client_container';
 import LoginFormContainer from './login/login_container';
 import NavbarContainer from './navbar/navbar_container';
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Switch } from 'react-router-dom';
 import SignupFormContainer from './signup/signup_container';
 import SplashContainer from './splash/splash_container';
 

frontend/components/channel/listener.jsx

@@ -3,14 +3,19 @@ import React from 'react';
 class Listener extends React.Component {
     constructor(props) {
         super(props);
-        this.createSubscriptions = this.createSubscriptions.bind(this);
+        this.membership = {};
+        this.createSubscription = this.createSubscription.bind(this);
     }
 
     // calls create subscriptions once the client page is rendered
     componentDidMount() {
 
-        if (this.props.currentUser) {
-            this.createSubscriptions();
+        if (this.props.currentUser && this.props.memberships.length > 0) {
+            debugger;
+            this.membership = this.props.memberships.select(mem => (
+                mem.channelId === this.props.currentChannel
+            ));
+            this.createSubscription();
         }
     }
 
@@ -20,48 +25,48 @@ class Listener extends React.Component {
 
         //DO NOT REMOVE THIS IF CHECK!
         if (prevProps && prevProps.currentChannel !== this.props.currentChannel) {
-            this.createSubscriptions();
+            this.membership = this.props.memberships[this.props.currentChannel];
+            this.createSubscription();
         }
     }
 
     // iterates through and deletes Action Cable subscriptions on logout
     componentWillUnmount() {
 
-        this.chats.forEach(channel => {
-            channel.unsubscribe();
-        })
+        // this.chats.forEach(channel => {
+        //     channel.unsubscribe();
+        // })
+        this.membership.unsubscribe();
     }
 
-    createSubscriptions() {
-        let memberships = this.props.memberships;
-
-        this.chats = memberships.map(membership => (
-            App.cable.subscriptions.create(
-                {
-                    channel: "ChatChannel",
-                    room: membership.channelId
-                },
-                {
-                    connected: () => {
-                        // console.log(`Connected to ${membership.channelId}`);
-                },
-                    disconnected: () => {
-                        // console.log("Disconnected!");
-                },
-                    received: data => {
-                        let payload = {
-                            messages: {
-                                [data.message.id] : data.message
-                            },
-                            user: {
-                                [data.user.id] : data.user
-                            }
-                        }    
-                        this.props.receiveMessage(payload);                        
-                    }
+    createSubscription() {
+        let that = this;
+        debugger;
+        App.cable.subscriptions.create(
+            {
+                channel: "ChatChannel",
+                room: that.membership.channelId
+            },
+            {
+                connected: () => {
+                    console.log(`Connected to ${that.membership.channelId}`);
+            },
+                disconnected: () => {
+                    console.log("Disconnected!");
+            },
+                received: data => {
+                    let payload = {
+                        messages: {
+                            [data.message.id] : data.message
+                        },
+                        user: {
+                            [data.user.id] : data.user
+                        }
+                    }    
+                    this.props.receiveMessage(payload);                        
                 }
-            )
-        ));
+            }
+        );
     }
 
     render() {

frontend/components/channel/listener_container.js

@@ -4,9 +4,9 @@ import { receiveMessage } from '../../actions/message_actions';
 
 const mapStateToProps = state => {
     return ({
+        memberships: Object.values(state.entities.memberships),
         currentUser: state.session.id,
-        currentChannel: state.session.currentChannel,
-        memberships: Object.values(state.entities.memberships)
+        currentChannel: state.session.currentChannel
     })
 };
 

frontend/components/client/client.jsx

@@ -19,8 +19,8 @@ class Client extends React.Component {
                 <SidebarContainer />
                 <ChannelShowContainer />
                 <ChannelHeaderContainer />
-                <ListenerContainer />
                 <Modal />
+                <ListenerContainer />
             </div>
         )
     }

frontend/util/route_util.js

@@ -7,7 +7,7 @@ const Auth = ({ component: Component, path, loggedIn, exact }) => (
         !loggedIn ? (
             <Component {...props} />
         ) : (
-                <Redirect to="/client" />
+            <Redirect to="/client" />
             )
     )} />
 );
@@ -17,7 +17,7 @@ const Protected = ({ component: Component, path, loggedIn, exact }) => (
         loggedIn ? (
             <Component {...props} />
         ) : (
-                <Redirect to="/login" />
+            <Redirect to="/login" />
             )
     )} />
 );