feat: lots updates

src/common/component/Message/Commands.js

@@ -1,8 +1,9 @@
 import { useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
+import Tippy from "@tippyjs/react";
+import { hideAll } from "tippy.js";
 // import toast from "react-hot-toast";
-import { useOutsideClick } from "rooks";
 import { addReplyingMessage } from "../../../app/slices/message";
 import StyledMenu from "../StyledMenu";
 import DeleteMessageConfirm from "./DeleteMessageConfirm";
@@ -54,69 +55,81 @@ export default function Commands({
   contextId = 0,
   mid = 0,
   from_uid = 0,
-  menuVisible,
-  toggleMenu,
-  emojiPopVisible,
-  toggleEmojiPopover,
   toggleEditMessage,
 }) {
   const dispatch = useDispatch();
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
-
+  const [tippyVisible, setTippyVisible] = useState(false);
   const currUid = useSelector((store) => store.authData.uid);
-  const menuRef = useRef(null);
-
-  const handleReply = (fromMenu = false) => {
+  const cmdsRef = useRef(null);
+  const handleReply = (fromMenu) => {
     if (contextId) {
       dispatch(addReplyingMessage({ id: contextId, mid }));
     }
     if (fromMenu) {
-      toggleMenu();
+      hideAll();
     }
-    // toast.success("cooming soon");
   };
 
-  useOutsideClick(menuRef, toggleMenu);
   const toggleDeleteModal = () => {
+    hideAll();
     setDeleteModalVisible((prev) => !prev);
   };
-  const alwaysVisible = menuVisible || emojiPopVisible;
+  const handleTippyVisible = (visible = true) => {
+    setTippyVisible(visible);
+  };
   return (
-    <StyledCmds className={`cmds ${alwaysVisible ? "visible" : ""}`}>
-      <li className="cmd" onClick={toggleEmojiPopover}>
-        <img src={reactIcon} alt="icon emoji" />
-      </li>
-      {emojiPopVisible && (
-        <div className="picker">
-          <EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
-        </div>
-      )}
+    <StyledCmds
+      ref={cmdsRef}
+      className={`cmds ${tippyVisible ? "visible" : ""}`}
+    >
+      <Tippy
+        onShow={handleTippyVisible.bind(null, true)}
+        onHide={handleTippyVisible.bind(null, false)}
+        interactive
+        placement="left-start"
+        trigger="click"
+        content={<EmojiPicker mid={mid} hidePicker={hideAll} />}
+      >
+        <li className="cmd">
+          <img src={reactIcon} className="toggler" alt="icon emoji" />
+        </li>
+      </Tippy>
       {currUid == from_uid ? (
         <li className="cmd" onClick={toggleEditMessage}>
           <img src={editIcon} alt="icon edit" />
         </li>
       ) : (
-        <li className="cmd" onClick={handleReply.bind(null, false)}>
+        <li className="cmd" onClick={handleReply}>
           <img src={replyIcon} alt="icon reply" />
         </li>
       )}
-      <li className="cmd" onClick={toggleMenu}>
-        <img src={moreIcon} 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" onClick={handleReply.bind(null, true)}>
-            Reply
-          </li>
-          {currUid == from_uid && (
-            <li className="item danger" onClick={toggleDeleteModal}>
-              Delete Message
+      <Tippy
+        onShow={handleTippyVisible.bind(null, true)}
+        onHide={handleTippyVisible.bind(null, false)}
+        interactive
+        placement="right-start"
+        trigger="click"
+        content={
+          <StyledMenu className="menu">
+            {/* <li className="item">Edit Message</li> */}
+            <li className="item underline">Pin Message</li>
+            <li className="item" onClick={handleReply.bind(null, true)}>
+              Reply
             </li>
-          )}
-        </StyledMenu>
-      )}
+            {currUid == from_uid && (
+              <li className="item danger" onClick={toggleDeleteModal}>
+                Delete Message
+              </li>
+            )}
+          </StyledMenu>
+        }
+      >
+        <li className="cmd">
+          <img src={moreIcon} alt="icon more" />
+        </li>
+      </Tippy>
+
       {deleteModalVisible && (
         <DeleteMessageConfirm closeModal={toggleDeleteModal} mid={mid} />
       )}

src/common/component/Message/EmojiPicker.js

@@ -1,25 +1,25 @@
-// import Picker from "../EmojiPicker";
-import { useRef } from "react";
 import styled from "styled-components";
-import { useOutsideClick } from "rooks";
 import { useSelector } from "react-redux";
+
 import { useReactMessageMutation } from "../../../app/services/message";
 import { Emojis } from "../../../app/config";
 import Emoji from "../Emoji";
 const StyledPicker = styled.div`
-  background-color: #fff;
+  background: none;
+  z-index: 999;
   .emojis {
     padding: 4px;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 8px;
-    background: #ffffff;
+    background: #fff;
     filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
     border-radius: 12px;
     &.reacting {
       opacity: 0.6;
     }
     .wrapper {
+      display: flex;
       cursor: pointer;
       border-radius: 8px;
       padding: 4px;
@@ -36,7 +36,7 @@ const StyledPicker = styled.div`
 `;
 
 export default function EmojiPicker({ mid, hidePicker }) {
-  const wrapperRef = useRef(null);
+  // const wrapperRef = useRef(null);
   const [reactMessage, { isLoading }] = useReactMessageMutation();
   const { reactionData, currUid } = useSelector((store) => {
     return {
@@ -44,18 +44,14 @@ export default function EmojiPicker({ mid, hidePicker }) {
       currUid: store.authData.uid,
     };
   });
-  useOutsideClick(wrapperRef, hidePicker);
+  // useOutsideClick(wrapperRef, hidePicker);
   const handleReact = (emoji) => {
     console.log("react", emoji);
     reactMessage({ mid, action: emoji });
     hidePicker();
   };
   return (
-    <StyledPicker ref={wrapperRef}>
-      {/* <Picker
-        onSelect={handleReact}
-        className={`picker ${isLoading ? "reacting" : ""}`}
-      /> */}
+    <StyledPicker>
       <ul className={`emojis ${isLoading ? "reacting" : ""}`}>
         {Emojis.map((emoji) => {
           let reacted =

src/common/component/Message/Reaction.js

@@ -1,6 +1,8 @@
-import { useState } from "react";
+// import { useState } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
+import Tippy from "@tippyjs/react";
+import { hideAll } from "tippy.js";
 import Emoji from "../Emoji";
 import EmojiPicker from "./EmojiPicker";
 import { useReactMessageMutation } from "../../../app/services/message";
@@ -60,18 +62,11 @@ const StyledWrapper = styled.span`
       background-color: #cff9fe;
     }
   }
