feat: lots updates

src/app/services/channel.js

@@ -1,13 +1,9 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
 import baseQuery from "./base.query";
 import { ContentTypes } from "../config";
-import { addChannelMsg } from "../slices/message.channel";
 import { updateChannel } from "../slices/channels";
-import {
-  addPendingMessage,
-  removePendingMessage,
-} from "../slices/message.pending";
+import { onMessageSendStarted } from "./handlers";
 export const channelApi = createApi({
   reducerPath: "channel",
   baseQuery,
@@ -61,36 +57,8 @@ export const channelApi = createApi({
         method: "POST",
         body: content,
       }),
-      async onQueryStarted(
-        { id, content, type, from_uid },
-        { dispatch, queryFulfilled }
-      ) {
-        // id: who send to ,from_uid: who sent
-        const mid = new Date().getTime();
-        const tmpMsg = {
-          id,
-          content,
-          content_type: ContentTypes[type],
-          created_at: new Date().getTime(),
-          mid,
-          from_uid,
-          unread: false,
-        };
-        dispatch(addPendingMessage({ type: "channel", msg: tmpMsg }));
-        try {
-          const { data: server_mid } = await queryFulfilled;
-          console.log("channel server mid", server_mid);
-          // 此处的id，是指给谁发的
-          dispatch(
-            addChannelMsg({ ...tmpMsg, mid: server_mid, unread: false })
-          );
-          dispatch(removePendingMessage({ id, mid, type: "channel" }));
-        } catch {
-          console.log("channel message send failed");
-          toast.error("Send Message Failed");
-          dispatch(removePendingMessage({ id, mid, type: "channel" }));
-          // patchResult.undo();
-        }
+      async onQueryStarted(param1, param2) {
+        await onMessageSendStarted.call(this, param1, param2, "channel");
       },
     }),
   }),

src/app/services/contact.js

@@ -1,15 +1,9 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
-import toast from "react-hot-toast";
-
+// import toast from "react-hot-toast";
 import baseQuery from "./base.query";
 import BASE_URL, { ContentTypes } from "../config";
-import { addUserMsg } from "../slices/message.user";
 import { removeContact } from "../slices/contacts";
-import {
-  addPendingMessage,
-  removePendingMessage,
-} from "../slices/message.pending";
-
+import { onMessageSendStarted } from "./handlers";
 export const contactApi = createApi({
   reducerPath: "contact",
   baseQuery,
@@ -73,36 +67,8 @@ export const contactApi = createApi({
         method: "POST",
         body: content,
       }),
-      async onQueryStarted(
-        { id, content, type, from_uid },
-        { dispatch, queryFulfilled }
-      ) {
-        // id: who send to ,from_uid: who sent
-        const mid = new Date().getTime();
-        const tmpMsg = {
-          id,
-          content,
-          content_type: ContentTypes[type],
-          created_at: new Date().getTime(),
-          mid,
-          from_uid,
-          unread: false,
-        };
-        dispatch(addPendingMessage({ type: "user", msg: tmpMsg }));
-        try {
-          // 走sse推送
-          const { data: server_mid } = await queryFulfilled;
-          // console.log("wtf", wtf);
-          // 此处的id，是指给谁发的
-          dispatch(
-            addUserMsg({ id, ...tmpMsg, mid: server_mid, unread: false })
-          );
-          dispatch(removePendingMessage({ id, mid, type: "user" }));
-        } catch {
-          toast.error("Send Message Failed");
-          dispatch(removePendingMessage({ id, mid, type: "user" }));
-          // patchResult.undo();
-        }
+      async onQueryStarted(param1, param2) {
+        await onMessageSendStarted.call(this, param1, param2, "user");
       },
     }),
   }),

src/app/services/handlers.js

@@ -0,0 +1,56 @@
+import toast from "react-hot-toast";
+import { ContentTypes } from "../config";
+import {
+  // addChannelMsg,
+  addChannelPendingMsg,
+  removeChannelPendingMsg,
+  replaceChannelPendingMsg,
+} from "../slices/message.channel";
+import {
+  addUserPendingMsg,
+  removeUserPendingMsg,
+  replaceUserPendingMsg,
+} from "../slices/message.user";
+
+// import {
+//   addPendingMessage,
+//   removePendingMessage,
+// } from "../slices/message.pending";
+export const onMessageSendStarted = async (
+  { id, content, type, from_uid },
+  { dispatch, queryFulfilled },
+  from = "channel"
+) => {
+  // id: who send to ,from_uid: who sent
+  const ts = new Date().getTime();
+  const tmpMsg = {
+    id,
+    content: type == "image" ? URL.createObjectURL(content) : content,
+    content_type: ContentTypes[type],
+    created_at: ts,
+    local_mid: ts,
+    from_uid,
+    // unread: false,
+  };
+  const addPendingMessage =
+    from == "channel" ? addChannelPendingMsg : addUserPendingMsg;
+  const replacePendingMessage =
+    from == "channel" ? replaceChannelPendingMsg : replaceUserPendingMsg;
+  const removePendingMessage =
+    from == "channel" ? removeChannelPendingMsg : removeUserPendingMsg;
+  // dispatch(addPendingMessage({ type: from, msg: tmpMsg }));
+  dispatch(addPendingMessage({ ...tmpMsg }));
+  try {
+    const { data: server_mid } = await queryFulfilled;
+    console.log("message server mid", server_mid);
+    // 此处的id，是指给谁发的
+    // const addMessage = from == "channel" ? addChannelMsg : addUserMsg;
+    dispatch(replacePendingMessage({ id, local_mid: ts, server_mid }));
+    // dispatch(removePendingMessage({ id, mid:ts, type: from }));
+  } catch {
+    console.log("message send failed");
+    toast.error("Send Message Failed");
+    dispatch(removePendingMessage({ id, mid: ts, type: from }));
+    // patchResult.undo();
+  }
+};

