add logging in more places

bfrontend/src/Authenticator.js

@@ -1,12 +1,28 @@
 import APIRequest from './APIRequest';
 import gatewayConnection from './Gateway/globalGatewayConnection';
+import Logger from './Logger';
+
+const { log: authLog, error: authError } = Logger([ 'Authenticator' ]);
 
 const Authenticator = {
     getLoggedInUserFromCookie: async function() {
+        authLog('Fetching current logged in user status...');
         const { json, isOK, err } = await APIRequest.authenticated('/api/v1/users/current/info');
-        if (!isOK && err) throw new Error(err);
+        if (!isOK && err) {
-        if (!isOK && !err) return undefined;
+            authLog('Exeption while fetching current logged in user status', err);
-        if (!json || !json.user) return undefined;
+            throw new Error(err);
+        }
+        if (!isOK && !err) {
+            authError('User is not authenticated');
+            return undefined;
+        }
+        if (!json || !json.user) {
+            authError('User is not authenticated');
+            return undefined;
+        }
+
+        authLog(`Logged in as "${json.user.username || '[undefined user]'}"`);
+
         // NOTE(hippoz): this function has a stupid side-effect but this will have to do for now...
         gatewayConnection.connect(json.user.token);
         return json.user;

bfrontend/src/Components/App.js

@@ -11,7 +11,7 @@ import { useEffect, useState } from 'react';
 import { useDispatch, connect } from 'react-redux'
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
-function App({ user, gateway }) {
+function App({ user }) {
     const [ notificationText, setNotificationText ] = useState('');
     const [ hasError, setHasError ] = useState(false);
 
@@ -65,8 +65,7 @@ function App({ user, gateway }) {
 
 const stateToProps = (state) => {
     return {
-        user: state?.user,
+        user: state?.user
-        gateway: state?.gateway
     };
 };
 

bfrontend/src/Components/Auth/Login.js

@@ -51,12 +51,16 @@ export default function Login() {
     }
 
     return (
-        <div id="login-container">
+        <div id="login-container" className="card main-card">
-            <input type="text" name="username" onChange={ ({ target }) => setUsernameInput(target.value) } />
+            <label htmlFor="username">Username</label>
             <br />
-            <input type="password" name="password" onChange={ ({ target }) => setPasswordInput(target.value) } />
+            <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
             <br />
-            <button id="login-submit" onClick={ handleLoginContinueButton }>Continue</button>
+            <label htmlFor="password">Password</label>
+            <br />
+            <input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
+            <br />
+            <button id="login-submit" className="button" onClick={ handleLoginContinueButton }>Continue</button>
             <Notification text={ info } />
         </div>
     );

bfrontend/src/Components/Categories/CategoryList.js

@@ -5,6 +5,9 @@ import { couldNotReach } from '../../Errors';
 
 import { useDispatch } from 'react-redux'
 import { useState, useEffect } from 'react';
+import Logger from '../../Logger';
+
+const { log: loaderLog } = Logger([ 'CategoryList', 'Loader' ]);
 
 export default function CategoryList() {
     const [ categoryList, setCategoryList ] = useState();
@@ -13,11 +16,13 @@ export default function CategoryList() {
     const dispatch = useDispatch();
 
     useEffect(() => {
+        loaderLog('Loading CategoryList...');
         APIRequest.authenticated('/api/v1/content/category/list?count=50')
             .then(({ isOK, json }) => {
                 if (!isOK) return setError(true);
-                setCategoryList(json.categories || []);
 
+                loaderLog('Got category list from server, dispatching...');
+                setCategoryList(json.categories || []);
                 dispatch({ type: 'categories/updatecategorylist', categories: json.categories });
             })
             .catch(() => {

bfrontend/src/Components/Users/UserProfileLink.js

@@ -4,7 +4,7 @@ export default function UserProfileLink({ user, size }) {
     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}`;
 
@@ -14,6 +14,9 @@ export default function UserProfileLink({ user, size }) {
         } else {
             picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
         }
+    } else {
+        picture = null;
+    }
 
     return (
         <div className="profile-link">

bfrontend/src/Gateway/GatewayConnection.js

@@ -1,5 +1,10 @@
 import io from 'socket.io-client';
 
+import Logger from '../Logger';
+
+const { log: gatewayLog } = Logger([ 'Gateway' ]);
+const { log: gatewayHandshakeLog } = Logger([ 'Gateway', 'Handshake' ]);
+
 class GatewayConnection {
     constructor(url="") {
         this.isConnected = false;
@@ -19,7 +24,7 @@ GatewayConnection.prototype.disconnect = function() {
 };
 
 GatewayConnection.prototype.connect = function(token) {
-    console.log('[*] [gateway] [handshake] Trying to connect to gateway');
+    gatewayHandshakeLog('Trying to connect to gateway');
     this.socket = io(`${this.url}/gateway`, {
         query: {
             token
@@ -29,29 +34,29 @@ GatewayConnection.prototype.connect = function(token) {
 
     this.socket.on('connect', () => {
         this.socket.once('hello', (debugInfo) => {
-            console.log('[*] [gateway] [handshake] Got hello from server, sending yoo...', debugInfo);
+            gatewayHandshakeLog('Got hello from server, sending yoo...', debugInfo);
             this.socket.emit('yoo');
             this.isConnected = true;
             this.debugInfo = debugInfo;
             this.onConnect('CONNECT_RECEIVED_HELLO');
-            console.log('[*] [gateway] [handshake] Assuming that server received yoo and that connection is completed.');
+            gatewayHandshakeLog('Assuming that server received yoo and that connection is completed.');
         });
     })
 
     this.socket.on('error', (e) => {
-        console.log('[E] [gateway] Gateway error', e);
+        gatewayLog('Gateway error', e);
         this.isConnected = false;
         this.socket = null;
         this.onDisconnect('DISCONNECT_ERR', e);
     });
     this.socket.on('disconnectNotification', (e) => {
-        console.log('[E] [gateway] Received disconnect notfication', e);
+        gatewayLog('Received disconnect notfication', e);
         this.isConnected = false;
         this.socket = null;
         this.onDisconnect('DISCONNECT_NOTIF', e);
     });
     this.socket.on('disconnect', (e) => {
-        console.log('[E] [gateway] Disconnected from gateway: ', e);
+        gatewayLog('Disconnected from gateway: ', e);
         this.isConnected = false;
         this.onDisconnect('DISCONNECT', e);
     });
@@ -74,7 +79,7 @@ GatewayConnection.prototype.subscribeToCategoryChat = function(categoryId) {
 
     const request = [categoryId];
 
-    console.log('[*] [gateway] Subscribing to channel(s)', request);
+    gatewayLog('Subscribing to channel(s)', request);
 
     this.socket.emit('subscribe', request);
 };

bfrontend/src/Gateway/globalGatewayConnection.js

@@ -9,6 +9,9 @@ globalGatewayConnection.onConnect = function() {
     globalGatewayConnection.socket.on('message', (message) => {
         store.dispatch({ type: 'messagestore/addmessage', message });
     });
+    globalGatewayConnection.socket.on('clientListUpdate', (userList) => {
+        store.dispatch({ type: 'presence/category/clientlistupdate', userList });
+    });
 };
 globalGatewayConnection.onDisconnect = function() {
     store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });

bfrontend/src/Logger.js

@@ -1,35 +1,45 @@
-function loggerOfType(components, type='log') {
+const loggerOfType = (components, type='log') => (...args) => {
-    return (...args) => {
+    let str = '%c';
-        let str = '';
+    const style = 'color: #5e81ac; font-weight: bold;';
-        for (const v of components) {
+    for (const i in components) {
+        const v = components[i];
+        if (components[i+1] === undefined) {
+            str += `[${v}]`;
+        } else {
             str += `[${v}] `;
         }
+    }
+    //str += '%c';
     switch (type) {
         case 'log': {
-                console.log(str, ...args);
+            console.log(str, style, ...args);
+            break;
         }
 
         case 'error': {
-                console.error(str, ...args);
+            console.error(str, style, ...args);
+            break;
         }
             
         case 'warn': {
-                console.warn(str, ...args);
+            console.warn(str, style, ...args);
+            break;
         }
 
         case 'genmsg': {
             return str;
         }
-        }
 
+        default: {
             return str;
         }
+    }
 };
 
 export default function Logger(components, types=['warn', 'error', 'log']) {
     const loggerObj = {};
 
-    for (type of types) {
+    for (const type of types) {
         loggerObj[type] = loggerOfType(components, type);
     }
 

bfrontend/src/Styles/App.scss

@@ -22,8 +22,11 @@
     --button-hover-color: var(--accent-color-light);
 
     --default-transition-duration: 200ms;
+
     --default-border-radius: 0px;
     --default-button-border-radius: 0px;
+    --category-message-border-radius: 0px;
+    --bar-cards-border-radius: 0px;
 }
 
 ::-webkit-scrollbar {
@@ -77,7 +80,7 @@ body {
         min-height: 50px;
         padding: 5px;
 
-        border-radius: var(--default-button-border-radius) var(--default-button-border-radius) 0px 0px;
+        border-radius: var(--bar-cards-border-radius);
         display: flex;
         align-items: center;
         justify-content: left;
@@ -93,7 +96,7 @@ body {
 
         min-height: 40px;
 
-        border-radius: 0px 0px var(--default-button-border-radius) var(--default-button-border-radius);
+        border-radius: var(--bar-cards-border-radius);
         display: flex;
 
         z-index: 100;
@@ -209,11 +212,12 @@ body {
 
     display: flex;
     flex-direction: column;
-    margin-top: 12px;
+    margin-top: 5px;
-    margin-bottom: 12px;
+    margin-bottom: 5px;
     margin-left: 5px;
     margin-right: 5px;
     padding: 5px;
+    border-radius: var(--category-message-border-radius);
     background-color: var(--category-message-color);
 }