feat: message reaction

src/common/component/Message/Commands.js

@@ -1,7 +1,11 @@
-// import React from 'react'
+import { useState, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import toast from "react-hot-toast";
-
+import { useOutsideClick } from "rooks";
+import StyledMenu from "../StyledMenu";
+import DeleteMessageConfirm from "./DeleteMessageConfirm";
+import EmojiPicker from "./EmojiPicker";
 const StyledCmds = styled.ul`
   position: absolute;
   right: 10px;
@@ -13,41 +17,100 @@ const StyledCmds = styled.ul`
   border-radius: 6px;
   background-color: #fff;
   visibility: hidden;
+  &.visible {
+    visibility: visible;
+  }
   .cmd {
+    display: flex;
     cursor: pointer;
     padding: 4px;
+    &:hover {
+      background-color: #f3f4f6;
+    }
     img {
       width: 24px;
       height: 24px;
     }
   }
+  .menu {
+    position: absolute;
+    top: 0;
+    right: 36px;
+  }
 `;
-// https://static.nicegoodthings.com/project/rustchat/icon.forward.svg
-// https://static.nicegoodthings.com/project/rustchat/icon.edit.svg
-export default function Commands() {
+export default function Commands({
+  message = null,
+  mid = 0,
+  uid = 0,
+  menuVisible,
+  toggleMenu,
+  emojiPopVisible,
+  toggleEmojiPopover,
+}) {
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+
+  const currUid = useSelector((store) => store.authData.user.uid);
+  const menuRef = useRef(null);
+
   const handleClick = () => {
     toast.success("cooming soon");
   };
+
+  useOutsideClick(menuRef, toggleMenu);
+  const toggleDeleteModal = () => {
+    setDeleteModalVisible((prev) => !prev);
+  };
+  const alwaysVisible = menuVisible || emojiPopVisible;
   return (
-    <StyledCmds className="cmds">
-      <li className="cmd" onClick={handleClick}>
+    <StyledCmds className={`cmds ${alwaysVisible ? "visible" : ""}`}>
+      <li className="cmd" onClick={toggleEmojiPopover}>
         <img
           src="https://static.nicegoodthings.com/project/rustchat/icon.reply.svg"
           alt="icon emoji"
         />
       </li>
-      <li className="cmd" onClick={handleClick}>
-        <img
-          src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
-          alt="icon emoji"
-        />
-      </li>
-      <li className="cmd" onClick={handleClick}>
+      {emojiPopVisible && (
+        <EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
+      )}
+      {currUid == uid ? (
+        <li className="cmd" onClick={handleClick}>
+          <img
+            src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
+            alt="icon edit"
+          />
+        </li>
+      ) : (
+        <li className="cmd" onClick={handleClick}>
+          <img
+            src="https://static.nicegoodthings.com/project/rustchat/icon.forward.svg"
+            alt="icon reply"
+          />
+        </li>
+      )}
+      <li className="cmd" onClick={toggleMenu}>
         <img
           src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
           alt="icon emoji"
         />
       </li>
+      {menuVisible && (
+        <StyledMenu className="menu" ref={menuRef}>
+          <li className="item">Edit Message</li>
+          <li className="item underline">Pin Message</li>
+          <li className="item">Reply</li>
+          {currUid == uid && (
+            <li className="item danger" onClick={toggleDeleteModal}>
+              Delete Message
+            </li>
+          )}
+        </StyledMenu>
+      )}
+      {deleteModalVisible && (
+        <DeleteMessageConfirm
+          closeModal={toggleDeleteModal}
+          message={{ mid, ...message }}
+        />
+      )}
     </StyledCmds>
   );
 }