From ca4ca6cd3dbd2e5ac640fd4ce2013f8984a96845 Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Sat, 2 Apr 2022 16:26:13 +0800
Subject: [PATCH] enhance: file upload and filter

---
 src/app/config.js                             |  2 +-
 src/app/services/message.js                   |  3 +-
 src/common/component/FileBox/index.js         |  8 ++-
 src/common/component/FileBox/preview/Audio.js | 34 ++++++++++-
 src/common/component/FileBox/preview/Pdf.js   | 24 ++++----
 src/common/component/FileBox/styled.js        |  5 +-
 src/common/hook/useLogout.js                  |  2 +
 src/common/hook/useSendFileMessage.js         |  5 +-
 src/routes/index.js                           | 12 +++-
 src/routes/resources/Filter/Date.js           | 15 +++--
 src/routes/resources/Filter/index.js          |  4 --
 src/routes/resources/index.js                 | 56 +++++++++++++++++--
 12 files changed, 130 insertions(+), 40 deletions(-)

diff --git a/src/app/config.js b/src/app/config.js
index b21136cb..f8afdc13 100644
--- a/src/app/config.js
+++ b/src/app/config.js
@@ -1,6 +1,6 @@
 // const BASE_URL = `${location.origin}/api`;
 const BASE_URL = `https://dev.rustchat.com/api`;
