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();
+  }
+};