fix: pinned message hidden sometimes

src/app/config.ts

@@ -43,6 +43,12 @@ export const ContentTypes = {
   formData: "multipart/form-data",
   json: "application/json"
 };
+export const MessageTypes = {
+  text: "text/plain",
+  markdown: "text/markdown",
+  file: "vocechat/file",
+  archive: "vocechat/archive",
+};
 export const firebaseConfig = {
   apiKey: "AIzaSyCc3VuCJZgzQLIH2wrYdQzsUOc1DuZiIOA",
   authDomain: "vocechatdev.firebaseapp.com",

src/app/slices/message.ts

@@ -1,13 +1,13 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import BASE_URL, { ContentTypes } from "../config";
-import { isImage } from "../../common/utils";
+// import  { ContentTypes } from "../config";
+import { normalizeFileMessage } from "../../common/utils";
 import { ContentType } from "../../types/message";
 export interface MessagePayload {
   mid: number;
   from_uid?: number;
   read?: boolean;
   created_at?: number;
-  sending: boolean;
+  sending?: boolean;
   content_type: ContentType;
   content: string;
   expires_in?: number | null;
@@ -49,34 +49,18 @@ const messageSlice = createSlice({
     },
     addMessage(state, action: PayloadAction<MessagePayload>) {
       const data = action.payload;
-      const { mid, sending, content_type, content, properties } = data;
+      const { mid, sending } = data;
       // console.log("tfile", sending, content, content_type);
 
       // 如果是正发送，并且已存在，则不覆盖
       if (sending && state[mid]) return;
-      const isFile = content_type == ContentTypes.file;
-      // image
-      const props = properties;
-      const isPic = isImage(props?.content_type, props?.size);
-      if (isFile) {
-        if (!sending) {
-          data.file_path = content;
-          data.content = `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
-            content
-          )}`;
-          data.download = `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
-            content
-          )}&download=true`;
-          data.thumbnail = isPic
-            ? `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
-              content
-            )}&thumbnail=true`
-            : "";
-        } else if (isPic) {
-          data.thumbnail = content;
-        }
-      }
+      // 文件类消息的处理
+      const normalized = normalizeFileMessage(data);
+      if (normalized) {
+        state[mid] = { ...state[mid], ...data, ...normalized };
+      } else {
         state[mid] = { ...state[mid], ...data };
+      }
     },
     removeMessage(state, action: PayloadAction<number | number[]>) {
       const mids = Array.isArray(action.payload) ? action.payload : [action.payload];

src/common/component/Message/PreviewMessage.tsx

@@ -14,8 +14,8 @@ const PreviewMessage: FC<Props> = ({ mid = 0 }) => {
     return { msg: store.message[mid], usersData: store.users.byId };
   });
   if (!msg) return null;
-  const { from_uid, created_at, content_type, content, thumbnail = "", properties } = msg;
-  const { name, avatar } = usersData[from_uid || 0] || {};
+  const { from_uid = 0, created_at, content_type, content, thumbnail = "", properties } = msg;
+  const { name, avatar } = usersData[from_uid] ?? {};
   return (
     <StyledWrapper className={`preview`}>
       <div className="avatar">

src/common/component/PinnedMessage.tsx

@@ -0,0 +1,49 @@
+import dayjs from "dayjs";
+import renderContent from "./Message/renderContent";
+import Avatar from "./Avatar";
+import StyledWrapper from "./Message/styled";
+import { useAppSelector } from "../../app/store";
+import { FC } from "react";
+import { PinnedMessage } from "../../types/channel";
+import { normalizeFileMessage } from "../utils";
+import { MessagePayload } from "../../app/slices/message";
+
+interface Props {
+  data: PinnedMessage
+}
+
+const PinnedMessageView: FC<Props> = ({ data }) => {
+  const { usersData } = useAppSelector((store) => {
+    return { usersData: store.users.byId };
+  });
+  const { created_by = 0 } = data;
+  const normalized = normalizeFileMessage(data as MessagePayload) || {};
+  console.log("nnnn", normalized);
+
+  const { created_at, content_type, content, properties, thumbnail = "" } = { ...data, ...normalized };
+  const { name, avatar } = usersData[created_by] ?? {};
+  return (
+    <StyledWrapper className={`preview`}>
+      <div className="avatar">
+        <Avatar width={40} height={40} src={avatar} name={name} />
+      </div>
+      <div className="details">
+        <div className="up">
+          <span className="name">{name}</span>
+          <i className="time">{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}</i>
+        </div>
+        <div className={`down`}>
+          {renderContent({
+            content_type,
+            content,
+            thumbnail,
+            from_uid: created_by,
+            properties
+          })}
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default PinnedMessageView;

src/common/utils.tsx

@@ -7,6 +7,8 @@ import IconDoc from "../assets/icons/file.doc.svg";
 import IconCode from "../assets/icons/file.code.svg";
 import IconImage from "../assets/icons/file.image.svg";
 import { Archive, ArchiveMessage } from "../types/resource";
+import { MessagePayload } from "../app/slices/message";
+import { PinnedMessage } from "../types/channel";
 
 export const getLocalAuthData = () => {
   return {
@@ -181,6 +183,33 @@ export const getFileIcon = (type: string, name = "") => {
   }
   return icon;
 };
+export const normalizeFileMessage = (data: MessagePayload) => {
+  const { properties, content, sending = false, content_type } = data;
+  const isFile = content_type == ContentTypes.file;
+  const isPic = isImage(properties?.content_type, properties?.size);
+  let res: null | { file_path?: string, content?: string, download?: string, thumbnail: string } = null;
+  if (isFile) {
+    if (!sending) {
+      res = {
+        file_path: content,
+        content: `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
+          content
+        )}`,
+        download: `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
+          content
+        )}&download=true`,
+        thumbnail: isPic
+          ? `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
+            content
+          )}&thumbnail=true`
+          : ""
+      };
+    } else if (isPic) {
+      res = { thumbnail: content };
+    }
+  }
+  return res;
+};
 export const normalizeArchiveData = (
   data: Archive | null,
   filePath: string | null,

src/routes/chat/ChannelChat/PinList.tsx

@@ -1,10 +1,10 @@
 import { FC, FormEvent } from "react";
 import styled from "styled-components";
 import usePinMessage from "../../../common/hook/usePinMessage";
-import PreviewMessage from "../../../common/component/Message/PreviewMessage";
 import IconSurprise from "../../../assets/icons/emoji.surprise.svg";
 import IconClose from "../../../assets/icons/close.svg";
 import { useTranslation } from "react-i18next";
+import PinnedMessage from "../../../common/component/PinnedMessage";
 const Styled = styled.div`
   padding: 16px;
   background: #f9fafb;
@@ -98,7 +98,6 @@ const PinList: FC<Props> = ({ id }: Props) => {
   return (
     <Styled>
       <h4 className="head">{t("pinned_msg")}({pins.length})</h4>
-
       {noPins ? (
         <div className="none">
           <IconSurprise />
@@ -106,13 +105,13 @@ const PinList: FC<Props> = ({ id }: Props) => {
         </div>
       ) : (
         <ul className="list">
-          {pins.map(({ mid }) => {
+          {pins.map((data) => {
             return (
-              <li key={mid} className="pin">
-                <PreviewMessage mid={mid} />
+              <li key={data.mid} className="pin">
+                <PinnedMessage data={data} />
                 <div className="opts">
                   {canPin && (
-                    <button className="btn" data-mid={mid} onClick={handleUnpin}>
+                    <button className="btn" data-mid={data.mid} onClick={handleUnpin}>
                       <IconClose />
                     </button>
                   )}

src/types/channel.ts

@@ -11,7 +11,9 @@ export interface PinnedMessage {
   created_by: number;
   created_at: number;
   properties: {
-    local_id?: string;
+    local_id?: number;
+    content_type?: string;
+    size?: number
   };
 }