From a699218c22201096e3eb67da956101712598e6ea Mon Sep 17 00:00:00 2001 From: hippoz Date: Wed, 20 Jan 2021 01:49:57 +0200 Subject: [PATCH] add logging in more places --- bfrontend/src/Authenticator.js | 22 +++++++- bfrontend/src/Components/App.js | 5 +- bfrontend/src/Components/Auth/Login.js | 12 ++-- .../src/Components/Categories/CategoryList.js | 7 ++- .../src/Components/Users/UserProfileLink.js | 17 +++--- bfrontend/src/Gateway/GatewayConnection.js | 19 ++++--- .../src/Gateway/globalGatewayConnection.js | 5 +- bfrontend/src/Logger.js | 56 +++++++++++-------- bfrontend/src/Styles/App.scss | 14 +++-- 9 files changed, 103 insertions(+), 54 deletions(-) diff --git a/bfrontend/src/Authenticator.js b/bfrontend/src/Authenticator.js index 10c7064..b638b0e 100644 --- a/bfrontend/src/Authenticator.js +++ b/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) return undefined; - if (!json || !json.user) return undefined; + if (!isOK && err) { + authLog('Exeption while fetching current logged in user status', err); + 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; diff --git a/bfrontend/src/Components/App.js b/bfrontend/src/Components/App.js index 0c503f6..088a3cf 100644 --- a/bfrontend/src/Components/App.js +++ b/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, - gateway: state?.gateway + user: state?.user }; }; diff --git a/bfrontend/src/Components/Auth/Login.js b/bfrontend/src/Components/Auth/Login.js index 88dae2a..ee83395 100644 --- a/bfrontend/src/Components/Auth/Login.js +++ b/bfrontend/src/Components/Auth/Login.js @@ -51,12 +51,16 @@ export default function Login() { } return ( -
- setUsernameInput(target.value) } /> +
+
- setPasswordInput(target.value) } /> + setUsernameInput(target.value) } />
- + +
+ setPasswordInput(target.value) } /> +
+
); diff --git a/bfrontend/src/Components/Categories/CategoryList.js b/bfrontend/src/Components/Categories/CategoryList.js index 2ca7ea2..d480f58 100644 --- a/bfrontend/src/Components/Categories/CategoryList.js +++ b/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(() => { diff --git a/bfrontend/src/Components/Users/UserProfileLink.js b/bfrontend/src/Components/Users/UserProfileLink.js index 5d1f5cd..1618005 100644 --- a/bfrontend/src/Components/Users/UserProfileLink.js +++ b/bfrontend/src/Components/Users/UserProfileLink.js @@ -4,15 +4,18 @@ 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}`; - // TODO: Make a debug error message for then the size does not exist - const pictureClass = `profile-picture profile-picture-${size}`; - - if (user.picture) { - // Not actually implemented on the server and can be unsafe, this is just futureproofing - picture = Profile + if (user.picture) { + // Not actually implemented on the server and can be unsafe, this is just futureproofing + picture = Profile + } else { + picture = Profile + } } else { - picture = Profile + picture = null; } return ( diff --git a/bfrontend/src/Gateway/GatewayConnection.js b/bfrontend/src/Gateway/GatewayConnection.js index 0674e45..06b55db 100644 --- a/bfrontend/src/Gateway/GatewayConnection.js +++ b/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); }; diff --git a/bfrontend/src/Gateway/globalGatewayConnection.js b/bfrontend/src/Gateway/globalGatewayConnection.js index e99ebce..b65fbb1 100644 --- a/bfrontend/src/Gateway/globalGatewayConnection.js +++ b/bfrontend/src/Gateway/globalGatewayConnection.js @@ -9,9 +9,12 @@ 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 } }); }; -export default globalGatewayConnection; \ No newline at end of file +export default globalGatewayConnection; diff --git a/bfrontend/src/Logger.js b/bfrontend/src/Logger.js index 3c457f3..9061365 100644 --- a/bfrontend/src/Logger.js +++ b/bfrontend/src/Logger.js @@ -1,35 +1,45 @@ -function loggerOfType(components, type='log') { - return (...args) => { - let str = ''; - for (const v of components) { +const loggerOfType = (components, type='log') => (...args) => { + let str = '%c'; + const style = 'color: #5e81ac; font-weight: bold;'; + for (const i in components) { + const v = components[i]; + if (components[i+1] === undefined) { + str += `[${v}]`; + } else { str += `[${v}] `; } - switch (type) { - case 'log': { - console.log(str, ...args); - } - - case 'error': { - console.error(str, ...args); - } - - case 'warn': { - console.warn(str, ...args); - } - - case 'genmsg': { - return str; - } + } + //str += '%c'; + switch (type) { + case 'log': { + console.log(str, style, ...args); + break; + } + + case 'error': { + console.error(str, style, ...args); + break; + } + + case 'warn': { + console.warn(str, style, ...args); + break; + } + + case 'genmsg': { + return str; + } + + default: { + return str; } - - 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); } diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss index 4cc0a24..23aba47 100644 --- a/bfrontend/src/Styles/App.scss +++ b/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-bottom: 12px; + margin-top: 5px; + margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 5px; + border-radius: var(--category-message-border-radius); background-color: var(--category-message-color); } @@ -237,4 +241,4 @@ body { min-width: 60px; max-width: 60px; } -} \ No newline at end of file +}