what is life
This commit is contained in:
parent
dc08d02dc8
commit
e3bb4ce125
20 changed files with 23719 additions and 3211 deletions
26430
bfrontend/package-lock.json
generated
26430
bfrontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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');
|
||||
|
|
|
@ -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);
|
||||
|
||||
// TODO: set up proper event listening and such, not this dumb crap
|
||||
this.onDisconnect = () => {}
|
||||
this.onConnect = () => {}
|
||||
this.handshakeCompleted = false;
|
||||
this.sessionInformation = null;
|
||||
|
||||
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;
|
|
@ -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 } });
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
|
@ -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 } />
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
75
bfrontend/src/Components/Channels/ChannelList.js
Normal file
75
bfrontend/src/Components/Channels/ChannelList.js
Normal 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);
|
|
@ -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) {
|
8
bfrontend/src/Components/Channels/ChannelProfileLink.js
Normal file
8
bfrontend/src/Components/Channels/ChannelProfileLink.js
Normal 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 } />
|
||||
);
|
||||
}
|
|
@ -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);
|
|
@ -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}
|
|
@ -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} />
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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 } />
|
||||
);
|
||||
|
|
|
@ -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;
|
|
@ -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
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 }
|
Loading…
Reference in a new issue