feat: finish favorite list page

src/common/component/Message/FavoritedMessage.js

@@ -1,41 +1,33 @@
 import { useEffect, useState } from "react";
-import dayjs from "dayjs";
+// import dayjs from "dayjs";
 
 import styled from "styled-components";
 import StyledMsg from "./styled";
 import renderContent from "./renderContent";
 import Avatar from "../Avatar";
 import useFavMessage from "../../hook/useFavMessage";
-const StyledSaved = styled.div`
+const StyledFav = styled.div`
   display: flex;
   flex-direction: column;
   border-radius: var(--br);
   background-color: #f4f4f5;
-  padding: 8px;
 `;
-const SavedMessage = ({ cid, id }) => {
-  const { favorites } = useFavMessage({ cid });
-  const [fav, setFav] = useState(null);
-  const [messages, setMessages] = useState(null);
-  useEffect(() => {
-    if (id && favorites) {
-      const msgs = favorites.find((f) => f.id == id)?.messages;
-      console.log("favv", favorites, id, msgs);
-      setMessages(msgs);
-    }
-  }, [id, favorites]);
+const FavoritedMessage = ({ id }) => {
+  const { favorites } = useFavMessage({});
+  const [msgs, setMsgs] = useState(null);
 
   useEffect(() => {
+    const current = favorites.find((f) => f.id == id);
+    const { messages } = current || {};
     if (messages) {
-      const fav_mids = messages.map(({ from_mid }) => from_mid) || [];
+      const favorite_mids = messages.map(({ from_mid }) => from_mid) || [];
 
-      setFav(
-        <StyledSaved data-fav-mids={fav_mids.join(",")}>
+      setMsgs(
+        <StyledFav data-favorite-mids={favorite_mids.join(",")}>
           <div className="list">
             {messages.map((msg, idx) => {
               const {
                 user = {},
-                created_at,
                 download,
                 content,
                 content_type,
@@ -43,7 +35,7 @@ const SavedMessage = ({ cid, id }) => {
                 thumbnail,
               } = msg;
               return (
-                <StyledMsg className="favorite" key={idx}>
+                <StyledMsg className="archive" key={idx}>
                   {user && (
                     <div className="avatar">
                       <Avatar url={user.avatar} name={user.name} />
@@ -52,16 +44,10 @@ const SavedMessage = ({ cid, id }) => {
                   <div className="details">
                     <div className="up">
                       <span className="name">{user?.name}</span>
-                      <i className="time">
-                        {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
-                      </i>
                     </div>
                     <div className="down">
                       {renderContent({
                         download,
-                        context: "channel",
-                        to: null,
-                        from_uid: null,
                         content,
                         content_type,
                         properties,
@@ -73,15 +59,14 @@ const SavedMessage = ({ cid, id }) => {
               );
             })}
           </div>
-        </StyledSaved>
+        </StyledFav>
       );
     }
-  }, [messages]);
+  }, [favorites, id]);
 
   if (!id) return null;
-  console.log("archive data", messages, fav);
 
-  return fav;
+  return msgs;
 };
 
-export default SavedMessage;
+export default FavoritedMessage;

src/common/component/Message/ForwardedMessage.js

@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react";
-import dayjs from "dayjs";
-
 import styled from "styled-components";
 import StyledMsg from "./styled";
 import renderContent from "./renderContent";
@@ -12,8 +10,8 @@ const StyledForward = styled.div`
   flex-direction: column;
   border-radius: var(--br);
   background-color: #f4f4f5;
