feat: clear msg from channel (draft)

src/app/services/channel.ts

@@ -95,6 +95,28 @@ export const channelApi = createApi({
         return `${location.origin}${invite.pathname}${invite.hash}${invite.search}`;
       }
     }),
+    clearChannelMessage: builder.query<void, number>({
+      query: (id) => ({
+        url: `/group/${id}/clear`,
+        method: "DELETE"
+      }),
+      async onQueryStarted(id, { dispatch, getState, queryFulfilled }) {
+        const {
+          channelMessage,
+        } = getState() as RootState;
+        try {
+          await queryFulfilled;
+          // 删掉该channel下的所有消息&reaction
+          const mids = channelMessage[id];
+          if (mids) {
+            dispatch(removeMessage(mids));
+            dispatch(removeReactionMessage(mids));
+          }
+        } catch {
+          console.error("clear channel msg error");
+        }
+      }
+    }),
     removeChannel: builder.query<void, number>({
       query: (id) => ({
         url: `/group/${id}`,
@@ -204,5 +226,6 @@ export const {
   useSendChannelMsgMutation,
   useAddMembersMutation,
   useRemoveMembersMutation,
-  useUpdateIconMutation
+  useUpdateIconMutation,
+  useLazyClearChannelMessageQuery
 } = channelApi;

src/app/slices/message.channel.ts

@@ -13,6 +13,10 @@ const channelMsgSlice = createSlice({
     resetChannelMsg() {
       return initialState;
     },
+    clearChannelMessage(state, action: PayloadAction<number>) {
+      const id = action.payload;
+      state[id] = [];
+    },
     fillChannelMsg(state, action: PayloadAction<State>) {
       return action.payload;
     },
@@ -23,7 +27,7 @@ const channelMsgSlice = createSlice({
         const localMsgExisted = state[id]!.findIndex((id) => id == local_id) > -1;
         if (midExisted || localMsgExisted) return;
         // 每次入库，都排序
-        const newArr = [...state[id], +mid].sort((a, b) => a - b);
+        const newArr = [...state[id] as number[], +mid].sort((a, b) => a - b);
         state[id] = newArr;
       } else {
         state[id] = [+mid];
@@ -67,7 +71,8 @@ export const {
   fillChannelMsg,
   addChannelMsg,
   removeChannelMsg,
-  replaceChannelMsg
+  replaceChannelMsg,
+  clearChannelMessage
 } = channelMsgSlice.actions;
 
 export default channelMsgSlice.reducer;

src/common/hook/useStreaming/index.ts

@@ -27,7 +27,7 @@ import { ServerEvent, UsersStateEvent } from "../../../types/sse";
 import { useRenewMutation } from "../../../app/services/auth";
 import { getLocalAuthData } from "../../utils";
 import { removeUserSession } from "../../../app/slices/message.user";
-import { removeChannelSession } from "../../../app/slices/message.channel";
+import { clearChannelMessage, removeChannelSession } from "../../../app/slices/message.channel";
 
 const getQueryString = (params: { [key: string]: string }) => {
   const sp = new URLSearchParams();
@@ -144,6 +144,11 @@ export default function useStreaming() {
           keepAlive();
           dispatch(setReady());
           break;
+        case "group_message_cleared": {
+          const { gid } = data;
+          dispatch(clearChannelMessage(gid));
+          break;
+        }
         case "users_snapshot": {
           const { version } = data;
           dispatch(updateUsersVersion(version));

src/routes/settingChannel/Overview.tsx

@@ -3,6 +3,7 @@ import toast from "react-hot-toast";
 import {
   useChangeChannelTypeMutation,
   useGetChannelQuery,
+  // useLazyClearChannelMessageQuery,
   useUpdateChannelMutation,
   useUpdateIconMutation
 } from "../../app/services/channel";
@@ -16,6 +17,7 @@ import IconChannel from "../../assets/icons/channel.svg";
 import { useAppSelector } from "../../app/store";
 import { Channel } from "../../types/channel";
 import { useTranslation } from "react-i18next";
+// import StyledButton from "../../common/component/styled/Button";
 
 export default function Overview({ id = 0 }) {
   const { t } = useTranslation("setting", { keyPrefix: "channel" });
@@ -30,6 +32,7 @@ export default function Overview({ id = 0 }) {
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState<Channel>();
   const [updateChannelIcon] = useUpdateIconMutation();
+  // const [clearMessage, { isSuccess: clearSuccess }] = useLazyClearChannelMessageQuery();
   const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation();
   const [changeChannelType, { isSuccess: changeTypeSuccess }] = useChangeChannelTypeMutation();
   const handleUpdate = () => {
@@ -51,6 +54,11 @@ export default function Overview({ id = 0 }) {
     updateChannelIcon({ gid: id, image });
   };
 
+  // const handleClear = () => {
+  //   if (confirm("are you sure?")) {
+  //     clearMessage(id);
+  //   }
+  // };
   const handleReset = () => {
     setValues(data);
   };
@@ -60,6 +68,11 @@ export default function Overview({ id = 0 }) {
       setValues(data);
     }
   }, [data]);
+  // useEffect(() => {
+  //   if (clearSuccess) {
+  //     toast.success("Cleared!");
+  //   }
+  // }, [clearSuccess]);
 
   useEffect(() => {
     if (data && values) {
@@ -132,6 +145,7 @@ export default function Overview({ id = 0 }) {
             }}
           />
         </div>}
+        {/* <StyledButton className="danger" onClick={handleClear}>Clear Message</StyledButton> */}
       </div>
       {changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
     </div>

src/types/sse.ts

@@ -191,6 +191,10 @@ interface HeartbeatEvent {
   type: "heartbeat";
   time: number;
 }
+interface GroupClearEvent {
+  type: "group_message_cleared";
+  gid: number;
+}
 
 export type ServerEvent =
   | ReadyEvent
@@ -209,4 +213,6 @@ export type ServerEvent =
   | KickFromGroupEvent
   | GroupChangedEvent
   | PinnedMessageUpdatedEvent
-  | HeartbeatEvent;
+  | HeartbeatEvent
+  | GroupClearEvent
+  ;