Compare commits

..

2 commits

Author SHA1 Message Date
hippoz
5eb1c2d0ae
feat: message history from message-history branch 2021-10-04 22:43:20 +03:00
hippoz
8f4e3980c7
improvement!: clean up and optimize imports 2021-10-04 22:35:40 +03:00
19 changed files with 104 additions and 60 deletions

View file

@ -1,14 +1,10 @@
import Logger from '../common/util/Logger';
import Logger from '../common/util/logger';
import gateway from "./gateway/globalGatewayConnection";
import token from "./tokenManager";
import { getToken } from "./tokenManager";
const { log: authLog } = Logger([ 'Authenticator' ]);
const Authenticator = {
login: async function() {
export function login() {
authLog('Logging in through gateway...');
return gateway.connect(token.getToken());
}
return gateway.connect(getToken());
};
export default Authenticator;

View file

@ -1,4 +1,4 @@
import logger from "../../common/util/Logger";
import logger from "../../common/util/logger";
const { log: logGateway } = logger([ "Gateway" ]);
const { log: logRtc } = logger([ "Gateway", "RTC" ]);

View file

@ -1,7 +1,7 @@
import GatewayConnection from './GatewayConnection';
import config from '../../config';
import store from '../../common/store';
import logger from '../../common/util/Logger';
import logger from '../../common/util/logger';
const { log } = logger(["globalGatewayConnection"]);
const { warn: experimentsWarn } = logger(["globalGatewayConnection", "Experiments"]);
@ -18,6 +18,7 @@ const wsCloseCodes = {
NOT_AUTHORIZED: [4006, "Not authorized"],
FLOODING: [4007, "Flooding"],
NO_PING: [4008, "No ping"],
UNSUPPORTED_ATTRIBUTE: [4009, "Unsupported attribute."],
};
const cancelReconnectionForCodes = [
wsCloseCodes.NOT_AUTHENTICATED[0],
@ -25,6 +26,7 @@ const cancelReconnectionForCodes = [
wsCloseCodes.SERVER_DENIED_CONNECTION[0],
wsCloseCodes.TOO_MANY_SESSIONS[0],
wsCloseCodes.FLOODING[0],
wsCloseCodes.UNSUPPORTED_ATTRIBUTE[0],
];
globalGatewayConnection.onopen = (sessionData) => {

View file

@ -1,7 +1,7 @@
import config from '../config';
import token from "./tokenManager";
import { getToken } from "./tokenManager";
async function APIRequest(endpoint, options) {
export async function APIRequest(endpoint, options) {
let res;
let json;
let isOK = false;
@ -28,7 +28,7 @@ async function APIRequest(endpoint, options) {
return { res, json, isOK, err };
}
APIRequest.authenticated = async function(endpoint, options) {
export async function authenticated(endpoint, options) {
let res;
let json;
let isOK = false;
@ -38,7 +38,7 @@ APIRequest.authenticated = async function(endpoint, options) {
if (!options.headers) options.headers = {};
options.headers = {
"Authorization": token.getToken(),
"Authorization": getToken(),
...options.headers
};

View file

@ -1,6 +1,7 @@
const tokenManager = {
getToken: () => localStorage.getItem("token"),
setToken: (token) => localStorage.setItem("token", token)
export function getToken() {
return localStorage.getItem("token");
};
export default tokenManager;
export function setToken(token) {
localStorage.setItem("token", token);
};

View file

@ -54,6 +54,19 @@ const reducer = (state = intitialState, payload) => {
};
}
case 'messagestore/addmessagesback': {
return {
...state,
messages: {
...state.messages,
[payload.channelId]: [
...payload.messages,
...state.messages[payload.channelId] || []
]
}
};
}
case 'channels/selectchannel': {
return {
...state,

View file

@ -1,11 +1,13 @@
export default function FullMessage({ glyph, title, content }) {
return (<div className="center grow col-flex">
return (
<div className="center grow col-flex">
<div className="greeter-logo">
<span className="greeter-logo-text">{ glyph }</span>
<span className="greeter-logo-text">{glyph}</span>
</div>
<span className="greeter-branding-name">{ title }</span>
<span className="greeter-branding-name">{title}</span>
<div className="center">
{ content }
{content}
</div>
</div>)
</div>
);
}

View file

@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
import Notification from '../Notification';
import APIRequest from '../../api/request';
import { getSignupMessageFromError } from '../../common/util/Errors'
import { getSignupMessageFromError } from '../../common/util/errors'
export default function Create() {
const history = useHistory();
@ -11,7 +11,6 @@ export default function Create() {
const [ usernameInput, setUsernameInput ] = useState();
const [ passwordInput, setPasswordInput ] = useState();
const [ specialCodeInput, setSpecialCodeInput ] = useState();
const [ specialCodePrompt, setSpecialCodePrompt ] = useState();
const [ info, setInfo ] = useState();

View file

@ -3,9 +3,9 @@ import { useHistory } from 'react-router-dom';
import Notification from '../Notification';
import APIRequest from '../../api/request';
import Authenticator from '../../api/authenticator';
import token from "../../api/tokenManager";
import { getLoginMessageFromError } from '../../common/util/Errors'
import { login } from '../../api/authenticator';
import { setToken } from "../../api/tokenManager";
import { getLoginMessageFromError } from '../../common/util/errors'
export default function Login() {
const history = useHistory();
@ -42,8 +42,8 @@ export default function Login() {
return;
}
token.setToken(json.token);
await Authenticator.login();
setToken(json.token);
await login();
history.push('/');
}

View file

@ -1,8 +1,8 @@
import { useHistory } from 'react-router-dom';
import ChannelProfile from './ChannelProfileLink';
import gatewayConnection from '../../api/gateway/globalGatewayConnection';
import { useHistory } from 'react-router-dom';
export default function ChannelButton({ channel, selected }) {
const history = useHistory();

View file

@ -1,8 +1,8 @@
import { connect } from 'react-redux'
import ChannelListLoader from './ChannelListLoader';
import ChannelButton from './ChannelButton';
import { connect } from 'react-redux'
function ChannelList({ selectedChannelId, channels }) {
if (!channels) {
return (

View file

@ -1,21 +1,51 @@
import Message from "../Message";
import { useRef, useEffect } from 'react';
import { useRef, useEffect, useState } from 'react';
import { useDispatch } from "react-redux";
export default function ChannelMessageView({messages}) {
import { authenticated } from "../../api/request";
import Message from "../Message";
export default function ChannelMessageView({ messages, channelId }) {
const invisibleBottomMessageRef = useRef();
const [isLoading, setIsLoading] = useState(false);
const dispatch = useDispatch();
const scroller = useRef();
const loadOlderMessages = () => {
if (isLoading) return;
if (!channelId) return;
setIsLoading(true);
const request = messages[0] ? `/api/v1/content/channel/${channelId}/messages?before=${messages[0]._id}` : `/api/v1/content/channel/${channelId}/messages`;
authenticated(request)
.then((res) => {
if (res.json.channelMessages)
dispatch({
type: "messagestore/addmessagesback",
messages: res.json.channelMessages.reverse(),
channelId
})
})
.then(() => {
setIsLoading(false);
});
};
const onScroll = () => {
if (scroller.current.scrollTop === 0) {
loadOlderMessages();
}
};
useEffect(loadOlderMessages, [channelId, dispatch]);
useEffect(() => {
invisibleBottomMessageRef.current.scrollIntoView(true);
}, [messages]);
let messagesView = messages.map((message) => (<Message key={message._id} message={message} />));
if (messagesView === undefined || messagesView.length <= 0)
messagesView = (<div className='no-messages-warning'>
<span style={{ margin: "12px" }}>No messages yet...</span>
</div>);
return <div className="message-list">
{ messagesView }
return <div className="message-list" id="message-list" ref={ scroller } onScroll={ onScroll }>
{messages.map(message => <Message message={message} key={message._id} />)}
<div className="messages-scroll-div" ref={ invisibleBottomMessageRef }></div>
</div>;
}

View file

@ -1,10 +1,10 @@
import { connect, useDispatch } from 'react-redux';
import { useState, useRef, useEffect } from 'react';
import ChannelProfile from './ChannelProfileLink';
import gatewayConnection from '../../api/gateway/globalGatewayConnection';
import ChannelUserList from "./ChannelUserList";
import ProfileLinkLoader from "../ProfileLinkLoader";
import { connect, useDispatch } from 'react-redux';
import { useState, useRef, useEffect } from 'react';
import ChannelMessageView from './ChannelMessageView';
const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
@ -41,7 +41,7 @@ const ChannelView = ({ messages, channel, channelPresenceClientList }) => {
<div className="row-flex hidden-overflow">
<div className="channel-message-panel">
<ChannelMessageView messages={messages}></ChannelMessageView>
<ChannelMessageView messages={messages} channelId={channel._id}></ChannelMessageView>
<div className="col-flex">
<input className="text-input message-input" type="text" placeholder="Go on, type something interesting!" ref={ textInputRef } onKeyDown={ handleTextboxKeydown } onChange={ ({ target }) => setTextInput(target.value) }></input>
</div>

View file

@ -2,12 +2,12 @@ import { useEffect, useState } from 'react';
import { connect } from 'react-redux'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import './../../styles/App.scss';
import Login from '../auth/Login';
import Create from '../auth/Create';
import Root from '../main/Root';
import Authenticator from '../../api/authenticator';
import { login } from '../../api/authenticator';
import Notification from '../Notification';
import './../../styles/App.scss';
import LoggedInMount from './LoggedInMount';
import FullMessage from '../FullMessage';
@ -16,7 +16,7 @@ function App({ user, fullscreenMessage }) {
const [ hasError ] = useState(false);
useEffect(() => {
Authenticator.login();
login();
}, []);
if (user === null && !hasError) {

View file

@ -1,9 +1,10 @@
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import Sidebar from "../Sidebar";
import ChannelView from "../channel/ChannelView";
import GradientBanner from "../GradientBanner";
import UserView from "../user/UserView";
import { connect } from "react-redux";
function LoggedInMount({ gradientBannerNotificationText }) {
const { channelId, userId } = useParams();

View file

@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import APIRequest from "../../api/request";
import { authenticated } from "../../api/request";
import UserProfile from "./UserProfileLink";
import ProfileLinkLoader from "../ProfileLinkLoader";
@ -7,7 +7,7 @@ export default function UserView({ userId }) {
const [userObject, setUserObject] = useState(null);
useEffect(() => {
APIRequest.authenticated(`/api/v1/users/user/${userId}/info`, {
authenticated(`/api/v1/users/user/${userId}/info`, {
method: 'GET',
headers: {
"Accept": "application/json"
@ -23,8 +23,8 @@ export default function UserView({ userId }) {
if (userObject) {
view = <>
<UserProfile user={ userObject } size="32" />
{(userObject.role === "ADMIN") && <span>Admin</span>}
{(userObject.role === "USER") && <span>User</span>}
{(userObject.role === "ADMIN") && <span style={{ padding: "12px" }}>Admin</span>}
{(userObject.role === "USER") && <span style={{ padding: "12px" }}>User</span>}
</>
} else {
view = <>

View file

@ -69,7 +69,7 @@
}
.profile-username {
font-weight: 500;
font-weight: 600;
font-size: 1rem;
line-height: 1.256rem;
}