fix bug where it sometimes wouldnt subscribe to the channels, and add some functionality

bfrontend/src/Components/Categories/CategoryList.js

@@ -10,7 +10,7 @@ import gatewayConnection from '../../Gateway/globalGatewayConnection';
 
 const { log: loaderLog } = Logger([ 'CategoryList', 'Loader' ]);
 
-function CategoryList({ selectedCategoryId }) {
+function CategoryList({ selectedCategoryId, gatewayStatus }) {
     const [ categoryList, setCategoryList ] = useState();
     const [ error, setError ] = useState();
 
@@ -26,14 +26,20 @@ function CategoryList({ selectedCategoryId }) {
                 setCategoryList(json.categories || []);
                 dispatch({ type: 'categories/updatecategorylist', categories: json.categories });
                 loaderLog('Subscribing to all categories...');
-                // TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server
-                gatewayConnection.subscribeToCategoryChats(json.categories.map(category => category._id));
             })
             .catch(() => {
                 setError(true);
             });
     }, [dispatch]);
 
+    useEffect(() => {
+        if (!categoryList) return;
+        if (!gatewayStatus.isConnected) return;
+
+        // TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server
+        gatewayConnection.subscribeToCategoryChats(categoryList.map(category => category._id));
+    }, [gatewayStatus, categoryList]);
+
     if (!categoryList) {
         if (error) {
             return (
@@ -61,7 +67,8 @@ function CategoryList({ selectedCategoryId }) {
 
 const stateToProps = (state) => {
     return {
-        selectedCategoryId: state?.selectedCategoryId
+        selectedCategoryId: state?.selectedCategoryId,
+        gatewayStatus: state?.gateway,
     };
 };
 

bfrontend/src/Components/Categories/CategoryProfileLink.js

@@ -1,7 +1,8 @@
 import ProfileLink from '../UI/ProfileLink'
 
-export default function CategoryProfile({ category, size }) {
+// TODO: Stop using this component and just use the ProfileLink component
+export default function CategoryProfile({ category, size, offset=false }) {
     return (
-        <ProfileLink object={ category } size={ size } type="category" />
+        <ProfileLink object={ category } size={ size } type="category" offset={ offset } />
     );
 }

bfrontend/src/Components/Messages/Message.js

@@ -3,7 +3,7 @@ import UserProfileLink from '../Users/UserProfileLink';
 export default function Message({ message }) {
     return (
         <div className="message">
-            <UserProfileLink size="40" user={ message.author } />
+            <UserProfileLink size="40" user={ message.author } offset="true"><p>a</p></UserProfileLink>
             <span>{ message.content }</span>
         </div>
     );

bfrontend/src/Components/UI/ProfileLink.js

@@ -1,9 +1,8 @@
 import defaultProfile from '../../Images/defaultprofile_256px-256px.png'
 
-export default function ProfileLink({ object, size, type }) {
+export default function ProfileLink({ object, size=32, type, offset=true, children=null }) {
     let picture;
 
-    if (!size) size = 32;
     if (size !== 0) {
         // TODO: Make a debug error message for then the size does not exist
         const pictureClass = `profile-picture profile-picture-${size}`;
@@ -18,13 +17,15 @@ export default function ProfileLink({ object, size, type }) {
         picture = null;
     }
 
-    const classes = type === 'user' ? 'profile-link user-profile-link' : 'profile-link';
+    const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
     const title = type === 'category' ? object.title : object.username;
+    const bottomInfo = offset ? children : null;
 
     return (
         <div className={ classes }>
             { picture }
             <span className="profile-username">{ title }</span>
+            { bottomInfo }
         </div>
-    )
+    );
 }

bfrontend/src/Components/Users/UserProfileLink.js

@@ -1,7 +1,8 @@
 import ProfileLink from '../UI/ProfileLink'
 
-export default function CategoryProfile({ user, size }) {
+// TODO: Stop using this component and just use the ProfileLink component
+export default function CategoryProfile({ user, size, offset=false }) {
     return (
-        <ProfileLink object={ user } size={ size } type="user" />
+        <ProfileLink object={ user } size={ size } type="user" offset={ offset } />
     );
 }

bfrontend/src/Styles/App.scss

@@ -50,6 +50,7 @@ $nord15: #B48EAD;
     --default-button-border-radius: 0px;
     --category-message-border-radius: 0px;
     --bar-cards-border-radius: 0px;
+    --category-button-border-radius: 4px;
 }
 
 ::-webkit-scrollbar {
@@ -168,7 +169,7 @@ body {
         max-height: 100px;
 
         margin: 4px;
-        border-radius: 4px;
+        border-radius: var(--category-button-border-radius);
     }
 
     &.pressed {
@@ -233,7 +234,7 @@ body {
     align-items: center;
     justify-content: left;
 
-    &.user-profile-link {
+    &.profile-link-offset-text {
         align-items: unset;
         text-align: start;
     }