fix: pinned message hidden sometimes

2022-12-29 20:46:55 +08:00
parent 3e40e2f496
commit 1ef9cef69c
7 changed files with 106 additions and 37 deletions
@@ -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",
@@ -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 };
      }
-      state[mid] = { ...state[mid], ...data };
    },
    removeMessage(state, action: PayloadAction<number | number[]>) {
      const mids = Array.isArray(action.payload) ? action.payload : [action.payload];
@@ -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">
@@ -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;
@@ -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,
@@ -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>
                  )}
@@ -1,8 +1,8 @@
 //call `group` in backend
 import { ContentType } from "./message";
-export interface ChannelMember {}
+export interface ChannelMember { }

-export interface Message {}
+export interface Message { }

 export interface PinnedMessage {
  mid: number;
@@ -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
  };
 }