hippoz/brainlet-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add logging in more places

Browse source
This commit is contained in:
hippoz 2021-01-20 01:49:57 +02:00
parent 5e2f4fd7c3
commit a699218c22
Signed by: hippoz
GPG key ID: 7C52899193467641
9 changed files with 103 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
bfrontend/src/Authenticator.js
View file

@ -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;

5
bfrontend/src/Components/App.js
View file

@ -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
};
};

12
bfrontend/src/Components/Auth/Login.js
View file

@ -51,12 +51,16 @@ export default function Login() {
}
return (
<div id="login-container">
<input type="text" name="username" onChange={ ({ target }) => setUsernameInput(target.value) } />
<div id="login-container" className="card main-card">
<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>
);

7
bfrontend/src/Components/Categories/CategoryList.js
View file

@ -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(() => {

17
bfrontend/src/Components/Users/UserProfileLink.js
View file

@ -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 = <img className={ pictureClass } src={ user.picture } alt="Profile"></img>
if (user.picture) {
// Not actually implemented on the server and can be unsafe, this is just futureproofing
picture = <img className={ pictureClass } src={ user.picture } alt="Profile"></img>
} else {
picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
}
} else {
picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
picture = null;
}
return (

19
bfrontend/src/Gateway/GatewayConnection.js
View file

@ -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);
};

3
bfrontend/src/Gateway/globalGatewayConnection.js
View file

@ -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 } });

54
bfrontend/src/Logger.js
View file

@ -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;
}
return str;
case 'error': {
console.error(str, style, ...args);
break;
}
case 'warn': {
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);
}

12
bfrontend/src/Styles/App.scss
View file

@ -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);
}