subscribe to categories only once, when the category is loaded. also fixed the shadow on the main page

bfrontend/src/Components/App.js

@@ -43,10 +43,9 @@ function App({ user, gateway }) {
                     <BrowserRouter>
                         { user && <Sidebar /> }
                         <Switch>
-                            <Route path="/login">
-                                <Login />
-                            </Route>
+                            <Route path="/login" component={ Login } />
                             <Route path="/categories/:id" component={ CategoryView } />
+                            
                             <Route path="/">
                                 <Root user={user} />
                             </Route>

bfrontend/src/Components/Categories/CategoryButton.js

@@ -8,7 +8,6 @@ export default function CategoryButton({ category }) {
 
     const handleClick = () => {
         if (gatewayConnection.isConnected) {
-            gatewayConnection.subscribeToCategoryChat(category._id);
             history.push(`/categories/${category._id}`);
         }
     };

bfrontend/src/Components/Categories/CategoryView.js

@@ -4,14 +4,15 @@ import Message from '../Messages/Message';
 import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 import { useParams } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { useState, useRef, useEffect } from 'react';
 
-function CategoryView({ categories, messages }) {
+function CategoryView({ categories, messages, isHandlingRoute=true, subscribedToCategories, gateway: { isConnected: isGatewayConnected } }) {
     const { id } = useParams();
     const [ textInput, setTextInput ] = useState('');
     const textInputRef = useRef(null);
     const invisibleBottomMessageRef = useRef(null);
+    const dispatch = useDispatch();
 
     let category;
 
@@ -32,6 +33,17 @@ function CategoryView({ categories, messages }) {
 
     useEffect(scrollToBottom, [messages]);
 
+    useEffect(() => {
+        if (isHandlingRoute) {
+            if (!id || id === '') return;
+            if (!isGatewayConnected ) return;
+            if (subscribedToCategories.includes(id)) return;
+
+            dispatch({ type: 'categories/selectcategory', categoryId: id });
+            gatewayConnection.subscribeToCategoryChat(id);
+        }
+    }, [dispatch, id, isHandlingRoute, subscribedToCategories, isGatewayConnected]);
+    
     if (categories) {
         category = categories.find(x => x._id === id);
     }
@@ -74,7 +86,9 @@ const stateToProps = (state, ownProps) => {
 
     return {
         categories: state?.categories,
-        messages: state?.messages[categoryId] || []
+        messages: state?.messages[categoryId] || [],
+        subscribedToCategories: state?.subscribedToCategories || [],
+        gateway: state?.gateway
     };
 };
 

bfrontend/src/Styles/App.scss

@@ -112,6 +112,8 @@ body {
 .main-card {
     @include card;
 
+    box-shadow: none;
+
     &.main-content-card {
         flex-grow: 1;
         display: flex;

bfrontend/src/store.js

@@ -4,7 +4,8 @@ const intitialState = {
     user: null,
     categories: null,
     gateway: { isConnected: false },
-    messages: {}
+    messages: {},
+    subscribedToCategories: []
 };
 
 const reducer = (state = intitialState, payload) => {
@@ -45,6 +46,16 @@ const reducer = (state = intitialState, payload) => {
             }
         }
 
+        case 'categories/selectcategory': {
+            return {
+                ...state,
+                subscribedToCategories: [
+                    ...state.subscribedToCategories || [],
+                    payload.categoryId
+                ]
+            }
+        }
+
         default: {
             return state;
         }