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!");
   };

src/routes/favs/Search.js

@@ -0,0 +1,46 @@
+// import React from "react";
+import styled from "styled-components";
+import iconSearch from "../../assets/icons/search.svg?url";
+const Styled = styled.div`
+  width: 100%;
+  padding: 6px 16px;
+  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+  &.embed {
+    padding: 6px 8px;
+    box-shadow: none;
+  }
+  .search {
+    outline: none;
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 25px;
+    padding: 10px 8px 10px 36px;
+    color: #a1a1aa;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    background-image: url(${iconSearch});
+    background-repeat: no-repeat;
+    background-position: 8px center;
+  }
+`;
+export default function Search({
+  value = "",
+  updateSearchValue = null,
+  embed = false,
+}) {
+  const handleChange = (evt) => {
+    if (updateSearchValue) {
+      updateSearchValue(evt.target.value);
+    }
+  };
+  return (
+    <Styled className={embed ? "embed" : ""}>
+      <input
+        value={value}
+        onChange={handleChange}
+        className="search"
+        placeholder="Search..."
+      />
+    </Styled>
+  );
+}

src/routes/favs/index.js

@@ -0,0 +1,34 @@
+// import { useState, useEffect, useRef, memo } from "react";
+import Styled from "./styled";
+import { useSelector } from "react-redux";
+import SavedMessage from "../../common/component/Message/SavedMessage";
+// import Masonry from "masonry-layout";
+// import waterfall from "waterfall.js/src/waterfall";
+// import { Views } from "../../app/config";
+// import View from "./View";
+// import Search from "./Search";
+// import Filter from "./Filter";
+// import FileBox from "../../common/component/FileBox";
+function FavsPage() {
+  // const listContainerRef = useRef(null);
+  // const [filter, setFilter] = useState({});
+  const { favorites } = useSelector((store) => {
+    return {
+      favorites: store.favorites,
+      // channelMessage: store.channelMessage,
+      // view: store.ui.fileListView,
+    };
+  });
+  return (
+    <Styled>
+      {favorites.map(({ id, created_at }) => {
+        return <SavedMessage key={id} id={id} />;
+      })}
+    </Styled>
+  );
+}
+export default FavsPage;
+// const equals = (a, b) => a.length === b.length && a.every((v, i) => v == b[i]);
+// export default memo(FavsPage, (prevs, nexts) => {
+//   return equals(prevs.fileMessages, nexts.fileMessages);
+// });

src/routes/favs/styled.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+const Styled = styled.div`
+  height: 100vh;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  background-color: #fff;
+  margin: 8px 24px 10px 0;
+  border-radius: 16px;
+  padding: 16px;
+`;
+
+export default Styled;

src/routes/home/index.js

@@ -11,9 +11,10 @@ import usePreload from "./usePreload";
 import Tooltip from "../../common/component/Tooltip";
 import Notification from "../../common/component/Notification";
 
-import ChatIcon from "../../assets/icons/chat.svg?url";
-import ContactIcon from "../../assets/icons/contact.svg?url";
-import FolderIcon from "../../assets/icons/folder.svg?url";
+import ChatIcon from "../../assets/icons/chat.svg";
+import ContactIcon from "../../assets/icons/contact.svg";
+import FavIcon from "../../assets/icons/bookmark.svg";
+import FolderIcon from "../../assets/icons/folder.svg";
 // const routes = ["/setting", "/setting/channel/:cid"];
 export default function HomePage() {
   const { pathname } = useLocation();
@@ -49,17 +50,22 @@ export default function HomePage() {
           <nav className="link_navs">
             <NavLink className="link" to={"/chat"}>
               <Tooltip tip="Chat">
-                <img src={ChatIcon} alt="chat icon" />
+                <ChatIcon />
               </Tooltip>
             </NavLink>
             <NavLink className="link" to={"/contacts"}>
               <Tooltip tip="Members">
-                <img src={ContactIcon} alt="contact icon" />
+                <ContactIcon />
+              </Tooltip>
+            </NavLink>
+            <NavLink className="link" to={"/favs"}>
+              <Tooltip tip="Favorites">
+                <FavIcon className="fav" />
               </Tooltip>
             </NavLink>
             <NavLink className="link" to={"/files"}>
               <Tooltip tip="Files">
-                <img src={FolderIcon} alt="folder icon" />
+                <FolderIcon />
               </Tooltip>
             </NavLink>
           </nav>

src/routes/index.js

@@ -7,6 +7,7 @@ import OAuthPage from "./oauth";
 import LoginPage from "./login";
 import HomePage from "./home";
 import ChatPage from "./chat";
+import FavoritesPage from "./favs";
 import ContactsPage from "./contacts";
 import RequireAuth from "../common/component/RequireAuth";
 import RequireNoAuth from "../common/component/RequireNoAuth";
@@ -78,6 +79,7 @@ const PageRoutes = () => {
             <Route index element={<ContactsPage />} />
             <Route path=":user_id" element={<ContactsPage />} />
           </Route>
+          <Route path="favs" element={<FavoritesPage />}></Route>
           <Route
             path="files"
             element={<ResourceManagement fileMessages={fileMessages} />}