Compare commits

...

2 commits

Author SHA1 Message Date
hippoz
9f0a9a6629
Merge branch 'master' of https://git.hippoz.xyz/hippoz/brainlet-react 2021-01-20 01:50:16 +02:00
hippoz
a699218c22
add logging in more places 2021-01-20 01:49:57 +02:00
9 changed files with 103 additions and 54 deletions

View file

@ -1,12 +1,28 @@
import APIRequest from './APIRequest'; import APIRequest from './APIRequest';
import gatewayConnection from './Gateway/globalGatewayConnection'; import gatewayConnection from './Gateway/globalGatewayConnection';
import Logger from './Logger';
const { log: authLog, error: authError } = Logger([ 'Authenticator' ]);
const Authenticator = { const Authenticator = {
getLoggedInUserFromCookie: async function() { getLoggedInUserFromCookie: async function() {
authLog('Fetching current logged in user status...');
const { json, isOK, err } = await APIRequest.authenticated('/api/v1/users/current/info'); 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... // NOTE(hippoz): this function has a stupid side-effect but this will have to do for now...
gatewayConnection.connect(json.user.token); gatewayConnection.connect(json.user.token);
return json.user; return json.user;

View file

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

View file

@ -51,12 +51,16 @@ export default function Login() {
} }
return ( 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 /> <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 /> <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 } /> <Notification text={ info } />
</div> </div>
); );

View file

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

View file

@ -4,7 +4,7 @@ export default function UserProfileLink({ user, size }) {
let picture; let picture;
if (!size) size = 32; if (!size) size = 32;
if (size !== 0) {
// TODO: Make a debug error message for then the size does not exist // TODO: Make a debug error message for then the size does not exist
const pictureClass = `profile-picture profile-picture-${size}`; const pictureClass = `profile-picture profile-picture-${size}`;
@ -14,6 +14,9 @@ export default function UserProfileLink({ user, size }) {
} else { } else {
picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img> picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
} }
} else {
picture = null;
}
return ( return (
<div className="profile-link"> <div className="profile-link">

View file

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

View file

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

View file

@ -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 += `[${v}] `;
} }
}
//str += '%c';
switch (type) { switch (type) {
case 'log': { case 'log': {
console.log(str, ...args); console.log(str, style, ...args);
break;
} }
case 'error': { case 'error': {
console.error(str, ...args); console.error(str, style, ...args);
break;
} }
case 'warn': { case 'warn': {
console.warn(str, ...args); console.warn(str, style, ...args);
break;
} }
case 'genmsg': { case 'genmsg': {
return str; return str;
} }
}
default: {
return str; return str;
} }
}
}; };
export default function Logger(components, types=['warn', 'error', 'log']) { export default function Logger(components, types=['warn', 'error', 'log']) {
const loggerObj = {}; const loggerObj = {};
for (type of types) { for (const type of types) {
loggerObj[type] = loggerOfType(components, type); loggerObj[type] = loggerOfType(components, type);
} }

View file

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