Skip to content

Commit

Permalink
feat: add quote reply (#252)
Browse files Browse the repository at this point in the history 
* Added quote reply feature

* Made some changes in chat.jsx for quote reply feature

---------

Co-authored-by: Dunsin <[email protected]>
  • Loading branch information
@Deva-1903 @Dun-sin
Deva-1903 and Dun-sin authored Sep 26, 2023
1 parent c33651a commit 54550e1
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 8 deletions.
78 changes: 72 additions & 6 deletions client/src/components/Chat.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,18 @@ const Chat = () => {
setEditing({ isediting: true, messageID: id });
};

const handleQuoteReply = (id) => {
inputRef.current.focus();

const { message } = getMessage(id);
if (message.includes('Warning Message')) {
cancelEdit();
return;
}
inputRef.current.value = `${message} --> `;

};

const handleTypingStatus = debounce((e) => {
if (e.target.value.length > 0) {
socket
Expand Down Expand Up @@ -365,6 +377,15 @@ const Chat = () => {
);
};

const renderIconButtonReceiver = (props) => {
return (
<BiDotsVerticalRounded
{...props}
className="fill-white scale-[1.8]"
/>
);
};

return (
<div className="w-full md:h-[90%] min-h-[100%] pb-[25px] flex flex-col justify-between">
<div className="max-h-[67vh]">
Expand Down Expand Up @@ -395,7 +416,7 @@ const Chat = () => {
: 'other'
}`}
>
<div className="message">
<div className="message">
<div
className={`content text ${sender.toString() ===
senderId.toString() &&
Expand All @@ -413,26 +434,62 @@ const Chat = () => {
status !== 'pending' && (
<Dropdown
placement="leftStart"
style={{ zIndex: 3 }}
style={{
zIndex: 'auto',
}}
renderToggle={
renderIconButton
}
NoCaret
>
<Dropdown.Item
onClick={() =>
handleDelete(id)
handleEdit(id)
}
>
Delete
Edit
</Dropdown.Item>

<Dropdown.Item
onClick={() =>
handleEdit(id)
handleCopyToClipBoard(
id
)
}
>
Edit
Copy
</Dropdown.Item>
<Dropdown.Item
onClick={() =>
handleQuoteReply(
id
)
}
>
Quote Reply
</Dropdown.Item>
<Dropdown.Item
onClick={() =>
handleDelete(id)
}
>
Delete
</Dropdown.Item>
</Dropdown>
)}
{sender.toString() !==
senderId.toString() &&
status !== 'pending' && (
<Dropdown
placement="rightStart"
style={{
zIndex: 'auto',
}}
renderToggle={
renderIconButtonReceiver
}
NoCaret
>
<Dropdown.Item
onClick={() =>
handleCopyToClipBoard(
Expand All @@ -442,6 +499,15 @@ const Chat = () => {
>
Copy
</Dropdown.Item>
<Dropdown.Item
onClick={() =>
handleQuoteReply(
id
)
}
>
Quote Reply
</Dropdown.Item>
</Dropdown>
)}
</div>
Expand Down
4 changes: 2 additions & 2 deletions client/src/styles/chat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@
}

.message-block .message .content {
@apply bg-red rounded-[20px] p-[15px] break-all w-full flex gap-2 items-center;
@apply bg-red rounded-[18px] p-[15px] break-all will-change-auto flex gap-2 items-center;
}

.message-block .message .status {
@apply px-[20px] text-[12px] flex gap-2 items-center;
@apply px-[10px] text-[12px] flex gap-2 items-center;
}

.message .content h1,
Expand Down

1 comment on commit 54550e1

@vercel
Copy link

@vercel vercel bot commented on 54550e1 Sep 26, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

whisper – ./

anon-chat-app.vercel.app
whisper-git-main-dun-sin.vercel.app
whisper-dun-sin.vercel.app
whischat.vercel.app

Please sign in to comment.