-  .picker {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(105%);
-  }
   &:hover > .add {
     visibility: visible;
   }
 `;
 export default function Reaction({ mid, reactions = null }) {
-  const [pickerVisible, setPickerVisible] = useState(false);
   const [reactWithEmoji] = useReactMessageMutation();
   const { currUid } = useSelector((store) => {
     return {
@@ -81,10 +76,6 @@ export default function Reaction({ mid, reactions = null }) {
   const handleReact = (emoji) => {
     reactWithEmoji({ mid, action: emoji });
   };
-  const togglePickerVisible = (wtf) => {
-    console.log("clicked", wtf);
-    setPickerVisible((prev) => !prev);
-  };
   console.log("curr reactions", reactions);
   if (!reactions || Object.entries(reactions).length == 0) return null;
   return (
@@ -108,12 +99,14 @@ export default function Reaction({ mid, reactions = null }) {
           </span>
         ) : null;
       })}
-      <button onClick={togglePickerVisible} className="add"></button>
-      {pickerVisible && (
-        <div className="picker">
-          <EmojiPicker mid={mid} hidePicker={togglePickerVisible} />
-        </div>
-      )}
+      <Tippy
+        interactive
+        placement="right-start"
+        trigger="click"
+        content={<EmojiPicker mid={mid} hidePicker={hideAll} />}
+      >
+        <button className="add"></button>
+      </Tippy>
     </StyledWrapper>
   );
 }

src/common/component/Message/Reply.js

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 import { ContentTypes } from "../../../app/config";
 import Avatar from "../Avatar";
 const Styled = styled.div`
+  cursor: pointer;
   display: flex;
   align-items: center;
   padding: 16px;
@@ -68,7 +69,7 @@ export default function Reply({ mid }) {
   const currUser = users[data.from_uid];
   if (!currUser) return null;
   return (
-    <Styled className="reply">
+    <Styled data-mid={mid} className="reply">
       <div className="user">
         <Avatar className="avatar" url={currUser.avatar} name={currUser.name} />
         <span className="name">{currUser.name}</span>

src/common/component/Message/index.js

@@ -18,8 +18,7 @@ function Message({ contextId = 0, mid = "", context = "user" }) {
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   const [myRef, inView] = useInViewRef();
   const [edit, setEdit] = useState(false);
-  const [emojiPopVisible, setEmojiPopVisible] = useState(false);
-  const [menuVisible, setMenuVisible] = useState(false);
+
   const avatarRef = useRef(null);
   const {
     footprint,
@@ -36,15 +35,10 @@ function Message({ contextId = 0, mid = "", context = "user" }) {
       contactsData: store.contacts.byId,
     };
   });
-  const toggleMenu = () => {
-    setMenuVisible((prev) => !prev);
-  };
+
   const toggleEditMessage = () => {
     setEdit((prev) => !prev);
   };
-  const toggleEmojiPopover = () => {
-    setEmojiPopVisible((prev) => !prev);
-  };
 
   const {
     reply_mid,
@@ -78,9 +72,7 @@ function Message({ contextId = 0, mid = "", context = "user" }) {
     <StyledWrapper
       data-mid={mid}
       ref={myRef}
-      className={`message ${menuVisible ? "menu" : ""} ${
-        inView ? "in_view" : ""
-      }`}
+      className={`message ${inView ? "in_view" : ""}`}
     >
       <Tippy
         interactive
@@ -122,10 +114,6 @@ function Message({ contextId = 0, mid = "", context = "user" }) {
           contextId={contextId}
           mid={mid}
           from_uid={fromUid}
-          toggleMenu={toggleMenu}
-          menuVisible={menuVisible}
-          emojiPopVisible={emojiPopVisible}
-          toggleEmojiPopover={toggleEmojiPopover}
           toggleEditMessage={toggleEditMessage}
         />
       )}

src/common/component/Message/styled.js

@@ -19,9 +19,6 @@ const StyledMsg = styled.div`
       visibility: visible;
     }
   }
-  &.menu {
-    z-index: 9;
-  }
   .avatar {
     cursor: pointer;
     img {