listen for the message event from the gateway and display message

bfrontend/src/Components/App.js

@@ -46,9 +46,7 @@ function App({ user, gateway }) {
                             <Route path="/login">
                                 <Login />
                             </Route>
-                            <Route path="/categories/:id">
-                                <CategoryView />
-                            </Route>
+                            <Route path="/categories/:id" component={ CategoryView } />
                             <Route path="/">
                                 <Root user={user} />
                             </Route>

bfrontend/src/Components/Categories/CategoryButton.js

@@ -1,12 +1,20 @@
 // import CategoryProfile from './CategoryProfile';
 
 import { useHistory } from 'react-router-dom';
+import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 export default function CategoryButton({ category }) {
     const history = useHistory();
 
+    const handleClick = () => {
+        if (gatewayConnection.isConnected) {
+            gatewayConnection.subscribeToCategoryChat(category._id);
+            history.push(`/categories/${category._id}`);
+        }
+    };
+
     return (
-        <button className="button category-button" onClick={ () => history.push(`/categories/${category._id}`) }>
+        <button className="button category-button" onClick={ handleClick }>
             {/* 
             maybe enable someday...
             <CategoryProfile category={ category } size="32" /> 
@@ -14,5 +22,5 @@ export default function CategoryButton({ category }) {
 
             { category.title }
         </button>
-    )
+    );
 }

bfrontend/src/Components/Categories/CategoryView.js

@@ -5,7 +5,7 @@ import Message from '../Messages/Message';
 import { useParams } from 'react-router-dom';
 import { connect } from 'react-redux'
 
-function CategoryView({ categories }) {
+function CategoryView({ categories, messages }) {
     const { id } = useParams();
 
     let category;
@@ -14,19 +14,6 @@ function CategoryView({ categories }) {
         category = categories.find(x => x._id === id);
     }
     
-    const dummyMessage1 = {
-        author: {
-            username: '__SYSTEM',
-            _id: '5fc69864f15a7c5e504c9a1f'
-        },
-        category: {
-            title: 'alan',
-            _id: 'y8fyerghgh'
-        },
-        content: 'yes hello',
-        _id: 'i8ru354y89ty549ytg'
-    };
-
     if (category) {
         return (
             <div className="card main-card main-content-card">
@@ -34,7 +21,7 @@ function CategoryView({ categories }) {
                     <CategoryProfile category={ category } />
                 </div>
                 <div className="card message-list-card">
-                    <Message message={ dummyMessage1 } />
+                    { messages.map(m => <Message key={ m._id } message={ m } />) }
                 </div>
                 <div className="card bar-card-bottom">
                     The hearing of the average cat is at least five times keener than that of a human adult.
@@ -60,9 +47,12 @@ function CategoryView({ categories }) {
 
 }
 
-const stateToProps = (state) => {
+const stateToProps = (state, ownProps) => {
+    const categoryId = ownProps.match.params.id; // NOTE(hippoz): kind of a hack, but it works and idk if theres any other solution
+
     return {
-        categories: state?.categories
+        categories: state?.categories,
+        messages: state?.messages[categoryId] || []
     };
 };
 

bfrontend/src/Gateway/globalGatewayConnection.js

@@ -6,6 +6,9 @@ const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
 
 globalGatewayConnection.onConnect = function() {
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: true } });
+    globalGatewayConnection.socket.on('message', (message) => {
+        store.dispatch({ type: 'messagestore/addmessage', message });
+    });
 };
 globalGatewayConnection.onDisconnect = function() {
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });

bfrontend/src/store.js

@@ -3,7 +3,8 @@ import { createStore } from 'redux';
 const intitialState = {
     user: null,
     categories: null,
-    gateway: { isConnected: false }
+    gateway: { isConnected: false },
+    messages: {}
 };
 
 const reducer = (state = intitialState, payload) => {
@@ -31,6 +32,19 @@ const reducer = (state = intitialState, payload) => {
             }
         }
 
+        case 'messagestore/addmessage': {
+            return {
+                ...state,
+                messages: {
+                    ...state.messages,
+                    [payload.message.category._id]: [
+                        ...state.messages[payload.message.category._id] || [],
+                        payload.message
+                    ]
+                }
+            }
+        }
+
         default: {
             return state;
         }