Added Edit message

src/components/CommunityChat/index.css

@@ -174,28 +174,40 @@
 
 .message-options {
   position: relative;
+  cursor: pointer;
 }
 
 .delete-message-container {
   display: flex;
+  flex-direction: column;
+  gap: 1rem;
   border: 1px solid;
-  background-color: transparent;
+  background-color: var(--dark-post-bg);
   border-radius: 6px;
   position: absolute;
   bottom: 20px;
   right: 0;
   min-width: 100px;
+  padding: 14px 20px;
 }
 
 .delete-message-container span {
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-.delete-message-container span:hover {
+.delete-message-container .delete-option:hover {
   color: red;
   transition: all 0.2s ease;
 }
 
+.delete-message-container .edit-option:hover {
+  color: rgb(22 163 74);
+  transition: all 0.2s ease;
+}
+
 @media screen and (max-width: 1200px) {
   .chat-main-container {
     margin-left: 8vw;

src/components/CommunityChat/index.jsx

@@ -11,6 +11,8 @@ import { Loader } from "../../reusableComponents";
 import OptionIcon from "@mui/icons-material/MoreVert";
 import Reaction from "./Reaction";
 import SendIcon from "@mui/icons-material/Send";
+import DeleteIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import EditIcon from "@mui/icons-material/EditOutlined";
 import SentimentVerySatisfiedIcon from "@mui/icons-material/SentimentVerySatisfied";
 import firebase from "firebase/compat/app";
 import { useNavigate } from "react-router-dom";
@@ -27,6 +29,8 @@ const ChatBox = () => {
   const [isLastMsgRecieved, setIsLastMsgRecieved] = useState(false);
   const chatMsgContainerRef = useRef(null);
   const [openOptions, setOpenOptions] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingMessageId, setEditingMessageId] = useState(null);
 
   const navigate = useNavigate();
   const { enqueueSnackbar } = useSnackbar();
@@ -44,6 +48,15 @@ const ChatBox = () => {
     setOpenOptions(messageId);
   };
 
+  const handleEditMsg = (messageId) => {
+    const messageToEdit = messages.find((message) => message.id === messageId);
+    if (messageToEdit) {
+      setNewMessage(messageToEdit.text);
+      setIsEditing(true);
+      setEditingMessageId(messageId);
+    }
+  };
+
   const handleDeletMsg = async (messageId) => {
     try {
       await db.collection("messages").doc(messageId).delete();
@@ -67,15 +80,35 @@ const ChatBox = () => {
   function handleOnSubmit(e) {
     e.preventDefault();
     if (newMessage.trim()) {
-      db.collection("messages").add({
-        text: newMessage,
-        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
-        uid: user.uid,
-        displayName: user.displayName,
-        photoURL: user.photoURL,
-      });
+      if (isEditing && editingMessageId) {
+        // If user is in edit mode, update the existing message
+        db.collection("messages")
+          .doc(editingMessageId)
+          .update({
+            text: newMessage,
+          })
+          .then(() => {
+            setNewMessage("");
+            setIsEditing(false);
+            setEditingMessageId(null);
+          })
+          .catch((error) => {
+            enqueueSnackbar(`Error Occurred: ${error}`, {
+              variant: "error",
+            });
+          });
+      } else {
+        // If not in edit mode, send a new message
+        db.collection("messages").add({
+          text: newMessage,
+          createdAt: firebase.firestore.FieldValue.serverTimestamp(),
+          uid: user.uid,
+          displayName: user.displayName,
+          photoURL: user.photoURL,
+        });
 
-      setNewMessage("");
+        setNewMessage("");
+      }
     } else {
       enqueueSnackbar("Enter something!", {
         variant: "error",
@@ -194,6 +227,13 @@ const ChatBox = () => {
     };
   }, []);
 
+  useEffect(() => {
+    return () => {
+      setIsEditing(false);
+      setEditingMessageId(null);
+    };
+  }, []);
+
   useEffect(() => {
     let unsubscribed = false;
 
@@ -281,11 +321,19 @@ const ChatBox = () => {
                             >
                               <div className="delete-message-container">
                                 <span
-                                  style={{ padding: "6px" }}
+                                  className="delete-option"
                                   onClick={() => handleDeletMsg(message.id)}
                                 >
+                                  <DeleteIcon />
                                   Delete
                                 </span>
+                                <span
+                                  className="edit-option"
+                                  onClick={() => handleEditMsg(message.id)}
+                                >
+                                  <EditIcon />
+                                  Edit
+                                </span>
                               </div>
                             </ClickAwayListener>
                           )}