Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

grouping messages #11

Merged
merged 5 commits into from
Jun 8, 2022
Merged

grouping messages #11

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
feee3df
Merge pull request #1 from ChatKitty/main
theonej203 Jun 6, 2022
7d12ed9
get the index of the previous message and then check it inside Messag…
theonej203 Jun 6, 2022
035c6e6
Merge branch 'main' of https://github.com/theonej203/chatkitty-chat-d…
theonej203 Jun 6, 2022
f5114fa
finished grouping of messages
theonej203 Jun 7, 2022
b2c038f
implemented the suggested changes
theonej203 Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/fragments/ChatMessages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,11 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
flexDirection="column-reverse"
>
<div ref={messagesEndRef} />
{messages.map((message) => (
{messages.map((message, index) => (
<div key={message.id} id={String(message.id)}>
<MessageListItem
message={message}
index={index}
avatar={
isUserMessage(message) ? (
<UserAvatar
Expand Down
200 changes: 127 additions & 73 deletions src/fragments/MessageListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { Message as ChatKittyMessage, isFileMessage, isTextMessage, isUserMessage } from 'chatkitty';
import {
Message as ChatKittyMessage,
isFileMessage,
isTextMessage,
isUserMessage,
} from 'chatkitty';
import moment from 'moment';
import { ChatAppContext } from 'providers/ChatAppProvider';
import React, { ReactElement, useContext, useEffect, useState } from 'react';
Expand All @@ -14,118 +19,167 @@ import { useHover } from 'react-chat-ui-kit';

import replyIcon from '../assets/images/reply-icon.png';


import Message from './Message';
import PopupEmojiWindow from './PopupEmojiWindow';
import Reactions from './Reactions';

interface MessageListItemProps {
message: ChatKittyMessage;
avatar: ReactElement;
index?: number;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can pass the previous message directly. MessageListItem shouldn't know about messages or run presentational logic.

}



const MessageListItem: React.FC<MessageListItemProps> = ({
message,
avatar,
index,
}: MessageListItemProps) => {
const sender: { displayName: string } = isUserMessage(message)
? message.user
: {
displayName: 'ChatKitty',
};

const [isHovering, hoverProps] = useHover({ mouseEnterDelayMS: 0 });
const {changeReply, getMessageParent} = useContext(ChatAppContext);
const [messageParent, setMessageParent] = useState<ChatKittyMessage | null>(null);
const { changeReply, getMessageParent, messages } =
useContext(ChatAppContext);
const [messageParent, setMessageParent] = useState<ChatKittyMessage | null>(
null
);

const [sameUser, setSameUser] = useState<boolean | null>(true);

useEffect(() => {
getMessageParent(message).then((message) => {
setMessageParent(message)
setMessageParent(message);
});
},[])

if (index !== undefined && index < messages.length - 1) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the moment library for time operations like comparisons.

const previousMessage = messages[index + 1];
const messageTime = message.createdTime
.split('T')
.join('-')
.split('-')
.join(':')
.split(':');
const previousMessageTime = previousMessage.createdTime
.split('T')
.join('-')
.split('-')
.join(':')
.split(':');
let sameTime = true;

for (let i = 0; i < 5; i++) {
if (messageTime[i] !== previousMessageTime[i]) {
console.log(message.id);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this console log

sameTime = false;
break;
}
}

setSameUser(
isUserMessage(previousMessage) &&
previousMessage.user.displayName === sender.displayName &&
sameTime
);
}
}, []);

const changeReplyMessage = () => {
changeReply(message);
}
};

const scrollToElement = () => {
const element = document.getElementById(String(messageParent?.id))
if(element){
const element = document.getElementById(String(messageParent?.id));

if (element) {
element.scrollIntoView(false);
}
}


};

return (<>
{messageParent && isUserMessage(messageParent) &&
<FlexRow
style={{marginLeft:'20px', cursor:'pointer'}}
return (
<div style={{ position: 'relative' }}>
{messageParent && isUserMessage(messageParent) && (
<FlexRow
style={{ marginLeft: '20px', cursor: 'pointer' }}
alignItems="flex-start"
bg={isHovering ? 'backgrounds.contentHover' : ''}
{...hoverProps}
onClick={scrollToElement}
>
<strong>@{messageParent.user.displayName}</strong>
{isTextMessage(messageParent) && <p>: {messageParent.body}</p>}
{isFileMessage(messageParent) && <p>: {messageParent.file.name}</p>}
</FlexRow>
)}
<FlexRow
py="1"
px={[5, 6]}
alignItems="flex-start"
bg={isHovering ? 'backgrounds.contentHover' : ''}
{...hoverProps}
onClick={scrollToElement}
>
<strong>@{messageParent.user.displayName}</strong>
{isTextMessage(messageParent) && <p>: {messageParent.body}</p>}
{isFileMessage(messageParent) && <p>: {messageParent.file.name}</p>}
</FlexRow>
}
<FlexRow
py="1"
px={[5, 6]}
alignItems="flex-start"
bg={isHovering ? 'backgrounds.contentHover' : ''}
{...hoverProps}
>
{avatar}
<FlexColumn marginLeft="5" flexGrow={1}>
<FlexRow marginBottom="1">
<StyledBox marginRight="3">
<Heading>{sender.displayName}</Heading>
</StyledBox>
<Label size={LabelSizes.SMALL}>
{moment(message.createdTime).fromNow()}
</Label>
{isHovering && (
<FlexRow>
<StyledBox
style={{
position: 'relative',
left: '100px',
borderRadius: '20%',
marginLeft:'5px',
height: '17px',
width: '15px',
}}
{(!sameUser || messageParent) && avatar}
<FlexColumn marginLeft="5" flexGrow={1}>
<FlexRow marginBottom="1">
{(!sameUser || messageParent) && (
<StyledBox marginRight="3">
<Heading>{sender.displayName}</Heading>
</StyledBox>
)}
{(!sameUser || messageParent) && (
<Label size={LabelSizes.SMALL}>
{moment(message.createdTime).fromNow()}
</Label>
)}
</FlexRow>

<FlexRow>
<div
style={{
position: 'relative',
left: sameUser && !messageParent ? '30px' : '0px',
}}
>
<Message message={message} />
</div>
{isHovering && (
<FlexRow
style={{ position: 'absolute', top: '10px', right: '50px' }}
>
<PopupEmojiWindow message={message} />

</StyledBox>
<div style={{
position: 'relative',
left: '100px',
borderRadius: '20%',
marginLeft:'5px',
height: '17px',
width: '15px',
}}>
<img src={replyIcon} style={{width:'20px', cursor:'pointer'}} onClick={changeReplyMessage}/>
<div
style={{
position: 'absolute',
top: '0px',
right: '30px',
borderRadius: '20%',
height: '17px',
width: '15px',
}}
>
<img
src={replyIcon}
style={{ width: '20px', cursor: 'pointer' }}
onClick={changeReplyMessage}
/>
</div>
</FlexRow>
)}
</FlexRow>
</FlexRow>
)}
</FlexRow>

<Message message={message} />
<Reactions message={message} />
</FlexColumn>
</FlexRow>
</>
<div
style={{
position: 'relative',
marginLeft: sameUser && !messageParent ? '30px' : '0px',
}}
>
<Reactions message={message} />
</div>
</FlexColumn>
</FlexRow>
</div>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/fragments/PopupEmojiWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const PopupEmojiWindow: React.FC<popupProp> = ({ message }: popupProp) => {
};

return (
<StyledBox style={{ marginRight: '50px', marginBottom: '170px' }}>
<StyledBox >
<EmojiInput value="" onSelection={emojiClickListener} />
</StyledBox>
);
Expand Down
6 changes: 5 additions & 1 deletion src/providers/ChatAppProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,11 @@ const ChatAppContextProvider: React.FC<ChatAppContextProviderProps> = ({
const views: Set<View> = new Set();

const demoUsers = [
'910746e1-d6e1-4df1-80b6-88ad90d7d2ad'
'b2a6da08-88bf-4778-b993-7234e6d8a3ff',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

'c6f75947-af48-4893-a78e-0e0b9bd68580',
'abc4264d-f1b1-41c0-b4cc-1e9daadfc893',
'2989c53a-d0c5-4222-af8d-fbf7b0c74ec6',
'8fadc920-f3e6-49ff-9398-1e58b3dc44dd',
];

const getLayout = (): LayoutState => {
Expand Down