src/app/slices/message.channel.js

@@ -6,6 +6,9 @@ import {
   msgClearUnread,
   msgUpdate,
   msgDelete,
+  msgAddPending,
+  msgRemovePending,
+  msgReplacePending,
 } from "./message.handler";
 const initialState = {};
 
@@ -37,6 +40,15 @@ const channelMsgSlice = createSlice({
     clearChannelMsgUnread(state, action) {
       msgClearUnread(state, action.payload);
     },
+    addChannelPendingMsg(state, action) {
+      msgAddPending(state, action.payload);
+    },
+    replaceChannelPendingMsg(state, action) {
+      msgReplacePending(state, action.payload);
+    },
+    removeChannelPendingMsg(state, action) {
+      msgRemovePending(state, action.payload);
+    },
   },
 });
 export const {
@@ -48,5 +60,8 @@ export const {
   clearChannelMsgUnread,
   setChannelMsgRead,
   addChannelMsg,
+  addChannelPendingMsg,
+  replaceChannelPendingMsg,
+  removeChannelPendingMsg,
 } = channelMsgSlice.actions;
 export default channelMsgSlice.reducer;

src/app/slices/message.handler.js

@@ -58,10 +58,53 @@ export const msgAdd = (state, payload) => {
     state[id] = { [mid]: newMsg };
   }
 };
+export const msgAddPending = (state, payload) => {
+  const {
+    id,
+    content,
+    created_at,
+    local_mid,
+    reply_mid = null,
+    from_uid,
+    content_type,
+    unread = false,
+  } = payload;
+  const newMsg = { content, content_type, created_at, from_uid, unread };
+
+  if (reply_mid && state[id][reply_mid]) {
+    newMsg.reply = { mid: reply_mid, ...state[id][reply_mid] };
+  }
+  if (state[id]) {
+    state[id][local_mid] = newMsg;
+  } else {
+    state[id] = { [local_mid]: newMsg };
+  }
+};
+export const msgReplacePending = (state, payload) => {
+  const { id, local_mid, server_mid } = payload;
+  if (state[id] && state[id][local_mid]) {
+    // 先赋值，再去delete
+    state[id] = Object.fromEntries(
+      Object.entries(state[id]).map(([key, obj]) => {
+        return key == local_mid ? [server_mid, obj] : [key, obj];
+      })
+    );
+    // state[id][server_mid] = { ...state[id][local_mid] };
+    // delete state[id][local_mid];
+  }
+};
+export const msgRemovePending = (state, payload) => {
+  const { id, local_mid } = payload;
+  if (state[id] && state[id][local_mid]) {
+    delete state[id][local_mid];
+  }
+};
 export const msgSetRead = (state, payload) => {
   const { id, mid } = payload;
   console.log("set read", id, mid);
-  state[id][mid].unread = false;
+  if (state[id] && state[id][mid]) {
+    state[id][mid].unread = false;
+  }
 };
 export const msgDelete = (state, payload) => {
   const { id, mid } = payload;

src/app/slices/message.user.js

@@ -5,6 +5,9 @@ import {
   msgSetRead,
   msgUpdate,
   msgDelete,
+  msgAddPending,
+  msgRemovePending,
+  msgReplacePending,
 } from "./message.handler";
 const initialState = {};
 const userMsgSlice = createSlice({
@@ -32,6 +35,15 @@ const userMsgSlice = createSlice({
     setUserMsgRead(state, action) {
       msgSetRead(state, action.payload);
     },
+    addUserPendingMsg(state, action) {
+      msgAddPending(state, action.payload);
+    },
+    replaceUserPendingMsg(state, action) {
+      msgReplacePending(state, action.payload);
+    },
+    removeUserPendingMsg(state, action) {
+      msgRemovePending(state, action.payload);
+    },
   },
 });
 export const {
@@ -42,5 +54,8 @@ export const {
   initUserMsg,
   addUserMsg,
   setUserMsgRead,
+  addUserPendingMsg,
+  replaceUserPendingMsg,
+  removeUserPendingMsg,
 } = userMsgSlice.actions;
 export default userMsgSlice.reducer;