what is life

This commit is contained in:
hippoz 2021-03-25 20:22:48 +02:00
parent dc08d02dc8
commit e3bb4ce125
No known key found for this signature in database
GPG key ID: 7C52899193467641
20 changed files with 23719 additions and 3211 deletions

26430
bfrontend/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -5,6 +5,9 @@ import Logger from '../Util/Logger';
const { log: authLog, error: authError } = Logger([ 'Authenticator' ]);
const Authenticator = {
getToken: function() {
return localStorage.getItem("token");
},
getLoggedInUserFromCookie: async function() {
authLog('Fetching current logged in user status...');
const { json, isOK, err } = await APIRequest.authenticated('/api/v1/users/current/info');

View file

@ -1,85 +1,121 @@
import io from 'socket.io-client';
import logger from "../../Util/Logger";
import Logger from '../../Util/Logger';
const logGateway = logger([ "Gateway" ]);
const opcodes = {
0: { name: "HELLO", data: "JSON" },
1: { name: "YOO", data: "JSON" },
2: { name: "YOO_ACK", data: "JSON" },
3: { name: "ACTION_CREATE_MESSAGE", data: "JSON" },
4: { name: "EVENT_CREATE_MESSAGE", data: "JSON" }
};
const opcodeSeparator = "@";
const parseMessage = (message) => {
if (typeof message !== "string") throw new Error("msg: message not a string");
const stringParts = message.split(opcodeSeparator);
if (stringParts < 2) throw new Error("msg: message does not split into more than 2 parts");
const components = [ stringParts.shift(), stringParts.join(opcodeSeparator) ];
const op = parseInt(components[0]);
if (isNaN(op)) throw new Error(`msg: message does not contain valid opcode: ${op}`);
const opcodeData = opcodes[op];
let data = components[1];
if (!opcodeData) throw new Error(`msg: message contains unknown opcode ${op}`);
if (opcodeData.data === "JSON") {
data = JSON.parse(data);
} else if (opcodeData.data === "string") {
data = data.toString(); // NOTE: This isnt needed lol
} else {
throw new Error(`msg: invalid data type on opcode ${op}`);
}
return {
opcode: op,
data: data,
dataType: opcodeData.data,
opcodeType: opcodeData.name || null
};
};
const getOpcodeByName = (name) => {
for (const [key, value] of Object.entries(opcodes)) if (value.name === name) return key;
};
const { log: gatewayLog } = Logger([ 'Gateway' ]);
const { log: gatewayHandshakeLog } = Logger([ 'Gateway', 'Handshake' ]);
class GatewayConnection {
constructor(url="") {
this.isConnected = false;
this.socket = null;
this.url = url;
constructor(token, gatewayUrl) {
this.ws = new WebSocket(gatewayUrl);
this.handshakeCompleted = false;
this.sessionInformation = null;
// TODO: set up proper event listening and such, not this dumb crap
this.onDisconnect = () => {}
this.onConnect = () => {}
this.ws.onopen = () => logGateway("Open");
this.ws.onclose = (e) => {
this.handshakeCompleted = false;
logGateway(`Close: ${e.code}:${e.reason}`);
this.fire("onclose", e);
};
this.ws.onmessage = (message) => {
try {
const packet = parseMessage(message.data);
if (!packet) return console.error("gateway: invalid packet from server");
switch (packet.opcodeType) {
case "HELLO": {
// Got HELLO from server, send YOO as soon as possible
logGateway("Got HELLO", packet.data);
logGateway("Sending YOO");
this.ws.send(this.packet("YOO", { token }));
break;
}
case "YOO_ACK": {
// Server accepted connection
logGateway("Got YOO_ACK", packet.data);
this.handshakeCompleted = true;
this.sessionInformation = packet.data;
logGateway("Handshake complete");
this.fire("onopen", packet.data);
break;
}
case "EVENT_CREATE_MESSAGE": {
// New message
// console.log("gateway: got new message", packet.data);
this.fire("onmessage", packet.data);
break;
}
default: {
logGateway("Got unknown packet", message.data);
break;
}
}
} catch(e) {
return console.error("err: gateway:", e);
}
};
}
}
GatewayConnection.prototype.disconnect = function() {
this.socket?.disconnect();
this.socket = null;
this.isConnected = false;
GatewayConnection.prototype.sendMessage = function(content, channelId) {
if (!this.sessionInformation) throw new Error("gateway: tried to send message before handshake completion");
this.ws.send(this.packet("ACTION_CREATE_MESSAGE", {
content,
channel: {
_id: channelId
}
}));
};
GatewayConnection.prototype.connect = function(token) {
gatewayHandshakeLog('Trying to connect to gateway');
this.socket = io(`${this.url}/gateway`, {
query: {
token
},
transports: ['websocket']
});
this.socket.on('connect', () => {
this.socket.once('hello', (debugInfo) => {
gatewayHandshakeLog('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.');
});
})
this.socket.on('error', (e) => {
gatewayLog('Gateway error', e);
this.isConnected = false;
this.socket = null;
this.onDisconnect('DISCONNECT_ERR', e);
});
this.socket.on('disconnectNotification', (e) => {
gatewayLog('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);
this.isConnected = false;
this.onDisconnect('DISCONNECT', e);
});
GatewayConnection.prototype.packet = function(op, data) {
if (typeof op === "string") op = getOpcodeByName(op);
return `${op}${opcodeSeparator}${JSON.stringify(data)}`;
};
GatewayConnection.prototype.sendMessage = function(categoryId, content) {
if (!this.isConnected) return 1;
if (content.length >= 2000) return 1;
this.socket.emit('message', {
category: {
_id: categoryId
},
content
});
};
GatewayConnection.prototype.subscribeToCategoryChats = function(categoryIds) {
if (!this.isConnected) return;
gatewayLog('Subscribing to channel(s)', categoryIds);
this.socket.emit('subscribe', categoryIds);
GatewayConnection.prototype.fire = function(eventName, ...args) {
if (this[eventName]) return this[eventName](...args);
};
export default GatewayConnection;

View file

@ -1,19 +1,22 @@
import GatewayConnection from './GatewayConnection';
import config from '../../Config';
import Authenticator from '../Authenticator';
import store from '../../Global/store';
console.log(Authenticator);
const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
const globalGatewayConnection = new GatewayConnection(Authenticator.getToken(), config.gatewayUrl);
globalGatewayConnection.onConnect = function() {
globalGatewayConnection.onopen = (sessionData) => {
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: true } });
globalGatewayConnection.socket.on('message', (message) => {
store.dispatch({ type: 'messagestore/addmessage', message });
});
globalGatewayConnection.socket.on('clientListUpdate', (clientListEvent) => {
store.dispatch({ type: 'presence/category/clientlistupdate', clientListEvent });
});
store.dispatch({ type: 'authenticator/updatelocaluserobject', user: sessionData.user });
store.dispatch({ type: 'channels/updatechannellist', user: sessionData.channels })
};
globalGatewayConnection.onDisconnect = function() {
globalGatewayConnection.onmessage = (message) => {
store.dispatch({ type: 'messagestore/addmessage', message });
};
globalGatewayConnection.onclose = function() {
store.dispatch({ type: 'gateway/connectionstatus', gateway: { isConnected: false } });
};

View file

@ -1,75 +0,0 @@
import CategoryListLoader from './CategoryListLoader';
import CategoryButton from './CategoryButton';
import APIRequest from '../../API/APIRequest';
import { couldNotReach } from '../../Util/Errors';
import { connect, useDispatch } from 'react-redux'
import { useState, useEffect } from 'react';
import Logger from '../../Util/Logger';
import gatewayConnection from '../../API/Gateway/globalGatewayConnection';
const { log: loaderLog } = Logger([ 'CategoryList', 'Loader' ]);
function CategoryList({ selectedCategoryId, gatewayStatus }) {
const [ categoryList, setCategoryList ] = useState();
const [ error, setError ] = useState();
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 });
loaderLog('Subscribing to all categories...');
})
.catch(() => {
setError(true);
});
}, [dispatch]);
useEffect(() => {
if (!categoryList) return;
if (!gatewayStatus.isConnected) return;
// TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server
gatewayConnection.subscribeToCategoryChats(categoryList.map(category => category._id));
}, [gatewayStatus, categoryList]);
if (!categoryList) {
if (error) {
return (
<div>
<p>
{ couldNotReach }
</p>
</div>
);
} else {
return (
<div>
<CategoryListLoader />
</div>
);
}
} else {
return (
<div className="category-list">
{ categoryList.map((category) => ( <CategoryButton key={ category._id } category={ category } selected={ (category._id === selectedCategoryId) } /> )) }
</div>
);
}
}
const stateToProps = (state) => {
return {
selectedCategoryId: state?.selectedCategoryId,
gatewayStatus: state?.gateway,
};
};
export default connect(stateToProps)(CategoryList);

