feat: favorite message

src/routes/chat/ChannelChat/FavList.js

@@ -0,0 +1,130 @@
+// import React from "react";
+// import { useSelector } from "react-redux";
+import styled from "styled-components";
+import SavedMessage from "../../../common/component/Message/SavedMessage";
+import IconSurprise from "../../../assets/icons/emoji.suprise.svg";
+// import IconForward from "../../../assets/icons/forward.svg";
+import IconBookmark from "../../../assets/icons/bookmark.svg";
+import useFavMessage from "../../../common/hook/useFavMessage";
+const Styled = styled.div`
+  padding: 16px;
+  background: #f9fafb;
+  filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
+  border-radius: 12px;
+  min-width: 500px;
+  max-height: 500px;
+  overflow: auto;
+  > .head {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #344054;
+    margin-bottom: 16px;
+  }
+  > .none {
+    padding: 16px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    .tip {
+      width: 240px;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: center;
+      color: #475467;
+    }
+  }
+  > .list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .fav {
+      position: relative;
+      border: 1px solid #f2f4f7;
+      border-radius: var(--br);
+      .favorite {
+        background: none;
+        .down img {
+          width: 100% !important;
+          height: auto !important;
+        }
+      }
+      > .opts {
+        visibility: hidden;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        padding: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-radius: 6px;
+        .btn {
+          display: flex;
+          background: none;
+          border: none;
+          svg {
+            width: 16px;
+            height: 16px;
+            path {
+              fill: #d92d20;
+            }
+          }
+        }
+      }
+      &:hover .opts {
+        visibility: visible;
+      }
+    }
+  }
+`;
+export default function FavList({ cid = null }) {
+  const { favorites, removeFavorite } = useFavMessage(cid);
+  const handleRemove = (evt) => {
+    const { id } = evt.currentTarget.dataset;
+    console.log("remove fav", id);
+    removeFavorite(id);
+  };
+  const noFavs = favorites.length == 0;
+  return (
+    <Styled>
+      <h4 className="head">Saved Message({favorites.length})</h4>
+
+      {noFavs ? (
+        <div className="none">
+          <IconSurprise />
+          <div className="tip">
+            This channel doesn’t have any saved message yet.
+          </div>
+        </div>
+      ) : (
+        <ul className="list">
+          {favorites.map(({ id }) => {
+            console.log("favv", id);
+            return (
+              <li key={id} className="fav">
+                <SavedMessage cid={cid} id={id} />
+                <div className="opts">
+                  {/* <button
+                    className="btn"
+                    data-mid={mid}
+                    // onClick={handleRemove}
+                  >
+                    <IconForward />
+                  </button> */}
+                  <button className="btn" data-id={id} onClick={handleRemove}>
+                    <IconBookmark />
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </Styled>
+  );
+}

src/routes/chat/ChannelChat/index.js

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useDebounce } from "rooks";
 import { useSelector } from "react-redux";
 import PinList from "./PinList";
+import FavList from "./FavList";
 import { useReadMessageMutation } from "../../../app/services/message";
 import useChatScroll from "../../../common/hook/useChatScroll";
 import ChannelIcon from "../../../common/component/ChannelIcon";
@@ -11,6 +12,7 @@ import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
 import EditIcon from "../../../assets/icons/edit.svg";
 // import alertIcon from "../../../assets/icons/alert.svg?url";
+import IconFav from "../../../assets/icons/bookmark.svg";
 import IconPeople from "../../../assets/icons/people.svg";
 import IconPin from "../../../assets/icons/pin.svg";
 // import searchIcon from "../../../assets/icons/search.svg?url";
@@ -133,6 +135,37 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </li>
                 </Tippy>
               </Tooltip>
+              <Tooltip
+                tip="Favorite"
+                placement="left"
+                disabled={toolVisible == "favorite"}
+              >
+                <Tippy
+                  onShow={() => {
+                    setToolVisible("favorite");
+                  }}
+                  onHide={() => {
+                    setToolVisible("");
+                  }}
+                  delay={[0, 0]}
+                  duration={0}
+                  placement="left-start"
+                  popperOptions={{ strategy: "fixed" }}
+                  offset={[0, 180]}
+                  interactive
+                  trigger="click"
+                  content={<FavList cid={cid} />}
+                >
+                  <li
+                    className={`tool ${
+                      toolVisible == "favorite" ? "active" : ""
+                    } `}
+                    data-count={pinCount}
+                  >
+                    <IconFav />
+                  </li>
+                </Tippy>
+              </Tooltip>
               <li
                 className={`tool ${membersVisible ? "active" : ""}`}
                 onClick={toggleMembersVisible}

src/routes/chat/Layout/Operations.js

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { useDispatch, useSelector } from "react-redux";
 import { useKey } from "rooks";
 import useDeleteMessage from "../../../common/hook/useDeleteMessage";
+import useFavMessage from "../../../common/hook/useFavMessage";
 import { updateSelectMessages } from "../../../app/slices/ui";
-import { useFavoriteMessageMutation } from "../../../app/services/message";
 import IconForward from "../../../assets/icons/forward.svg";
 import IconBookmark from "../../../assets/icons/bookmark.svg";
 import IconDelete from "../../../assets/icons/delete.svg";
@@ -40,7 +40,7 @@ const Styled = styled.div`
 export default function Operations({ context, id }) {
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const { canDelete } = useDeleteMessage();
-  const [favoriteMsg] = useFavoriteMessageMutation();
+  const { addFavorite } = useFavMessage(id);
   const mids = useSelector(
     (store) => store.ui.selectMessages[`${context}_${id}`]
   );
@@ -50,7 +50,7 @@ export default function Operations({ context, id }) {
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
   };
   const handleFav = async () => {
-    await favoriteMsg(mids);
+    await addFavorite(mids);
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
     toast.success("Messages Saved!");
   };