bfrontend/src/Components/App.js

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

bfrontend/src/Components/Categories/CategoryButton.js

@@ -1,20 +1,12 @@
 // 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={ handleClick }>
+        <button className="button category-button" onClick={ () => history.push(`/categories/${category._id}`) }>
             {/* 
             maybe enable someday...
             <CategoryProfile category={ category } size="32" /> 
@@ -22,5 +14,5 @@ export default function CategoryButton({ category }) {
 
             { category.title }
         </button>
-    );
+    )
 }

bfrontend/src/Components/Categories/CategoryView.js

@@ -1,16 +1,12 @@
 import CategoryViewLoader from './CategoryViewLoader';
 import CategoryProfile from './CategoryProfileLink';
 import Message from '../Messages/Message';
-import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 import { useParams } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { connect } from 'react-redux'
-import { useState, useRef } from 'react';
 
-function CategoryView({ categories, messages }) {
+function CategoryView({ categories }) {
     const { id } = useParams();
-    const [ textInput, setTextInput ] = useState('');
-    const textInputRef = useRef(null);
 
     let category;
 
@@ -18,14 +14,18 @@ function CategoryView({ categories, messages }) {
         category = categories.find(x => x._id === id);
     }
 
-    const handleTextboxKeydown = (e) => {
+    const dummyMessage1 = {
-        if (e.key === 'Enter') {
+        author: {
-            // Send message written in textbox
+            username: '__SYSTEM',
-
+            _id: '5fc69864f15a7c5e504c9a1f'
-            gatewayConnection.sendMessage(id, textInput);
+        },
-            textInputRef.current.value = '';
+        category: {
-        }
+            title: 'alan',
-    }
+            _id: 'y8fyerghgh'
+        },
+        content: 'yes hello',
+        _id: 'i8ru354y89ty549ytg'
+    };
 
     if (category) {
         return (
@@ -34,10 +34,11 @@ function CategoryView({ categories, messages }) {
                     <CategoryProfile category={ category } />
                 </div>
                 <div className="card message-list-card">
-                    { messages.map(m => <Message key={ m._id } message={ m } />) }
+                    <Message message={ dummyMessage1 } />
                 </div>
                 <div className="card bar-card-bottom">
-                    <input className="text-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
+                    The hearing of the average cat is at least five times keener than that of a human adult.
+                    In the largest cat breed, the average male weighs approximately 20 pounds.
                 </div>
             </div>
         )
@@ -59,12 +60,9 @@ function CategoryView({ categories, messages }) {
 
 }
 
-const stateToProps = (state, ownProps) => {
+const stateToProps = (state) => {
-    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,9 +6,6 @@ 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/Styles/App.scss

@@ -3,23 +3,13 @@
 :root {
     --background-color: #{$nord0};
 
-    --default-main-card-color: var(--background-color);
+    --default-main-card-color: #{$nord1};
-    --card-box-shadow-color:rgba(0, 0, 0, 0.27);
+    --card-box-shadow-color:rgba(0, 0, 0, 0.25);
 
     --default-text-color: #{$nord5};
 
-    --accent-color-dark: #{$nord1};
+    --accent-color-dark: #{$nord2};
-    --accent-color-light: #{$nord2};
+    --accent-color-light: #{$nord3};
-
-    --category-top-bar-color: var(--accent-color-light);
-    --category-bottom-text-bar-color: var(--accent-color-light);
-
-    --category-list-background-color: var(--background-color);
-    --category-message-list-background-color: var(--background-color);
-    --category-message-color: var(--accent-color-dark);
-
-    --button-color: var(--accent-color-dark);
-    --button-hover-color: var(--accent-color-light);
 
     --default-transition-duration: 200ms;
     --default-border-radius: 0px;
@@ -73,9 +63,8 @@ body {
     @include card;
 
     &.bar-card {
-        background-color: var(--category-top-bar-color);
+        background-color: var(--accent-color-dark);
-        min-height: 50px;
+        min-height: 40px;
-        padding: 5px;
 
         border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px;
         display: flex;
@@ -83,35 +72,27 @@ body {
         justify-content: left;
 
         font-size: large;
-
-        z-index: 99;
     }
 
     &.bar-card-bottom {
-        background-color: var(--category-bottom-text-bar-color);
+        background-color: var(--accent-color-dark);
-        box-shadow: 0px -3px 5px var(--card-box-shadow-color);
+        min-height: 30px;
-
-        min-height: 40px;
 
         border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius);
-        display: flex;
-
-        z-index: 100;
     }
     
     &.message-list-card {
-        @include fancy-scrollbar-firefox;
         border-radius: 0px;
         flex-grow: 1;
         box-shadow: none;
-        overflow: auto;
-        background-color: var(--category-message-list-background-color);
     }
 }
 
 .main-card {
     @include card;
 
+    margin: 12px;
+
     &.main-content-card {
         flex-grow: 1;
         display: flex;
@@ -125,7 +106,7 @@ body {
     padding: 5px;
     margin: 5px;
     border: 0px;
-    background-color: var(--button-color);
+    background-color: var(--accent-color-dark);
     color: var(--default-text-color);
     cursor: pointer;
     transition: background-color, var(--default-transition-duration);
@@ -160,8 +141,6 @@ body {
 
     min-width: 110px;
     max-width: 110px;
-
-    background-color: var(--category-list-background-color);
 }
 
 .profile-picture {
@@ -207,21 +186,6 @@ body {
 
     display: flex;
     flex-direction: column;
-    margin-top: 15px;
-    margin-left: 5px;
-    margin-right: 5px;
-    padding: 5px;
-    background-color: var(--category-message-color);
-}
-
-.text-input {
-    @include card;
-
-    margin: 5px;
-    padding: 5px;
-    border: none;
-    color: var(--default-text-color);
-    flex-grow: 1;
 }
 
 @media only screen and (max-width: 600px) {
@@ -234,4 +198,8 @@ body {
         min-width: 60px;
         max-width: 60px;
     }
+
+    .main-card {
+        margin: 6px;
+    }
 }

bfrontend/src/store.js

@@ -3,8 +3,7 @@ import { createStore } from 'redux';
 const intitialState = {
     user: null,
     categories: null,
-    gateway: { isConnected: false },
+    gateway: { isConnected: false }
-    messages: {}
 };
 
 const reducer = (state = intitialState, payload) => {
@@ -32,19 +31,6 @@ 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;
         }