Skip to content

Commit b921d21

Browse files
Dun-sinDun-sin
committed
refactor: move messageList to it's own component
1 parent 331b5e0 commit b921d21

File tree

2 files changed

+271
-227
lines changed

2 files changed

+271
-227
lines changed

‎client/src/components/Chat.jsx‎

Lines changed: 14 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
/* eslint-disable max-len */
22

3-
import { BsArrow90DegLeft, BsArrow90DegRight } from 'react-icons/bs';
4-
53
import chatHelper, {
64
adjustTextareaHeight,
7-
arrayBufferToBase64,
8-
getTime,
5+
arrayBufferToBase64,
96
pemToArrayBuffer,
107
} from '../lib/chatHelper';
118
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
129

1310
import BadWordsNext from 'bad-words-next';
14-
import DropDownOptions from './Chat/DropDownOption';
1511
import Loading from './Loading';
16-
import MarkdownIt from 'markdown-it';
1712
import MessageInput from './Chat/MessageInput';
18-
import MessageSeen from './Chat/MessageSeen';
19-
import MessageStatus from './MessageStatus';
20-
import PreviousMessages from './Chat/PreviousMessages';
13+
import MessageList from './Chat/MessageList';
2114
import ScrollToBottom from 'react-scroll-to-bottom';
2215
import { createBrowserNotification } from 'src/lib/browserNotification';
2316
import decryptMessage from 'src/lib/decryptMessage';
@@ -45,18 +38,14 @@ const Chat = () => {
4538
});
4639
const [message, setMessage] = useState('');
4740

48-
const [decryptedMessages, setDecryptedMessages] = useState();
49-
// use the id so we can track what message's previousMessage is open
50-
const [openPreviousMessages, setOpenPreviousMessages] = useState(null);
51-
const [badwordChoices, setBadwordChoices] = useState({});
41+
const [decryptedMessages, setDecryptedMessages] = useState();
5242

