refactor: message list component (#723)

client/src/components/Chat.jsx

@@ -2,7 +2,7 @@
 
 import chatHelper, {
 	adjustTextareaHeight,
-	arrayBufferToBase64,
+  arrayBufferToBase64,
 	pemToArrayBuffer,
 } from '../lib/chatHelper';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -38,14 +38,14 @@ const Chat = () => {
 	});
 	const [message, setMessage] = useState('');
 
-	const [decryptedMessages, setDecryptedMessages] = useState();
+  const [decryptedMessages, setDecryptedMessages] = useState();
 
 	const {
 		messages: state,
 		addMessage,
 		updateMessage,
 		removeMessage,
-		receiveMessage,
+    receiveMessage,
 		currentReplyMessageId,
 		cancelReply,
 	} = useChat();
@@ -61,7 +61,7 @@ const Chat = () => {
 	const { logout } = useKindeAuth();
 
 	const { sendMessage, editMessage, emitTyping, setupSocketListeners } = useChatUtils(socket);
-	const { getMessage } = chatHelper(state, app);
+  const { getMessage } = chatHelper(state, app);
 
 	const inputRef = useRef('');
 	const cryptoKeyRef = useRef(null);
@@ -354,15 +354,15 @@ const Chat = () => {
 					className="h-[100%] md:max-h-full overflow-y-auto w-full scroll-smooth"
 				>
 					{!messageIsDecrypting ? (
-						<MessageList
-							decryptedMessages={decryptedMessages}
-							senderId={senderId}
-							currentReplyMessageId={currentReplyMessageId}
-							doSend={doSend}
-							inputRef={inputRef}
-							cancelEdit={cancelEdit}
-							setEditing={setEditing}
-						/>
+            <MessageList
+              decryptedMessages={decryptedMessages}
+              senderId={senderId}
+              currentReplyMessageId={currentReplyMessageId}
+              doSend={doSend}
+              inputRef={inputRef} 
+              cancelEdit={cancelEdit}
+              setEditing={setEditing}
+            />
 					) : (
 						<div className="w-full h-full flex flex-col items-center justify-center">
 							<Loading loading={messageIsDecrypting} />

client/src/components/Chat/BadwordWarning.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const BadwordWarning = ({ id, setBadwordChoices, badwordChoices }) => {
+  const hideBadword = (id) => {
+    setBadwordChoices({ ...badwordChoices, [id]: 'hide' });
+  };
+
+  const showBadword = (id) => {
+    setBadwordChoices({ ...badwordChoices, [id]: 'show' });
+  };
+
+  return (
+    <div className="dark:text-white text-black flex flex-col border-red border w-full rounded-r-md p-3">
+      <p>Your buddy is trying to send you a bad word</p>
+      <div className="flex w-full gap-6">
+        <span
+          onClick={() => showBadword(id)}
+          className="text-sm cursor-pointer"
+        >
+          See
+        </span>
+        <span
+          onClick={() => hideBadword(id)}
+          className="text-red text-sm cursor-pointer"
+        >
+          Hide
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default BadwordWarning
+
+BadwordWarning.propTypes = {
+  id: PropTypes.string.isRequired,
+  setBadwordChoices: PropTypes.func.isRequired,
+  badwordChoices: PropTypes.object.isRequired
+}