-  padding: 8px;
   > .tip {
+    padding: 8px 8px 0 8px;
     display: flex;
     align-items: center;
     gap: 4px;
@@ -53,7 +51,7 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
             {messages.map((msg, idx) => {
               const {
                 user = {},
-                created_at,
+                // created_at,
                 download,
                 content,
                 content_type,
@@ -61,7 +59,7 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
                 thumbnail,
               } = msg;
               return (
-                <StyledMsg key={idx}>
+                <StyledMsg className="archive" key={idx}>
                   {user && (
                     <div className="avatar">
                       <Avatar url={user.avatar} name={user.name} />
@@ -70,9 +68,6 @@ const ForwardedMessage = ({ context, to, from_uid, id }) => {
                   <div className="details">
                     <div className="up">
                       <span className="name">{user?.name}</span>
-                      <i className="time">
-                        {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
-                      </i>
                     </div>
                     <div className="down">
                       {renderContent({

src/common/component/Message/renderContent.js

@@ -11,8 +11,8 @@ import URLPreview from "./URLPreview";
 
 import reactStringReplace from "react-string-replace";
 const renderContent = ({
-  context,
-  to,
+  context = null,
+  to = null,
   from_uid,
   created_at,
   properties,

src/common/component/Message/styled.js

@@ -1,94 +1,111 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 const StyledMsg = styled.div`
- position: relative;
- display: flex;
- align-items: flex-start;
- gap: 16px;
- padding: 4px 8px;
- margin: 8px 0;
- border-radius: 8px;
- content-visibility: auto;
- contain-intrinsic-size: auto 150px;
- &.in_view {
-  content-visibility: visible;
- }
- &[data-highlight='true'] {
-  background: #f5f6f7;
- }
- &:hover,
- &.preview {
-  content-visibility: inherit;
-  contain-intrinsic-size: inherit;
-  background: #f5f6f7;
-  .cmds {
-   visibility: visible;
-  }
- }
- &.readonly:hover {
-  background: none;
- }
- .avatar {
-  flex-shrink: 0;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  img {
-   width: 100%;
-   height: 100%;
-   border-radius: 50%;
-  }
- }
- > .details {
-  width: 100%;
+  position: relative;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  .up {
-   display: flex;
-   align-items: center;
-   gap: 8px;
-   font-weight: 500;
-   .name {
-    color: #06b6d4;
-    font-style: normal;
-    font-size: 14px;
-    line-height: 20px;
-   }
-   .time {
-    color: #bfbfbf;
-    font-size: 12px;
-    line-height: 18px;
-   }
+  align-items: flex-start;
+  gap: 16px;
+  padding: 4px 8px;
+  margin: 8px 0;
+  border-radius: 8px;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 150px;
+  &.in_view {
+    content-visibility: visible;
   }
-  .down {
-   user-select: text;
-   color: #374151;
-   font-weight: normal;
-   font-size: 14px;
-   line-height: 20px;
-   word-break: break-all;
-   white-space: pre-wrap;
-   .edited {
-    margin-left: 5px;
-    color: #999;
-    font-size: 10px;
-   }
-   &.sending {
-    opacity: 0.9;
-   }
-   .img {
-    max-width: 480px;
+  &[data-highlight="true"] {
+    background: #f5f6f7;
+  }
+  &:hover,
+  &.preview {
+    content-visibility: inherit;
+    contain-intrinsic-size: inherit;
+    background: #f5f6f7;
+    .cmds {
+      visibility: visible;
+    }
+  }
+  &.readonly:hover {
+    background: none;
+  }
+  .avatar {
+    flex-shrink: 0;
     cursor: pointer;
-   }
-   > .link {
-    text-decoration: none;
-    border-radius: 2px;
-    /* background-color: #f5feff; */
-    padding: 2px;
-    color: #1fe1f9;
-   }
+    width: 40px;
+    height: 40px;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  > .details {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .up {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 500;
+      .name {
+        color: #06b6d4;
+        font-style: normal;
+        font-size: 14px;
+        line-height: 20px;
+      }
+      .time {
+        color: #bfbfbf;
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+    .down {
+      user-select: text;
+      color: #374151;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      word-break: break-all;
+      white-space: pre-wrap;
+      .edited {
+        margin-left: 5px;
+        color: #999;
+        font-size: 10px;
+      }
+      &.sending {
+        opacity: 0.9;
+      }
+      .img {
+        max-width: 480px;
+        cursor: pointer;
+      }
+      > .link {
+        text-decoration: none;
+        border-radius: 2px;
+        /* background-color: #f5feff; */
+        padding: 2px;
+        color: #1fe1f9;
+      }
+    }
+  }
+  &.archive {
+    gap: 8px;
+    .avatar {
+      width: 24px;
+      height: 24px;
+    }
+    > .details {
+      gap: 0;
+      .up .name {
+        font-weight: 600;
+        color: #475467;
+      }
+      .down {
+        color: #475467;
+      }
+    }
   }
- }
 `;
 
 export default StyledMsg;

src/routes/chat/FavList.js

@@ -1,7 +1,7 @@
 // import React from "react";
 // import { useSelector } from "react-redux";
 import styled from "styled-components";
-import SavedMessage from "../../common/component/Message/SavedMessage";
+import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
 import IconSurprise from "../../assets/icons/emoji.suprise.svg";
 // import IconForward from "../../../assets/icons/forward.svg";
 import IconBookmark from "../../assets/icons/bookmark.svg";
@@ -93,7 +93,6 @@ export default function FavList({ cid = null, uid = null }) {
   return (
     <Styled>
       <h4 className="head">Saved Message({favorites.length})</h4>
-
       {noFavs ? (
         <div className="none">
           <IconSurprise />
@@ -107,7 +106,7 @@ export default function FavList({ cid = null, uid = null }) {
             console.log("favv", id);
             return (
               <li key={id} className="fav">
-                <SavedMessage cid={cid} id={id} />
+                <FavoritedMessage id={id} />
                 <div className="opts">
                   {/* <button
                     className="btn"

src/routes/favs/Search.js

@@ -1,46 +0,0 @@
-// 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

@@ -1,43 +1,173 @@
-// import { useState, useEffect, useRef, memo } from "react";
+import { useState, useEffect } from "react";
 import Styled from "./styled";
 import { useSelector } from "react-redux";
-import SavedMessage from "../../common/component/Message/SavedMessage";
+import FavoritedMessage from "../../common/component/Message/FavoritedMessage";
 import dayjs from "dayjs";
+import IconAudio from "../../assets/icons/file.audio.svg";
+import IconVideo from "../../assets/icons/file.video.svg";
+import IconUnkown from "../../assets/icons/file.unkown.svg";
+// import IconDoc from "../../assets/icons/file.doc.svg";
+import IconImage from "../../assets/icons/file.image.svg";
+import IconChannel from "../../assets/icons/channel.svg";
+import { ContentTypes } from "../../app/config";
+const Filters = [
+  {
+    icon: <IconUnkown className="icon" />,
+    title: "All Items",
+    filter: "",
+  },
+  {
+    icon: <IconImage className="icon" />,
+    title: "Images",
+    filter: "image",
+  },
+  // {
+  //   icon: <IconDoc className="icon" />,
+  //   title: "Files",
+  //   filter: "file",
+  // },
+  {
+    icon: <IconVideo className="icon" />,
+    title: "Videos",
+    filter: "video",
+  },
+  {
+    icon: <IconAudio className="icon" />,
+    title: "Audios",
+    filter: "audio",
+  },
+];
 function FavsPage() {
-  // const listContainerRef = useRef(null);
-  // const [filter, setFilter] = useState({});
-  const { favorites } = useSelector((store) => {
+  const [filter, setFilter] = useState("");
+  const [favs, setFavs] = useState([]);
+  const { favorites, channelData, userData } = useSelector((store) => {
     console.log("favs", store.favorites);
     return {
       favorites: store.favorites,
-      // channelMessage: store.channelMessage,
-      // view: store.ui.fileListView,
+      userData: store.contacts.byId,
+      channelData: store.channels.byId,
     };
   });
+  const handleFilter = (ftr) => {
+    console.log("fff", ftr);
+    setFilter(ftr);
+  };
+  useEffect(() => {
+    if (!filter) {
+      setFavs(favorites);
+    } else {
+      switch (filter) {
+        case "audio":
+          {
+            setFavs(
+              favorites.filter((f) => {
+                const msgs = f.messages || [];
+                return msgs.every((m) => {
+                  const file_type = m.properties?.content_type;
+                  return (
+                    m.content_type == ContentTypes.file &&
+                    file_type.startsWith("audio")
+                  );
+                });
+              })
+            );
+          }
+          break;
+        case "video":
+          {
+            setFavs(
+              favorites.filter((f) => {
+                const msgs = f.messages || [];
+                return msgs.every((m) => {
+                  const file_type = m.properties?.content_type;
+                  return (
+                    m.content_type == ContentTypes.file &&
+                    file_type.startsWith("video")
+                  );
+                });
+              })
+            );
+          }
+          break;
+        // case "file":
+        //   {
+        //     const tmps = favorites.filter((f) => {
+        //       const msgs = f.messages || [];
+        //       return msgs.every((m) => {
+        //         return m.content_type == ContentTypes.file;
+        //       });
+        //     });
+        //     setFavs(tmps);
+        //   }
+        //   break;
+        case "image":
+          {
+            const tmps = favorites.filter((f) => {
+              const msgs = f.messages || [];
+              return msgs.every((m) => {
+                const file_type = m.properties?.content_type;
+                return (
+                  m.content_type == ContentTypes.file &&
+                  file_type.startsWith("image")
+                );
+              });
+            });
+            setFavs(tmps);
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+  }, [filter, favorites]);
+
   return (
     <Styled>
-      {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>
-        );
-      })}
+      <div className="left">
+        <ul className="filters">
+          {Filters.map(({ icon, title, filter: f }) => {
+            return (
+              <li
+                key={f}
+                className={`filter ${f == filter ? "active" : ""}`}
+                onClick={handleFilter.bind(null, f)}
+              >
+                {icon}
+                <span className="txt">{title}</span>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      <div className="right">
+        {favs.map(({ id, created_at, messages }) => {
+          const [
+            {
+              source: { gid, uid },
+            },
+          ] = messages;
+          const tip = gid ? (
+            <span className="from channel">
+              <IconChannel className="icon" /> {channelData[gid]?.name}
+            </span>
+          ) : (
+            <span className="from user">
+              From <strong>{userData[uid]?.name}</strong>
+            </span>
+          );
+          return (
+            <div className="fav" key={id}>
+              <h4 className="tip">
+                {tip}
+                {dayjs(created_at).format("YYYY-MM-DD")}
+              </h4>
+              <FavoritedMessage key={id} id={id} />
+            </div>
+          );
+        })}
+      </div>
     </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

@@ -1,24 +1,79 @@
 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;
-  .fav {
+  overflow: auto;
+  .left {
+    padding: 8px;
+    width: 268px;
+    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
+    .filters {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      .filter {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: var(--br);
+        .icon {
+          width: 15px;
+          height: 20px;
+        }
+        .txt {
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 20px;
+          color: #667085;
+        }
+        &:hover,
+        &.active {
+          background: rgba(116, 127, 141, 0.2);
+        }
+      }
+    }
+  }
+  .right {
+    width: 100%;
+    padding: 16px;
     display: flex;
     flex-direction: column;
-    .tip {
-      font-style: normal;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 18px;
-      color: #bfbfbf;
+    gap: 32px;
+    overflow-y: scroll;
+    .fav {
+      max-width: 600px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      .tip {
+        display: inline-flex;
+        align-items: center;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 18px;
+        color: #bfbfbf;
+        .from {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          margin-right: 8px;
+          &.channel,
+          &.user strong {
+            font-weight: 600;
+            color: #344054;
+            .icon {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
     }
   }
 `;