refactor: favorite error tip

src/common/component/Message/Commands.js

@@ -69,9 +69,9 @@ export default function Commands({
   from_uid = 0,
   toggleEditMessage,
 }) {
-  const { addFavorite, isFavorited } = useFavMessage(
-    context == "channel" ? contextId : null
-  );
+  const { addFavorite, isFavorited } = useFavMessage({
+    cid: context == "channel" ? contextId : null,
+  });
   const [mids, setMids] = useState([]);
   const dispatch = useDispatch();
   const [pinModalVisible, setPinModalVisible] = useState(false);
@@ -122,8 +122,12 @@ export default function Commands({
       toast.success("Favorited!");
       return;
     }
-    await addFavorite(mid);
+    const added = await addFavorite(mid);
+    if (added) {
       toast.success("Added Favorites!");
+    } else {
+      toast.error("Added Favorites Failed!");
+    }
   };
   useEffect(() => {
     if (isUnpinSuccess) {

src/common/component/Message/SavedMessage.js

@@ -14,7 +14,7 @@ const StyledSaved = styled.div`
   padding: 8px;
 `;
 const SavedMessage = ({ cid, id }) => {
-  const { favorites } = useFavMessage(cid);
+  const { favorites } = useFavMessage({ cid });
   const [fav, setFav] = useState(null);
   const [messages, setMessages] = useState(null);
   useEffect(() => {

src/common/hook/useFavMessage.js

@@ -4,21 +4,20 @@ import {
   useLazyRemoveFavoriteQuery,
   useFavoriteMessageMutation,
 } from "../../app/services/message";
-export default function useFavMessage(cid = null) {
+export default function useFavMessage({ cid = null, uid = null }) {
   const [removeFav] = useLazyRemoveFavoriteQuery();
   const [addFav] = useFavoriteMessageMutation();
   const [favorites, setFavorites] = useState([]);
   const { favs = [] } = useSelector((store) => {
     return {
-      // mids: store.channelMessage.byId[cid],
       favs: store.favorites,
-      // loginUser: store.contacts.byId[store.authData.uid],
     };
   });
   const addFavorite = async (mid = []) => {
     const mids = Array.isArray(mid) ? mid.map((i) => +i) : [+mid];
     if (mids.length == 0) return;
-    await addFav(mids);
+    const { error = null } = await addFav(mids);
+    return !error;
   };
   const removeFavorite = (id) => {
     if (!id) return;
@@ -36,16 +35,23 @@ export default function useFavMessage(cid = null) {
     return mids.findIndex((i) => i == mid) > -1;
   };
   useEffect(() => {
-    const filtereds = cid
+    let filtereds = [];
+    filtereds = cid
       ? favs.filter((f) => {
           if (!f.messages) return false;
           return f.messages.every((m) => m.source.gid == cid);
         })
       : favs;
-    console.log("filtered", filtereds);
-    setFavorites(filtereds);
-  }, [cid, favs]);
+    filtereds = uid
+      ? filtereds.filter((f) => {
+          if (!f.messages) return false;
+          return f.messages.every((m) => m.source.uid == uid);
+        })
+      : filtereds;
 
+    setFavorites(filtereds);
+  }, [cid, uid, favs]);
+  console.log("filtered", cid, uid, favs);
   return {
     isFavorited,
     addFavorite,

src/routes/chat/ChannelChat/index.js

@@ -1,45 +1,53 @@
-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';
-import Tooltip from '../../../common/component/Tooltip';
-import Contact from '../../../common/component/Contact';
-import Layout from '../Layout';
-import { renderMessageFragment } from '../utils';
-import EditIcon from '../../../assets/icons/edit.svg';
+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";
+import Tooltip from "../../../common/component/Tooltip";
+import Contact from "../../../common/component/Contact";
+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 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";
-import IconHeadphone from '../../../assets/icons/headphone.svg';
-import boardosIcon from '../../../assets/icons/app.boardos.svg?url';
-import webrowseIcon from '../../../assets/icons/app.webrowse.svg?url';
-import addIcon from '../../../assets/icons/add.svg?url';
+import IconHeadphone from "../../../assets/icons/headphone.svg";
+import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
+import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
+import addIcon from "../../../assets/icons/add.svg?url";
 import {
   // StyledNotification,
   StyledContacts,
   StyledChannelChat,
- StyledHeader
-} from './styled';
-import ChannelInviteModal from '../../../common/component/ChannelInviteModal';
-import { NavLink, useLocation } from 'react-router-dom';
-import Tippy from '@tippyjs/react';
+  StyledHeader,
+} from "./styled";
+import ChannelInviteModal from "../../../common/component/ChannelInviteModal";
+import { NavLink, useLocation } from "react-router-dom";
+import Tippy from "@tippyjs/react";
 
-export default function ChannelChat({ cid = '', dropFiles = [] }) {
- const [toolVisible, setToolVisible] = useState('');
+export default function ChannelChat({ cid = "", dropFiles = [] }) {
+  const [toolVisible, setToolVisible] = useState("");
   const { pathname } = useLocation();
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   const [membersVisible, setMembersVisible] = useState(true);
   const [addMemberModalVisible, setAddMemberModalVisible] = useState(false);
   // const dispatch = useDispatch();
- const { selects, msgIds, userIds, data, messageData, loginUid, loginUser, footprint } =
-  useSelector((store) => {
+  const {
+    selects,
+    msgIds,
+    userIds,
+    data,
+    messageData,
+    loginUid,
+    loginUser,
+    footprint,
+  } = useSelector((store) => {
     return {
       selects: store.ui.selectMessages[`channel_${cid}`],
       footprint: store.footprint,
@@ -48,7 +56,7 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
       msgIds: store.channelMessage[cid] || [],
       userIds: store.contacts.ids,
       data: store.channels.byId[cid] || {},
-    messageData: store.message || {}
+      messageData: store.message || {},
     };
   });
   const ref = useChatScroll(msgIds);
@@ -65,12 +73,14 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
   const { name, description, is_public, members = [], owner } = data;
   const memberIds = is_public ? userIds : members;
   const addVisible = loginUser?.is_admin || owner == loginUid;
- console.log('channel message list', msgIds);
+  console.log("channel message list", msgIds);
   const readIndex = footprint.readChannels[cid];
   const pinCount = data?.pinned_messages?.length || 0;
   return (
     <>
-   {addMemberModalVisible && <ChannelInviteModal cid={cid} closeModal={toggleAddVisible} />}
+      {addMemberModalVisible && (
+        <ChannelInviteModal cid={cid} closeModal={toggleAddVisible} />
+      )}
       <Layout
         to={cid}
         context="channel"
@@ -94,57 +104,72 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
                   <img src={alertIcon} alt="opt icon" />
                 </Tooltip>
               </li> */}
-       <Tooltip tip="Pin" placement="left" disabled={toolVisible == 'pin'}>
+              <Tooltip
+                tip="Pin"
+                placement="left"
+                disabled={toolVisible == "pin"}
+              >
                 <Tippy
                   onShow={() => {
-          setToolVisible('pin');
+                    setToolVisible("pin");
                   }}
                   onHide={() => {
-          setToolVisible('');
+                    setToolVisible("");
                   }}
                   delay={[0, 0]}
                   duration={0}
                   placement="left-start"
-         popperOptions={{ strategy: 'fixed' }}
+                  popperOptions={{ strategy: "fixed" }}
                   offset={[0, 80]}
                   interactive
                   trigger="click"
                   content={<PinList id={cid} />}
                 >
                   <li
-          className={`tool ${pinCount > 0 ? 'badge' : ''} ${toolVisible == 'pin' ? 'active' : ''} `}
+                    className={`tool ${pinCount > 0 ? "badge" : ""} ${
+                      toolVisible == "pin" ? "active" : ""
+                    } `}
                     data-count={pinCount}
                   >
                     <IconPin />
                   </li>
                 </Tippy>
               </Tooltip>
-       <Tooltip tip="Favorite" placement="left" disabled={toolVisible == 'favorite'}>
+              <Tooltip
+                tip="Favorite"
+                placement="left"
+                disabled={toolVisible == "favorite"}
+              >
                 <Tippy
                   onShow={() => {
-          setToolVisible('favorite');
+                    setToolVisible("favorite");
                   }}
                   onHide={() => {
-          setToolVisible('');
+                    setToolVisible("");
                   }}
                   delay={[0, 0]}
                   duration={0}
                   placement="left-start"
-         popperOptions={{ strategy: 'fixed' }}
+                  popperOptions={{ strategy: "fixed" }}
                   offset={[0, 180]}
                   interactive
                   trigger="click"
                   content={<FavList cid={cid} />}
                 >
                   <li
-          className={`tool fav ${toolVisible == 'favorite' ? 'active' : ''} `}
+                    className={`tool fav ${
+                      toolVisible == "favorite" ? "active" : ""
+                    } `}
                     data-count={pinCount}
                   >
                     <IconFav />
                   </li>
                 </Tippy>
               </Tooltip>
-       <li className={`tool ${membersVisible ? 'active' : ''}`} onClick={toggleMembersVisible}>
+              <li
+                className={`tool ${membersVisible ? "active" : ""}`}
+                onClick={toggleMembersVisible}
+              >
                 <Tooltip tip="Channel Members" placement="left">
                   <IconPeople />
                 </Tooltip>
@@ -196,7 +221,10 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
           <div className="info">
             <h2 className="title">Welcome to #{name} !</h2>
             <p className="desc">This is the start of the #{name} channel. </p>
-      <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit">
+            <NavLink
+              to={`/setting/channel/${cid}?f=${pathname}`}
+              className="edit"
+            >
               <EditIcon className="icon" />
               Edit Channel
             </NavLink>
@@ -220,7 +248,7 @@ export default function ChannelChat({ cid = '', dropFiles = [] }) {
                   prev,
                   curr,
                   contextId: cid,
-         context: 'channel'
+                  context: "channel",
                 });
               })}
           </div>

src/routes/chat/DMChat/index.js

@@ -1,10 +1,14 @@
 // import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { useDebounce } from "rooks";
+import Tippy from "@tippyjs/react";
+import FavList from "../FavList";
+
 import Tooltip from "../../../common/component/Tooltip";
-import alertIcon from "../../../assets/icons/alert.svg?url";
-import pinIcon from "../../../assets/icons/pin.svg?url";
+import FavIcon from "../../../assets/icons/bookmark.svg";
 // import searchIcon from "../../../assets/icons/search.svg?url";
+import IconHeadphone from "../../../assets/icons/headphone.svg";
+
 import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
 import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
 import useChatScroll from "../../../common/hook/useChatScroll";
@@ -48,15 +52,37 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
       aside={
         <>
           <ul className="tools">
+            <li className="tool">
+              <IconHeadphone />
+            </li>
             {/* <li className="tool">
-              <img src={searchIcon} alt="opt icon" />
-            </li> */}
-            <li className="tool">
               <img src={alertIcon} alt="opt icon" />
+            </li> */}
+            <Tooltip tip="Favorite" placement="left">
+              <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 uid={uid} />}
+              >
+                <li className={`tool fav`}>
+                  <FavIcon />
                 </li>
-            <li className="tool">
-              <img src={pinIcon} alt="opt icon" />
-            </li>
+              </Tippy>
+            </Tooltip>
+            {/* <li className="tool fav">
+              <FavIcon />
+            </li> */}
           </ul>
           <hr className="divider" />
           <ul className="apps">

src/routes/chat/FavList.js

@@ -1,11 +1,11 @@
 // 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 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";
+import IconBookmark from "../../assets/icons/bookmark.svg";
+import useFavMessage from "../../common/hook/useFavMessage";
 const Styled = styled.div`
   padding: 16px;
   background: #f9fafb;
@@ -82,8 +82,8 @@ const Styled = styled.div`
     }
   }
 `;
-export default function FavList({ cid = null }) {
-  const { favorites, removeFavorite } = useFavMessage(cid);
+export default function FavList({ cid = null, uid = null }) {
+  const { favorites, removeFavorite } = useFavMessage({ cid, uid });
   const handleRemove = (evt) => {
     const { id } = evt.currentTarget.dataset;
     console.log("remove fav", id);

src/routes/chat/Layout/Operations.js

@@ -40,7 +40,7 @@ const Styled = styled.div`
 export default function Operations({ context, id }) {
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const { canDelete } = useDeleteMessage();
-  const { addFavorite } = useFavMessage(id);
+  const { addFavorite } = useFavMessage({});
   const mids = useSelector(
     (store) => store.ui.selectMessages[`${context}_${id}`]
   );
@@ -50,9 +50,14 @@ export default function Operations({ context, id }) {
     dispatch(updateSelectMessages({ context, id, operation: "reset" }));
   };
   const handleFav = async () => {
-    await addFavorite(mids);
+    const added = await addFavorite(mids);
+    if (added) {
+      console.log("added", added);
       dispatch(updateSelectMessages({ context, id, operation: "reset" }));
       toast.success("Messages Saved!");
+    } else {
+      toast.error("Operation Failed!");
+    }
   };
   const toggleDeleteModal = (isSuccess = false) => {
     setDeleteModalVisible((prev) => !prev);

src/routes/favs/index.js

@@ -2,17 +2,12 @@
 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";
+import dayjs from "dayjs";
 function FavsPage() {
   // const listContainerRef = useRef(null);
   // const [filter, setFilter] = useState({});
   const { favorites } = useSelector((store) => {
+    console.log("favs", store.favorites);
     return {
       favorites: store.favorites,
       // channelMessage: store.channelMessage,
@@ -21,8 +16,22 @@ function FavsPage() {
   });
   return (
     <Styled>
-      {favorites.map(({ id, created_at }) => {
-        return <SavedMessage key={id} id={id} />;
+      {favorites.map(({ id, created_at, messages }) => {
+        const [
+          {
+            source: { gid, uid },
+          },
+        ] = messages;
+
+        return (
+          <div className="fav" key={id}>
+            <h4 className="tip">
+              {gid ? `gid:${gid}` : `uid:${uid}`}{" "}
+              {dayjs(created_at).format("YYYY-MM-DD")}
+            </h4>
+            <SavedMessage key={id} id={id} />
+          </div>
+        );
       })}
     </Styled>
   );

src/routes/favs/styled.js

@@ -10,6 +10,17 @@ const Styled = styled.div`
   margin: 8px 24px 10px 0;
   border-radius: 16px;
   padding: 16px;
+  .fav {
+    display: flex;
+    flex-direction: column;
+    .tip {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 18px;
+      color: #bfbfbf;
+    }
+  }
 `;
 
 export default Styled;