feat: favorite message

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;