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

Compare commits

base: hippoz:9f0a9a66295513c9048690acb8152e468afc27a1
Branches Tags
hippoz:master
..
compare: hippoz:76598561d7daaef9dc147dd01efb4e1ee4a31162
Branches Tags
hippoz:master

No commits in common. "9f0a9a66295513c9048690acb8152e468afc27a1" and "76598561d7daaef9dc147dd01efb4e1ee4a31162" have entirely different histories.
9f0a9a6629 ... 76598561d7

9 changed files with 51 additions and 100 deletions
Show stats Expand all files Collapse all files

22
bfrontend/src/Authenticator.js
View file

@ -1,28 +1,12 @@
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) {
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]'}"`);
if (!isOK && err) throw new Error(err);
if (!isOK && !err) return undefined;
if (!json || !json.user) return undefined;
// 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 }) {
function App({ user, gateway }) {
const [ notificationText, setNotificationText ] = useState('');
const [ hasError, setHasError ] = useState(false);
@ -65,7 +65,8 @@ function App({ user }) {
const stateToProps = (state) => {
return {
user: state?.user
user: state?.user,
gateway: state?.gateway
};
};

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

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

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

@ -5,9 +5,6 @@ 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();
@ -16,13 +13,11 @@ 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);
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,18 +4,15 @@ 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}`;
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>
}
// 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>
} else {
picture = null;
picture = <img className={ pictureClass } src={ defaultProfile } alt="Profile"></img>
}
return (

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

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

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

@ -9,12 +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 } });
};
export default globalGatewayConnection;
export default globalGatewayConnection;

50
bfrontend/src/Logger.js
View file

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

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

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