Skip to content

Commit

Permalink
feat(chat.jsx): add ability to copy to clipboard (#244)
Browse files Browse the repository at this point in the history 
closes #221
  • Loading branch information
@Dun-sin
Dun-sin authored Dec 23, 2022
1 parent 88dccee commit 421f003
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 10 deletions.
41 changes: 34 additions & 7 deletions client/src/components/Chat.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const Chat = () => {

const { sendMessage, deleteMessage, editMessage } = useChatUtils(socket);
const inputRef = useRef('');

const listOfBadWordsNotAllowed = [
'sex',
'porn',
Expand Down Expand Up @@ -208,9 +209,9 @@ const Chat = () => {
const message = getMessage(id);

if (message.includes('Warning Message')) {
return
return;
}

updateMessage(id, {
...message,
status: 'pending',
Expand Down Expand Up @@ -321,7 +322,7 @@ const Chat = () => {

const { message } = getMessage(id);
if (message.includes('Warning Message')) {
cancelEdit()
cancelEdit();
return;
}
inputRef.current.value = message;
Expand All @@ -340,6 +341,17 @@ const Chat = () => {
}
}, 500);

const handleCopyToClipBoard = async (id) => {
const { message } = getMessage(id);
if (message.includes('Warning Message')) {
return;
}
if ('clipboard' in navigator) {
return await navigator.clipboard.writeText(message);
} else {
return document.execCommand('copy', true, message);
}
};
const getTime = (time) => {
return new Date(time).toLocaleTimeString();
};
Expand All @@ -361,7 +373,7 @@ const Chat = () => {
</p>
<ScrollToBottom
initialScrollBehavior="auto"
className="displayMessgaes h-[100%] max-h-[62vh] md:max-h-full overflow-y-scroll w-[100%] "
className="displayMessgaes h-[100%] max-h-[70vh] md:max-h-full overflow-y-scroll w-[100%] "
>
{sortedMessages.map(
({ senderId: sender, id, message, time, status }) => {
Expand All @@ -383,8 +395,14 @@ const Chat = () => {
}`}
>
<div className="message">
<div className="content">
<p className="text">{message}</p>
<div
className={`content text ${
sender.toString() ===
senderId.toString() &&
'justify-between'
}`}
>
<p>{message}</p>
{sender.toString() ===
senderId.toString() &&
status !== 'pending' && (
Expand All @@ -394,7 +412,7 @@ const Chat = () => {
renderToggle={
renderIconButton
}
noCaret
NoCaret
>
<Dropdown.Item
onClick={() =>
Expand All @@ -410,6 +428,15 @@ const Chat = () => {
>
Edit
</Dropdown.Item>
<Dropdown.Item
onClick={() =>
handleCopyToClipBoard(
id
)
}
>
Copy
</Dropdown.Item>
</Dropdown>
)}
</div>
Expand Down
6 changes: 3 additions & 3 deletions client/src/styles/chat.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@
}

.message-block .message {
@apply flex flex-col mb-[15px] min-w-[250px] mdl:max-w-[80%] max-w-[50%];
@apply flex flex-col mb-[2px] min-w-[10px] mdl:max-w-[80%] max-w-[50%];
}

.message-block.me .message .content {
@apply bg-secondary justify-end;
@apply bg-secondary;
}

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

.message-block .message .status {
Expand Down

1 comment on commit 421f003

@vercel
Copy link

@vercel vercel bot commented on 421f003 Dec 23, 2022

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-dun-sin.vercel.app
whischat.vercel.app
whisper-git-main-dun-sin.vercel.app

Please sign in to comment.