enhance: file upload and filter

src/routes/resources/Filter/Date.js

@@ -20,17 +20,16 @@ const Styled = styled.div`
     display: flex;
     flex-direction: column;
     gap: 16px;
-    .type {
+    .date {
       position: relative;
       cursor: pointer;
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 16px;
       color: #616161;
-      .icon {
-        width: 15px;
-        height: auto;
-      }
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
       .check {
         position: absolute;
         right: 0;
@@ -70,7 +69,7 @@ export default function Date({ select = "", updateFilter }) {
   return (
     <Styled>
       <ul className="list">
-        <li className="type" onClick={handleClick.bind(null, undefined)}>
+        <li className="date" onClick={handleClick.bind(null, undefined)}>
           Any Time
           {!select && <CheckSign className="check" />}
         </li>
@@ -78,7 +77,7 @@ export default function Date({ select = "", updateFilter }) {
           return (
             <li
               key={title}
-              className="type"
+              className="date"
               onClick={handleClick.bind(null, _key)}
             >
               {title}

src/routes/resources/Filter/index.js

@@ -81,7 +81,6 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { from: false })}
         visible={fromVisible}
         placement="bottom-start"
-        trigger="click"
         content={
           <FilterFrom select={filter.from} updateFilter={handleUpdateFilter} />
         }
@@ -106,7 +105,6 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { channel: false })}
         visible={channelVisible}
         placement="bottom-start"
-        trigger="click"
         content={
           <FilterChannel
             select={filter.channel}
@@ -129,7 +127,6 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { type: false })}
         visible={typeVisible}
         placement="bottom-start"
-        trigger="click"
         content={
           <FilterType select={filter.type} updateFilter={handleUpdateFilter} />
         }
@@ -147,7 +144,6 @@ export default function Filter({ filter, updateFilter }) {
         onClickOutside={toggleFilterVisible.bind(null, { date: false })}
         visible={dateVisible}
         placement="bottom-start"
-        trigger="click"
         content={
           <FilterDate select={filter.date} updateFilter={handleUpdateFilter} />
         }

src/routes/resources/index.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, memo } from "react";
 import Styled from "./styled";
 import { useSelector } from "react-redux";
 import Masonry from "masonry-layout";
@@ -8,14 +8,49 @@ import View from "./View";
 import Search from "./Search";
 import Filter from "./Filter";
 import FileBox from "../../common/component/FileBox";
+const checkFilter = (data, filter, channelMessage) => {
+  console.log("filter data", data);
+  let selected = true;
+  const {
+    mid,
+    file_type,
+    created_at,
+    from_uid,
+    properties: { name },
+  } = data;
+  const {
+    name: nameFilter,
+    type: typeFilter,
+    date: timeFilter,
+    from: fromFilter,
+    channel: channelFilter,
+  } = filter;
+  if (fromFilter && fromFilter != from_uid) {
+    selected = false;
+  }
+  if (
+    channelFilter &&
+    channelMessage[channelFilter].findIndex((id) => id == mid) == -1
+  ) {
+    selected = false;
+  }
+  if (nameFilter) {
+    let str = ["", ...nameFilter.toLowerCase(), ""].join(".*");
+    let reg = new RegExp(str);
+    if (!reg.test(name)) {
+      selected = false;
+    }
+  }
+  return selected;
+};
 let msnry = null;
-export default function ResourceManagement() {
+function ResourceManagement({ fileMessages }) {
   const listContainerRef = useRef(null);
   const [filter, setFilter] = useState({});
-  const { fileMessages, message, view } = useSelector((store) => {
+  const { message, view, channelMessage } = useSelector((store) => {
     return {
       message: store.message,
-      fileMessages: store.fileMessage,
+      channelMessage: store.channelMessage,
       view: store.ui.fileListView,
     };
   });
@@ -25,6 +60,11 @@ export default function ResourceManagement() {
       return { ...prev, ...data };
     });
   };
+  const handleUpdateSearch = (val) => {
+    setFilter((prev) => {
+      return { ...prev, name: val };
+    });
+  };
   useEffect(() => {
     if (view == Views.grid && listContainerRef) {
       msnry = new Masonry(listContainerRef.current, {
@@ -47,7 +87,7 @@ export default function ResourceManagement() {
   console.log("files", fileMessages);
   return (
     <Styled>
-      <Search />
+      <Search value={filter.name} updateSearchValue={handleUpdateSearch} />
       <div className="divider"></div>
       <div className="opts">
         <Filter filter={filter} updateFilter={updateFilter} />
@@ -57,6 +97,8 @@ export default function ResourceManagement() {
         {fileMessages.map((id) => {
           const data = message[id];
           if (!data) return null;
+          const isSelected = checkFilter(data, filter, channelMessage);
+          if (!isSelected) return null;
           const {
             mid,
             content,
@@ -82,3 +124,7 @@ export default function ResourceManagement() {
     </Styled>
   );
 }
+const equals = (a, b) => a.length === b.length && a.every((v, i) => v == b[i]);
+export default memo(ResourceManagement, (prevs, nexts) => {
+  return equals(prevs.fileMessages, nexts.fileMessages);
+});