5343
const {
5444
messages: state,
5545
addMessage,
5646
updateMessage,
5747
removeMessage,
58-
receiveMessage,
59-
startReply,
48+
receiveMessage,
6049
currentReplyMessageId,
6150
cancelReply,
6251
} = useChat();
@@ -72,20 +61,14 @@ const Chat = () => {
7261
const { logout } = useKindeAuth();
7362

7463
const { sendMessage, editMessage, emitTyping, setupSocketListeners } = useChatUtils(socket);
75-
const { getMessage, handleResend, scrollToMessage } = chatHelper(state, app);
64+
const { getMessage } = chatHelper(state, app);
7665

7766
const inputRef = useRef('');
7867
const cryptoKeyRef = useRef(null);
7968
cryptoKeyRef.current = cryptoKey;
8069

8170
senderId = authState.loginId;
8271

83-
const md = new MarkdownIt({
84-
html: false,
85-
linkify: true,
86-
typographer: true,
87-
});
88-
8972
const badwords = new BadWordsNext({ data: en });
9073

9174
function logOut() {
@@ -239,26 +222,6 @@ const Chat = () => {
239222
e.target.style.height = `${e.target.scrollHeight}px`;
240223
}, 500);
241224

242-
const openPreviousEdit = (messageId) => {
243-
if (openPreviousMessages === messageId) {
244-
setOpenPreviousMessages(null);
245-
} else {
246-
setOpenPreviousMessages(messageId);
247-
}
248-
};
249-
250-
const hideBadword = (id) => {
251-
setBadwordChoices({ ...badwordChoices, [id]: 'hide' });
252-
};
253-
254-
const showBadword = (id) => {
255-
setBadwordChoices({ ...badwordChoices, [id]: 'show' });
256-
};
257-
258-
function getRepliedMessage(replyTo) {
259-
return decryptedMessages.find((object) => object.id === replyTo);
260-
}
261-
262225
const onNewMessageHandler = useCallback(
263226
async (message) => {
264227
try {
@@ -391,191 +354,15 @@ const Chat = () => {
391354
className="h-[100%] md:max-h-full overflow-y-auto w-full scroll-smooth"
392355
>
393356
{!messageIsDecrypting ? (
394-
decryptedMessages &&
395-
decryptedMessages.map(
396-
({
397-
senderId: sender,
398-
id,
399-
message,
400-
time,
401-
status,
402-
isEdited,
403-
oldMessages,
404-
containsBadword,
405-
isRead,
406-
replyTo,
407-
}) => {
408-
const isSender = sender.toString() === senderId.toString();
409-
// original message this message is a reply to
410-
const repliedMessage = replyTo
411-
? (() => {
412-
const messageObj = getRepliedMessage(replyTo);
413-
if (!messageObj) {
414-
return null;
415-
}
416-
417-
return {
418-
...messageObj,
419-
};
420-
})()
421-
: null;
422-
423-
// is this message currently being replied?
424-
const hasActiveReply = currentReplyMessageId === id;
425-
const activeReplyClass = hasActiveReply ? 'bg-[#FF9F1C]/25 border-[#FF9F1C]' : '';
426-
const activeReplySenderClass = hasActiveReply
427-
? isSender
428-
? 'border-r-[3.5px]'
429-
: 'border-l-[3.5px]'
430-
: '';
431-
432-
return (
433-
<div
434-
key={id}
435-
id={`message-${id}`}
436-
className={`
437-
flex flex-col gap-2 py-2 duration-500 transition-all
438-
${activeReplyClass} ${activeReplySenderClass}`}
439-
>
440-
{replyTo && (
441-
<div
442-
className={`
443-
max-w-[80%] md:max-w-[50%] min-w-[10px] flex gap-2 items-center
444-
${sender.toString() === senderId.toString() ? 'self-end' : ''}
445-
${repliedMessage ? 'cursor-pointer' : ''}
446-
`}
447-
onClick={() => scrollToMessage(replyTo)}
448-
>
449-
<div className="truncate border-b-4 border-[#FF9F1C] p-1">
450-
{repliedMessage ? (
451-
typeof repliedMessage.message === 'string' ? (
452-
<div
453-
className="message-reply-container flex flex-nowrap items-center gap-2"
454-
dangerouslySetInnerHTML={{
455-
__html: md.render(repliedMessage.message),
456-
}}
457-
/>
458-
) : (
459-
repliedMessage.message
460-
)
461-
) : (
462-
<p className="text-gray-400 uppercase text-sm italic">
463-
Original Message Deleted
464-
</p>
465-
)}
466-
</div>
467-
<div
468-
className={sender.toString() !== senderId.toString() ? 'order-first' : ''}
469-
>
470-
{sender.toString() === senderId.toString() ? (
471-
<BsArrow90DegLeft className="fill-white text-2xl" />
472-
) : (
473-
<BsArrow90DegRight className="fill-white text-2xl" />
474-
)}
475-
</div>
476-
</div>
477-
)}
478-
<div
479-
className={`w-full flex text-white relative mb-2 ${
480-
isSender ? 'justify-end' : 'justify-start'
481-
}`}
482-
>
483-
<div
484-
className={`flex flex-col mb-[2px] min-w-[10px] mdl:max-w-[80%] max-w-[50%] ${
485-
isSender ? 'items-end' : 'items-start'
486-
}`}
487-
>
488-
{containsBadword && !isSender && !badwordChoices[id] ? (
489-
<div className="dark:text-white text-black flex flex-col border-red border w-full rounded-r-md p-3">
490-
<p>Your buddy is trying to send you a bad word</p>
491-
<div className="flex w-full gap-6">
492-
<span
493-
onClick={() => showBadword(id)}
494-
className="text-sm cursor-pointer"
495-
>
496-
See
497-
</span>
498-
<span
499-
onClick={() => hideBadword(id)}
500-
className="text-red text-sm cursor-pointer"
501-
>
502-
Hide
503-
</span>
504-
</div>
505-
</div>
506-
) : (
507-
<>
508-
<div
509-
className={`chat bg-red p-3 break-all will-change-auto flex gap-6 items-center text ${
510-
isSender
511-
? 'justify-between bg-secondary rounded-l-md'
512-
: 'rounded-r-md'
513-
}`}
514-
>
515-
{typeof message === 'string' ? (
516-
<span
517-
dangerouslySetInnerHTML={{
518-
__html: md.render(
519-
badwordChoices[id] === 'hide'
520-
? badwords.filter(message)
521-
: badwordChoices[id] === 'show'
522-
? message
523-
: message
524-
),
525-
}}
526-
/>
527-
) : badwordChoices[id] === 'hide' ? (
528-
badwords.filter(message)
529-
) : badwordChoices[id] === 'show' ? (
530-
message
531-
) : (
532-
message
533-
)}
534-
535-
<DropDownOptions
536-
isSender={isSender && status !== 'pending'}
537-
id={id}
538-
inputRef={inputRef}
539-
cancelEdit={cancelEdit}
540-
setEditing={setEditing}
541-
setReplyId={startReply}
542-
/>
543-
</div>
544-
<div
545-
className={`flex gap-2 items-center ${
546-
isSender ? 'flex-row' : 'flex-row-reverse'
547-
}`}
548-
>
549-
<div
550-
className={`text-[12px] ${
551-
status === 'failed' ? 'text-red-600' : 'text-white'
552-
}`}
553-
>
554-
<MessageStatus
555-
time={getTime(time)}
556-
status={status ?? 'sent'}
557-
iAmTheSender={isSender}
558-
onResend={() => handleResend(id, doSend, state, app)}
559-
/>
560-
</div>
561-
<PreviousMessages
562-
id={id}
563-
isSender={isSender}
564-
isEdited={isEdited}
565-
openPreviousEdit={openPreviousEdit}
566-
openPreviousMessages={openPreviousMessages}
567-
oldMessages={oldMessages}
568-
/>
569-
</div>
570-
<MessageSeen isRead={isRead} isSender={isSender} />
571-
</>
572-
)}
573-
</div>
574-
</div>
575-
</div>
576-
);
577-
}
578-
)
357+
<MessageList
358+
decryptedMessages={decryptedMessages}
359+
senderId={senderId}
360+
currentReplyMessageId={currentReplyMessageId}
361+
doSend={doSend}
362+
inputRef={inputRef}
363+
cancelEdit={cancelEdit}
364+
setEditing={setEditing}
365+
/>
579366
) : (
580367
<div className="w-full h-full flex flex-col items-center justify-center">
581368
<Loading loading={messageIsDecrypting} />

0 commit comments

Comments
 (0)