feat: lots updates

src/app/services/channel.js

@@ -1,8 +1,13 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
-import baseQuery from "./base.query";
 import { REHYDRATE } from "redux-persist";
+import toast from "react-hot-toast";
+import baseQuery from "./base.query";
 import { ContentTypes } from "../config";
-
+import { addChannelMsg } from "../slices/message.channel";
+import {
+  addPendingMessage,
+  removePendingMessage,
+} from "../slices/message.pending";
 export const channelApi = createApi({
   reducerPath: "channel",
   baseQuery,
@@ -23,6 +28,12 @@ export const channelApi = createApi({
         body: data,
       }),
     }),
+    removeChannel: builder.query({
+      query: (id) => ({
+        url: `group/${id}`,
+        method: "DELETE",
+      }),
+    }),
     sendChannelMsg: builder.mutation({
       query: ({ id, content, type = "text" }) => ({
         headers: {
@@ -32,11 +43,42 @@ 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: { gid, ...rest },
+          } = await queryFulfilled;
+          // 此处的id，是指给谁发的
+          dispatch(addChannelMsg({ id: gid, ...rest, 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();
+        }
+      },
     }),
   }),
 });
 
 export const {
+  useLazyRemoveChannelQuery,
   useGetChannelsQuery,
   useCreateChannelMutation,
   useSendChannelMsgMutation,

src/app/services/contact.js

@@ -1,7 +1,14 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
+import { REHYDRATE } from "redux-persist";
+import toast from "react-hot-toast";
+
 import baseQuery from "./base.query";
 import BASE_URL, { ContentTypes } from "../config";
-import { REHYDRATE } from "redux-persist";
+import { addUserMsg } from "../slices/message.user";
+import {
+  addPendingMessage,
+  removePendingMessage,
+} from "../slices/message.pending";
 
 export const contactApi = createApi({
   reducerPath: "contact",
@@ -41,6 +48,33 @@ 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 {
+          const { data } = await queryFulfilled;
+          // 此处的id，是指给谁发的
+          dispatch(addUserMsg({ id, ...data, unread: false }));
+          dispatch(removePendingMessage({ id, mid, type: "user" }));
+        } catch {
+          toast.error("Send Message Failed");
+          dispatch(removePendingMessage({ id, mid, type: "user" }));
+          // patchResult.undo();
+        }
+      },
     }),
   }),
 });