message-history #2

Closed
hippoz wants to merge 3 commits from message-history into master
5 changed files with 60 additions and 16 deletions

View file

@ -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,23 +1,52 @@
import Message from "../Messages/Message";
import { useRef, useEffect } from 'react';
import { CommentDiscussionIcon } from "@primer/octicons-react";
import { useRef, useEffect, useState } from 'react';
import APIRequest from "../../API/APIRequest";
import { useDispatch } from "react-redux";
export default function ChannelMessageView({messages}) {
export default function ChannelMessageView({messages, channelId}) {
const invisibleBottomMessageRef = useRef();
console.log(messages);
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`;
APIRequest.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'>
<CommentDiscussionIcon size={64} />
<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

@ -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

@ -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,
@ -97,4 +110,4 @@ const reducer = (state = intitialState, payload) => {
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;
export default store;

View file

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