View file

@ -1,8 +0,0 @@
import ProfileLink from '../UI/ProfileLink'
// TODO: Stop using this component and just use the ProfileLink component
export default function CategoryProfile({ category, size, offset=false }) {
return (
<ProfileLink object={ category } size={ size } type="category" offset={ offset } />
);
}

View file

@ -1,23 +1,23 @@
import CategoryProfile from './CategoryProfileLink';
import ChannelProfile from './ChannelProfileLink';
import gatewayConnection from '../../API/Gateway/globalGatewayConnection';
import { useHistory } from 'react-router-dom';
export default function CategoryButton({ category, selected }) {
export default function ChannelButton({ channel, selected }) {
const history = useHistory();
let buttonClasses = 'button category-button';
let buttonClasses = 'button channel-button';
if (selected) buttonClasses += ' pressed';
const handleClick = () => {
if (gatewayConnection.isConnected) {
history.push(`/categories/${category._id}`);
history.push(`/channels/${channel._id}`);
}
};
return (
<button className={ buttonClasses } onClick={ handleClick }>
<CategoryProfile category={ category } size="32" />
<ChannelProfile channel={ channel } size="32" />
</button>
);
}

View file

@ -0,0 +1,75 @@
import ChannelListLoader from './ChannelListLoader';
import ChannelButton from './ChannelButton';
import APIRequest from '../../API/APIRequest';
import { couldNotReach } from '../../Util/Errors';
import { connect, useDispatch } from 'react-redux'
import { useState, useEffect } from 'react';
import Logger from '../../Util/Logger';
import gatewayConnection from '../../API/Gateway/globalGatewayConnection';
const { log: loaderLog } = Logger([ 'ChannelList', 'Loader' ]);
function ChannelList({ selectedChannelId, gatewayStatus }) {
const [ channelList, setChannelList ] = useState();
const [ error, setError ] = useState();
const dispatch = useDispatch();
useEffect(() => {
loaderLog('Loading ChannelList...');
APIRequest.authenticated('/api/v1/content/channel/list?count=50')
.then(({ isOK, json }) => {
if (!isOK) return setError(true);
loaderLog('Got channel list from server, dispatching...');
setChannelList(json.channels || []);
dispatch({ type: 'channels/updatechannellist', channels: json.channels });
loaderLog('Subscribing to all channels...');
})
.catch(() => {
setError(true);
});
}, [dispatch]);
useEffect(() => {
if (!channelList) return;
if (!gatewayStatus.isConnected) return;
// TODO: IMPORTANT: Subscribing to a lot of channels puts strain on the server
gatewayConnection.subscribeToChannelChats(channelList.map(channel => channel._id));
}, [gatewayStatus, channelList]);
if (!channelList) {
if (error) {
return (
<div>
<p>
{ couldNotReach }
</p>
</div>
);
} else {
return (
<div>
<ChannelListLoader />
</div>
);
}
} else {
return (
<div className="channel-list">
{ channelList.map((channel) => ( <ChannelButton key={ channel._id } channel={ channel } selected={ (channel._id === selectedChannelId) } /> )) }
</div>
);
}
}
const stateToProps = (state) => {
return {
selectedChannelId: state?.selectedChannelId,
gatewayStatus: state?.gateway,
};
};
export default connect(stateToProps)(ChannelList);

View file

@ -1,7 +1,7 @@
import ContentLoader from "react-content-loader"
import { useMediaPredicate } from "react-media-hook";
export default function CategoryListLoader(props) {
export default function ChannelListLoader(props) {
const lessThan600 = useMediaPredicate("(max-width: 600px)");
if (lessThan600) {

View file

@ -0,0 +1,8 @@
import ProfileLink from '../UI/ProfileLink'
// TODO: Stop using this component and just use the ProfileLink component
export default function ChannelProfile({ channel, size, offset=false }) {
return (
<ProfileLink object={ channel } size={ size } type="channel" offset={ offset } />
);
}

View file

@ -1,5 +1,5 @@
import CategoryViewLoader from './CategoryViewLoader';
import CategoryProfile from './CategoryProfileLink';
import ChannelViewLoader from './ChannelViewLoader';
import ChannelProfile from './ChannelProfileLink';
import Message from '../Messages/Message';
import gatewayConnection from '../../API/Gateway/globalGatewayConnection';
@ -7,10 +7,10 @@ import { useParams } from 'react-router-dom';
import { connect, useDispatch } from 'react-redux';
import { useState, useRef, useEffect } from 'react';
function CategoryView({ categories, messages }) {
function ChannelView({ channels, messages }) {
const { id } = useParams();
const [ textInput, setTextInput ] = useState('');
const [ category, setCategory ] = useState();
const [ channel, setChannel ] = useState();
const textInputRef = useRef(null);
const invisibleBottomMessageRef = useRef(null);
@ -33,18 +33,18 @@ function CategoryView({ categories, messages }) {
}
useEffect(() => {
if (!categories) return;
if (!channels) return;
setCategory(categories.find(x => x._id === id));
}, [ categories, id ]);
setChannel(channels.find(x => x._id === id));
}, [ channels, id ]);
useEffect(() => {
if (!category) return;
if (!channel) return;
dispatch({ type: 'categories/selectcategory', categoryId: category._id });
}, [ category, dispatch ]);
dispatch({ type: 'channels/selectchannel', channelId: channel._id });
}, [ channel, dispatch ]);
if (category) {
if (channel) {
let messagesView = messages.map(m => <Message key={ m._id } message={ m } />);
if (messagesView === undefined || messagesView.length <= 0) {
@ -58,7 +58,7 @@ function CategoryView({ categories, messages }) {
return (
<div className="card main-card main-content-card">
<div className="card bar-card">
<CategoryProfile category={ category } />
<ChannelProfile channel={ channel } />
</div>
<div className="card message-list-card">
{ messagesView }
@ -73,7 +73,7 @@ function CategoryView({ categories, messages }) {
return (
<div className="card main-card main-content-card">
<div className="card bar-card">
<CategoryViewLoader />
<ChannelViewLoader />
</div>
<div className="card message-list-card">
@ -88,12 +88,12 @@ function CategoryView({ categories, messages }) {
}
const stateToProps = (state, ownProps) => {
const categoryId = ownProps.match.params.id; // NOTE(hippoz): kind of a hack, but it works and idk if theres any other solution
const channelId = ownProps.match.params.id; // NOTE(hippoz): kind of a hack, but it works and idk if theres any other solution
return {
categories: state?.categories,
messages: state?.messages[categoryId] || [],
channels: state?.channels,
messages: state?.messages[channelId] || [],
};
};
export default connect(stateToProps)(CategoryView);
export default connect(stateToProps)(ChannelView);

View file

@ -1,6 +1,6 @@
import ContentLoader from "react-content-loader"
export default function CategoryViewLoader(props) {
export default function ChannelViewLoader(props) {
return (
<ContentLoader
speed={1.5}

View file

@ -4,7 +4,7 @@ import Authenticator from '../../API/Authenticator';
import Notification from '../UI/Notification';
import './../../Styles/App.scss';
import { couldNotReach } from '../../Util/Errors';
import CategoryView from '../Categories/CategoryView';
import ChannelView from '../Channels/ChannelView';
import Sidebar from '../UI/Sidebar';
import { useEffect, useState } from 'react';
@ -44,7 +44,7 @@ function App({ user }) {
{ user && <Sidebar /> }
<Switch>
<Route path="/login" component={ Login } />
<Route path="/categories/:id" component={ CategoryView } />
<Route path="/channels/:id" component={ ChannelView } />
<Route path="/">
<Root user={user} />

View file

@ -18,7 +18,7 @@ export default function ProfileLink({ object, size=32, type, offset=true, childr
}
const classes = offset ? 'profile-link profile-link-offset-text' : 'profile-link';
const title = type === 'category' ? object.title : object.username;
const title = type === 'channel' ? object.title : object.username;
const bottomInfo = offset ? children : null;
return (

View file

@ -1,15 +1,15 @@
import CategoryList from '../Categories/CategoryList';
import ChannelList from '../Channels/ChannelList';
import UserProfileLink from '../Users/UserProfileLink';
import { connect } from 'react-redux';
function Sidebar({ user }) {
return (
<div className="card main-card category-list-container">
<div className="card main-card channel-list-container">
<div className="card bar-card">
<UserProfileLink user={ user } />
</div>
<CategoryList />
<ChannelList />
</div>
)
}

View file

@ -1,7 +1,7 @@
import ProfileLink from '../UI/ProfileLink'
// TODO: Stop using this component and just use the ProfileLink component
export default function CategoryProfile({ user, size, offset=false }) {
export default function ChannelProfile({ user, size, offset=false }) {
return (
<ProfileLink object={ user } size={ size } type="user" offset={ offset } />
);

View file

@ -1,6 +1,6 @@
const config = {
apiUrl: 'http://localhost:3000',
gatewayUrl: '' // Leave blank for it to look for the gateway on the current page, if that makes sense
gatewayUrl: '', // Leave blank for it to look for the gateway on the current page, if that makes sense
};
export default config;

View file

@ -3,13 +3,13 @@ import { createStore } from 'redux';
const intitialState = {
user: null,
categories: null,
channels: null,
gateway: { isConnected: false },
messages: {},
categoryPresenceClientList: {},
channelPresenceClientList: {},
selectedCategoryId: undefined
selectedChannelId: undefined
};
const reducer = (state = intitialState, payload) => {
@ -21,10 +21,10 @@ const reducer = (state = intitialState, payload) => {
};
}
case 'categories/updatecategorylist': {
case 'channels/updatechannellist': {
return {
...state,
categories: payload.categories
channels: payload.channels
};
}
@ -42,27 +42,27 @@ const reducer = (state = intitialState, payload) => {
...state,
messages: {
...state.messages,
[payload.message.category._id]: [
...state.messages[payload.message.category._id] || [],
[payload.message.channel._id]: [
...state.messages[payload.message.channel._id] || [],
payload.message
]
}
};
}
case 'categories/selectcategory': {
case 'channels/selectchannel': {
return {
...state,
selectedCategoryId: payload.categoryId
selectedChannelId: payload.channelId
};
}
case 'presence/category/clientlistupdate': {
case 'presence/channel/clientlistupdate': {
return {
...state,
categoryPresenceClientList: {
...state.categoryPresenceClientList || [],
[payload.clientListEvent.category._id]: payload.clientListEvent.clientList
channelPresenceClientList: {
...state.channelPresenceClientList || [],
[payload.clientListEvent.channel._id]: payload.clientListEvent.clientList
}
};
}

View file

@ -34,12 +34,12 @@ $nord15: #B48EAD;
--accent-color-light: #{$nord2darker};
--accent-color-very-light: #{$nord3darker};
--category-top-bar-color: var(--accent-color-light);
--category-bottom-text-bar-color: var(--accent-color-light);
--channel-top-bar-color: var(--accent-color-light);
--channel-bottom-text-bar-color: var(--accent-color-light);
--category-list-background-color: var(--background-color);
--category-message-list-background-color: var(--background-color);
--category-message-color: var(--accent-color-dark);
--channel-list-background-color: var(--background-color);
--channel-message-list-background-color: var(--background-color);
--channel-message-color: var(--accent-color-dark);
--button-color: var(--accent-color-dark);
--button-hover-color: var(--accent-color-light);
@ -48,9 +48,9 @@ $nord15: #B48EAD;
--default-border-radius: 0px;
--default-button-border-radius: 0px;
--category-message-border-radius: 0px;
--channel-message-border-radius: 0px;
--bar-cards-border-radius: 0px;
--category-button-border-radius: 4px;
--channel-button-border-radius: 4px;
}
::-webkit-scrollbar {
@ -100,7 +100,7 @@ body {
@include card;
&.bar-card {
background-color: var(--category-top-bar-color);
background-color: var(--channel-top-bar-color);
min-height: 50px;
padding: 5px;
@ -115,7 +115,7 @@ body {
}
&.bar-card-bottom {
background-color: var(--category-bottom-text-bar-color);
background-color: var(--channel-bottom-text-bar-color);
box-shadow: 0px -3px 5px var(--card-box-shadow-color);
min-height: 40px;
@ -132,7 +132,7 @@ body {
flex-grow: 1;
box-shadow: none;
overflow: auto;
background-color: var(--category-message-list-background-color);
background-color: var(--channel-message-list-background-color);
}
}
@ -161,7 +161,7 @@ body {
border-radius: var(--default-button-border-radius);
min-height: 25px;
&.category-button {
&.channel-button {
min-width: 200px;
max-width: 200px;
@ -169,7 +169,7 @@ body {
max-height: 100px;
margin: 4px;
border-radius: var(--category-button-border-radius);
border-radius: var(--channel-button-border-radius);
}
&.pressed {
@ -181,19 +181,19 @@ body {
background-color: var(--accent-color-light);
}
.category-list {
.channel-list {
display: flex;
flex-direction: column;
word-wrap: break-word;
}
.category-list-container {
.channel-list-container {
@include fancy-scrollbar-firefox;
overflow: auto;
overflow-x: hidden;
background-color: var(--category-list-background-color);
background-color: var(--channel-list-background-color);
}
.profile-picture {
@ -256,7 +256,7 @@ body {
margin-left: 5px;
margin-right: 5px;
padding: 5px;
border-radius: var(--category-message-border-radius);
border-radius: var(--channel-message-border-radius);
background-color: var(--background-color);
}
@ -281,7 +281,7 @@ body {
}
@media only screen and (max-width: 600px) {
.button.category-button {
.button.channel-button {
min-width: 100px;
max-width: 100px;
}

View file

@ -63,8 +63,8 @@ const getCreatePostError = (json) => {
case 'body': {
return 'Invalid content. Must be between 3 and 1000 characters';
}
case 'category': {
return 'Invalid category. Something went wrong.';
case 'channel': {
return 'Invalid channel. Something went wrong.';
}
default: {
return 'Invalid value sent to server. Something went wrong.';
@ -73,7 +73,7 @@ const getCreatePostError = (json) => {
}
case 'ERROR_CATEGORY_NOT_FOUND': {
return 'The category you tried to post to no longer exists.';
return 'The channel you tried to post to no longer exists.';
}
case 'ERROR_ACCESS_DENIED': {
@ -86,7 +86,7 @@ const getCreatePostError = (json) => {
}
};
const getCreateCategoryError = (json) => {
const getCreateChannelError = (json) => {
switch (json.message) {
case 'ERROR_REQUEST_INVALID_DATA': {
switch (json.errors[0].param) {
@ -110,6 +110,6 @@ const getCreateCategoryError = (json) => {
}
};
const couldNotReach = "Whoops! We couldn't reach Brainlet."
const couldNotReach = "Whoops! We couldn't reach Brainlet.";
module.exports = { couldNotReach, getLoginMessageFromError, getSignupMessageFromError, getCreatePostError, getCreateCategoryError }
module.exports = { couldNotReach, getLoginMessageFromError, getSignupMessageFromError, getCreatePostError, getCreateChannelError }