refactor: expire msg timer

src/app/slices/message.user.ts

@@ -38,7 +38,7 @@ const userMsgSlice = createSlice({
         state.ids.push(+id);
       }
     },
-    removeUserMsg(state, action) {
+    removeUserMsg(state, action: PayloadAction<{ id: number, mid: number }>) {
       const { id, mid } = action.payload;
       if (state.byId[id]) {
         const idx = state.byId[id].findIndex((i: number) => i == mid);

src/common/component/Divider.tsx

@@ -7,6 +7,7 @@ const StyledDivider = styled.hr`
   border: 0;
   border-top: 1px solid #e3e5e8;
   margin: 25px 0;
+  overflow: visible;
   &:before {
     background: #fff;
     padding: 2px 4px;

src/common/component/Message/ExpireTimer.tsx

@@ -1,31 +1,47 @@
 import dayjs from 'dayjs';
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { removeMessage } from '../../../app/slices/message';
+import { removeChannelMsg } from '../../../app/slices/message.channel';
+import { removeUserMsg } from '../../../app/slices/message.user';
 import IconTimer from '../../../assets/icons/timer.svg';
 type Props = {
+    context: "user" | "channel",
+    contextId: number,
     mid: number;
-    expires_in: number;
+    expiresIn: number;
-    create_at: number;
+    createAt: number;
 };
 
-const ExpireTimer: FC<Props> = ({ mid, create_at, expires_in }) => {
+const ExpireTimer: FC<Props> = ({ mid, createAt, expiresIn, context, contextId }) => {
     const [countdown, setCountdown] = useState<number | undefined>();
     const dispatch = useDispatch();
+    const clearMsgFromClient = useCallback(
+        () => {
+            if (context == "user") {
+                dispatch(removeUserMsg({ mid, id: contextId }));
+            } else {
+                dispatch(removeChannelMsg({ mid, id: contextId }));
+
+            }
+            dispatch(removeMessage(mid));
+        },
+        [context, contextId, mid],
+    );
+
     useEffect(() => {
-        if (expires_in > 0 && create_at > 0) {
+        if (expiresIn > 0 && createAt > 0) {
-            const expire_time = create_at + expires_in * 1000;
+            const expire_time = createAt + expiresIn * 1000;
             if (dayjs().isAfter(new Date(expire_time))) {
                 // 已过期，立即删除
-                dispatch(removeMessage(mid));
+                clearMsgFromClient();
-                // dispatch()
 
             } else {
                 // 倒计时
                 setCountdown(Math.floor((expire_time - new Date().getTime()) / 1000));
             }
         }
-    }, [expires_in, create_at, mid]);
+    }, [expiresIn, createAt]);
     useEffect(() => {
         let timer = 0;
         if (typeof countdown !== "undefined") {
@@ -39,8 +55,7 @@ const ExpireTimer: FC<Props> = ({ mid, create_at, expires_in }) => {
             } else {
                 // 倒计时结束
                 console.log("countdown over", mid, countdown);
-
+                clearMsgFromClient();
-                dispatch(removeMessage(mid));
             }
         }
         return () => {

src/common/component/Message/index.tsx

@@ -166,8 +166,10 @@ const Message: FC<IProps> = ({
       {showExpire && (
         <ExpireTimer
           mid={message.mid}
-          expires_in={expires_in ?? 0}
+          context={context}
-          create_at={time ?? 0}
+          contextId={contextId}
+          expiresIn={expires_in ?? 0}
+          createAt={time ?? 0}
         />
       )}
       {!edit && !readOnly && (

src/routes/chat/utils.tsx

@@ -147,7 +147,7 @@ type Params = {
   selectMode: boolean;
   read?: boolean;
   updateReadIndex?: (param: any) => void;
-  prev: object | null;
+  prev?: object | null;
   curr: object | null;
   contextId: number;
   context: "user" | "channel";
@@ -157,7 +157,7 @@ export const renderMessageFragment = ({
   selectMode = false,
   read = true,
   updateReadIndex,
-  prev = null,
+  prev,
   curr = null,
   contextId = 0,
   context = "user"
@@ -167,9 +167,10 @@ export const renderMessageFragment = ({
   const local_id = curr.properties?.local_id;
   let divider = null;
   let time = dayjs(created_at).format("YYYY/MM/DD");
-  if (!prev) {
+  if (!prev && typeof prev !== 'undefined') {
+    // 首条信息
     divider = time;
-  } else {
+  } else if (prev) {
     let { created_at: prev_created_at } = prev;
     if (!dayjs(prev_created_at).isSame(created_at, "day")) {
       divider = time;