keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

WIP

Browse Source
pull/1783/head
Audric Ackermann 4 years ago
parent a54345a42e
commit 0e4d7ec21a
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
5 changed files with 123 additions and 91 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -107,6 +107,7 @@
"react-toastify": "^6.0.9",
"react-use": "^17.2.1",
"react-virtualized": "9.22.3",
"react-window-infinite-loader": "^1.0.7",
"read-last-lines": "1.3.0",
"redux": "4.0.1",
"redux-logger": "3.0.6",

177
ts/components/session/conversation/SessionMessagesList.tsx
Unescape Escape View File

@ -7,7 +7,6 @@ import { SessionScrollButton } from '../SessionScrollButton';
import { Constants } from '../../../session';
import _ from 'lodash';
import { contextMenu } from 'react-contexify';
import { AttachmentType, AttachmentTypeWithPath } from '../../../types/Attachment';
import { GroupNotification } from '../../conversation/GroupNotification';
import { GroupInvitation } from '../../conversation/GroupInvitation';
import {
@ -15,7 +14,6 @@ import {
PropsForExpirationTimer,
PropsForGroupInvitation,
PropsForGroupUpdate,
PropsForMessage,
ReduxConversationType,
SortedMessageModelProps,
} from '../../../state/ducks/conversations';
@ -39,10 +37,8 @@ import {
getMessagesOfSelectedConversation,
getSelectedConversation,
getSelectedConversationKey,
getSelectedMessageIds,
isMessageSelectionMode,
} from '../../../state/selectors/conversations';
import { saveAttachmentToDisk } from '../../../util/attachmentsUtil';
interface State {
showScrollButton: boolean;
@ -164,6 +160,91 @@ const GenericMessageItem = (props: {
);
};
const MessageList = ({ hasNextPage: boolean, isNextPageLoading, list, loadNextPage }) => {
const messagesProps = useSelector(getMessagesOfSelectedConversation);
let playableMessageIndex = 0;
return (
<>
{messagesProps.map((messageProps: SortedMessageModelProps) => {
const timerProps = messageProps.propsForTimerNotification;
const propsForGroupInvitation = messageProps.propsForGroupInvitation;
const propsForDataExtractionNotification = messageProps.propsForDataExtractionNotification;
const groupNotificationProps = messageProps.propsForGroupNotification;
// IF we found the first unread message
// AND we are not scrolled all the way to the bottom
// THEN, show the unread banner for the current message
const showUnreadIndicator = Boolean(messageProps.firstUnread);
console.warn('&& this.getScrollOffsetBottomPx() !== 0');
if (groupNotificationProps) {
return (
<GroupUpdateItem
key={messageProps.propsForMessage.id}
groupNotificationProps={groupNotificationProps}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (propsForGroupInvitation) {
return (
<GroupInvitationItem
key={messageProps.propsForMessage.id}
propsForGroupInvitation={propsForGroupInvitation}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (propsForDataExtractionNotification) {
return (
<DataExtractionNotificationItem
key={messageProps.propsForMessage.id}
propsForDataExtractionNotification={propsForDataExtractionNotification}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (timerProps) {
return (
<TimerNotificationItem
key={messageProps.propsForMessage.id}
timerProps={timerProps}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (!messageProps) {
return;
}
playableMessageIndex++;
// firstMessageOfSeries tells us to render the avatar only for the first message
// in a series of messages from the same user
return (
<GenericMessageItem
key={messageProps.propsForMessage.id}
playableMessageIndex={playableMessageIndex}
messageId={messageProps.propsForMessage.id}
messageProps={messageProps}
showUnreadIndicator={showUnreadIndicator}
/>
);
})}
</>
);
};
class SessionMessagesListInner extends React.Component<Props, State> {
private scrollOffsetBottomPx: number = Number.MAX_VALUE;
private ignoreScrollEvents: boolean;
@ -264,7 +345,7 @@ class SessionMessagesListInner extends React.Component<Props, State> {
key="typing-bubble"
/>
{this.renderMessages()}
<MessageList />
<SessionScrollButton
show={showScrollButton}
@ -275,92 +356,6 @@ class SessionMessagesListInner extends React.Component<Props, State> {
);
}
private renderMessages() {
const { messagesProps } = this.props;
let playableMessageIndex = 0;
return (
<>
{messagesProps.map((messageProps: SortedMessageModelProps) => {
const timerProps = messageProps.propsForTimerNotification;
const propsForGroupInvitation = messageProps.propsForGroupInvitation;
const propsForDataExtractionNotification =
messageProps.propsForDataExtractionNotification;
const groupNotificationProps = messageProps.propsForGroupNotification;
// IF we found the first unread message
// AND we are not scrolled all the way to the bottom
// THEN, show the unread banner for the current message
const showUnreadIndicator =
Boolean(messageProps.firstUnread) && this.getScrollOffsetBottomPx() !== 0;
if (groupNotificationProps) {
return (
<GroupUpdateItem
key={messageProps.propsForMessage.id}
groupNotificationProps={groupNotificationProps}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (propsForGroupInvitation) {
return (
<GroupInvitationItem
key={messageProps.propsForMessage.id}
propsForGroupInvitation={propsForGroupInvitation}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (propsForDataExtractionNotification) {
return (
<DataExtractionNotificationItem
key={messageProps.propsForMessage.id}
propsForDataExtractionNotification={propsForDataExtractionNotification}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (timerProps) {
return (
<TimerNotificationItem
key={messageProps.propsForMessage.id}
timerProps={timerProps}
messageId={messageProps.propsForMessage.id}
showUnreadIndicator={showUnreadIndicator}
/>
);
}
if (!messageProps) {
return;
}
playableMessageIndex++;
// firstMessageOfSeries tells us to render the avatar only for the first message
// in a series of messages from the same user
return (
<GenericMessageItem
key={messageProps.propsForMessage.id}
playableMessageIndex={playableMessageIndex}
messageId={messageProps.propsForMessage.id}
messageProps={messageProps}
showUnreadIndicator={showUnreadIndicator}
/>
);
})}
</>
);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~~~ MESSAGE HANDLING ~~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

25
ts/state/ducks/conversations.ts
Unescape Escape View File

@ -238,6 +238,7 @@ export type ConversationsStateType = {
selectedMessageIds: Array<string>;
lightBox?: LightBoxOptions;
quotedMessage?: ReplyingToMessageProps;
areMoreMessagesBeingFetched: boolean;
};
async function getMessages(
@ -392,6 +393,7 @@ function getEmptyState(): ConversationsStateType {
messageDetailProps: undefined,
showRightPanel: false,
selectedMessageIds: [],
areMoreMessagesBeingFetched: false,
};
}
@ -742,11 +744,34 @@ const conversationsSlice = createSlice({
return {
...state,
messages: messagesProps,
areMoreMessagesBeingFetched: false,
};
}
return state;
}
);
builder.addCase(
fetchMessagesForConversation.fulfilled,
(state: ConversationsStateType, action: any) => {
// this is called once the messages are loaded from the db for the currently selected conversation
const { messagesProps, conversationKey } = action.payload as FetchedMessageResults;
// double check that this update is for the shown convo
if (conversationKey === state.selectedConversation) {
return {
...state,
messages: messagesProps,
areMoreMessagesBeingFetched: false,
};
}
return state;
}
);
builder.addCase(fetchMessagesForConversation.pending, (state: ConversationsStateType) => {
state.areMoreMessagesBeingFetched = true;
});
builder.addCase(fetchMessagesForConversation.rejected, (state: ConversationsStateType) => {
state.areMoreMessagesBeingFetched = false;
});
},
});

6
ts/state/selectors/conversations.ts
Unescape Escape View File

@ -19,6 +19,7 @@ import {
} from '../../components/conversation/ConversationHeader';
import { LightBoxOptions } from '../../components/session/conversation/SessionConversation';
import { ReplyingToMessageProps } from '../../components/session/conversation/SessionCompositionBox';
import { createSlice } from '@reduxjs/toolkit';
export const getConversations = (state: StateType): ConversationsStateType => state.conversations;
@ -295,3 +296,8 @@ export const getQuotedMessage = createSelector(
getConversations,
(state: ConversationsStateType): ReplyingToMessageProps | undefined => state.quotedMessage
);
export const areMoreMessagesLoading = createSlice(getConversations,
(state: ConversationsStateType): boolean => state.
);

5
yarn.lock
Unescape Escape View File

@ -7931,6 +7931,11 @@ react-virtualized@9.22.3:
prop-types "^15.7.2"
react-lifecycles-compat "^3.0.4"
react-window-infinite-loader@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.7.tgz#958ef1a689d20dce122ef377583acd987760aee8"
integrity sha512-wg3LWkUpG21lhv+cZvNy+p0+vtclZw+9nP2vO6T9PKT50EN1cUq37Dq6FzcM38h/c2domE0gsUhb6jHXtGogAA==
react@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"

Write Preview
Loading…
Cancel
Save