fix: pinned message hidden sometimes

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,