-export const CACHE_VERSION = `0.3`;
+export const CACHE_VERSION = `0.3.1`;
 // const BASE_URL = `https://rustchat.net/api`;
 export const ContentTypes = {
   text: "text/plain",
diff --git a/src/app/services/message.js b/src/app/services/message.js
index df654a5b..264741f0 100644
--- a/src/app/services/message.js
+++ b/src/app/services/message.js
@@ -39,9 +39,10 @@ export const messageApi = createApi({
       }),
     }),
     prepareUploadFile: builder.mutation({
-      query: () => ({
+      query: (meta = {}) => ({
         url: `/resource/file/prepare`,
         method: "POST",
+        body: meta,
       }),
     }),
     uploadFile: builder.mutation({
diff --git a/src/common/component/FileBox/index.js b/src/common/component/FileBox/index.js
index 4a68e840..09b431da 100644
--- a/src/common/component/FileBox/index.js
+++ b/src/common/component/FileBox/index.js
@@ -77,7 +77,7 @@ export default function FileBox({
     <Styled
       className={`file_box ${flex ? "flex" : ""} ${
         withPreview ? "preview" : ""
-      }`}
+      } ${file_type.startsWith("audio") ? "audio" : ""}`}
     >
       <div className="basic">
         {icon}
@@ -91,7 +91,11 @@ export default function FileBox({
             </i>
           </span>
         </div>
-        <a className="download" download={name} href={content}>
+        <a
+          className="download"
+          download={name}
+          href={`${content}&download=true`}
+        >
           <IconDownload />
         </a>
       </div>
diff --git a/src/common/component/FileBox/preview/Audio.js b/src/common/component/FileBox/preview/Audio.js
index 5888baa3..3373f4b0 100644
--- a/src/common/component/FileBox/preview/Audio.js
+++ b/src/common/component/FileBox/preview/Audio.js
@@ -1,6 +1,34 @@
-import React from "react";
-
+import { useState } from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .err {
+    padding: 18px;
+    /* font-weight: bold; */
+    font-size: 16px;
+    color: #999;
+  }
+  audio {
+    width: 100%;
+  }
+`;
 export default function Audio({ url = "" }) {
+  const [err, setErr] = useState(false);
+  const handleError = (err) => {
+    console.log("audio err", err);
+    setErr(true);
+  };
   if (!url) return null;
-  return <audio src={url} />;
+  return (
+    <Styled>
+      {err ? (
+        <div className="err">Unable to play this audio</div>
+      ) : (
+        <audio controls src={url} onError={handleError} />
+      )}
+    </Styled>
+  );
 }
diff --git a/src/common/component/FileBox/preview/Pdf.js b/src/common/component/FileBox/preview/Pdf.js
index a16098bc..4bba26c7 100644
--- a/src/common/component/FileBox/preview/Pdf.js
+++ b/src/common/component/FileBox/preview/Pdf.js
@@ -1,29 +1,29 @@
-import { useState } from "react";
+// import { useState, useEffect } from "react";
 import styled from "styled-components";
-import { Document, Page } from "react-pdf";
+// import { Document, Page } from "react-pdf";
 const Styled = styled.div`
   padding: 8px;
   /* height: 218px; */
   overflow: hidden;
-  img {
+  embed {
     width: 100%;
     height: 100%;
-    object-fit: cover;
   }
 `;
 export default function Pdf({ url = "" }) {
-  const [pageNumber, setPageNumber] = useState(1);
-  const [numPages, setNumPages] = useState(null);
+  // const [content, setContent] = useState("");
+  // const [pageNumber, setPageNumber] = useState(1);
+  // const [numPages, setNumPages] = useState(null);
+  // const onDocumentLoadSuccess = ({ numPages }) => {
+  //   setNumPages(numPages);
+  // };
   if (!url) return null;
-  const onDocumentLoadSuccess = ({ numPages }) => {
-    setNumPages(numPages);
-  };
-  console.log("pdf url", url);
   return (
     <Styled>
-      <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
+      <embed src={url} type="application/pdf" />
+      {/* <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
         <Page pageNumber={pageNumber} />
-      </Document>
+      </Document> */}
     </Styled>
   );
 }
diff --git a/src/common/component/FileBox/styled.js b/src/common/component/FileBox/styled.js
index d3010dd8..6407a62f 100644
--- a/src/common/component/FileBox/styled.js
+++ b/src/common/component/FileBox/styled.js
@@ -17,6 +17,9 @@ const Styled = styled.div`
     position: relative;
     overflow: hidden;
     height: 281px;
+    &.audio {
+      height: 125px;
+    }
   }
   .basic {
     padding: 8px;
@@ -59,8 +62,8 @@ const Styled = styled.div`
     }
   }
   .preview {
+    height: calc(100% - 64px);
     overflow: hidden;
-
     /* todo */
   }
 `;
diff --git a/src/common/hook/useLogout.js b/src/common/hook/useLogout.js
index 4f97a783..8873483b 100644
--- a/src/common/hook/useLogout.js
+++ b/src/common/hook/useLogout.js
@@ -7,6 +7,7 @@ import { resetContacts } from "../../app/slices/contacts";
 import { resetChannelMsg } from "../../app/slices/message.channel";
 import { resetUserMsg } from "../../app/slices/message.user";
 import { resetReactionMessage } from "../../app/slices/message.reaction";
+import { resetFileMessage } from "../../app/slices/message.file";
 import { resetMessage } from "../../app/slices/message";
 import { useLazyLogoutQuery } from "../../app/services/auth";
 export default function useLogout() {
@@ -21,6 +22,7 @@ export default function useLogout() {
       dispatch(resetContacts());
       dispatch(resetMessage());
       dispatch(resetReactionMessage());
+      dispatch(resetFileMessage());
     });
   };
 
diff --git a/src/common/hook/useSendFileMessage.js b/src/common/hook/useSendFileMessage.js
index 141f3b17..f3ec46aa 100644
--- a/src/common/hook/useSendFileMessage.js
+++ b/src/common/hook/useSendFileMessage.js
@@ -53,7 +53,10 @@ export default function useUploadImageMessage({
     if (!file) return;
     const { name, type: file_type, size: file_size } = file;
     // 拿file id
-    const { data: file_id } = await prepareUploadFile();
+    const { data: file_id } = await prepareUploadFile({
+      content_type: file_type,
+      filename: name,
+    });
     console.log("file id", file_id);
 
     let uploadResult = null;
diff --git a/src/routes/index.js b/src/routes/index.js
index 0740ee68..e67a6359 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -16,7 +16,12 @@ import toast from "react-hot-toast";
 import ResourceManagement from "./resources";
 
 const PageRoutes = () => {
-  const { online } = useSelector((store) => store.ui);
+  const {
+    ui: { online },
+    fileMessages,
+  } = useSelector((store) => {
+    return { ui: store.ui, fileMessages: store.fileMessage };
+  });
   // 掉线检测
   useEffect(() => {
     let toastId = 0;
@@ -57,7 +62,10 @@ const PageRoutes = () => {
             <Route index element={<ContactsPage />} />
             <Route path=":user_id" element={<ContactsPage />} />
           </Route>
-          <Route path="files" element={<ResourceManagement />}></Route>
+          <Route
+            path="files"
+            element={<ResourceManagement fileMessages={fileMessages} />}
+          ></Route>
         </Route>
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
diff --git a/src/routes/resources/Filter/Date.js b/src/routes/resources/Filter/Date.js
index c7995d60..b33e2282 100644
--- a/src/routes/resources/Filter/Date.js
+++ b/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}
diff --git a/src/routes/resources/Filter/index.js b/src/routes/resources/Filter/index.js
index 743c5769..077b6c35 100644
--- a/src/routes/resources/Filter/index.js
+++ b/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} />
         }
diff --git a/src/routes/resources/index.js b/src/routes/resources/index.js
index 0ed0e77d..3ea37405 100644
--- a/src/routes/resources/index.js
+++ b/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);
+});