fix: channel aside visible while logout

src/app/slices/channels.ts

@@ -2,6 +2,8 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { isNull, omitBy } from "lodash";
 import BASE_URL from "../config";
 import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "../../types/channel";
+import { resetAuthData } from "./auth.data";
+// import { updateVoicingInfo } from "./voice";
 
 type ChannelAside = "members" | "voice" | null;
 interface StoredChannel extends Channel {
@@ -117,6 +119,16 @@ const channelsSlice = createSlice({
         delete state.byId[gid];
       }
     }
+  },
+  extraReducers: (builder) => {
+    builder.addCase(resetAuthData, (state) => {
+      // 如果有aside是voice的，就把它关掉
+      Object.values(state.byId).forEach((ch) => {
+        if (ch.visibleAside === "voice") {
+          ch.visibleAside = null;
+        }
+      });
+    });
   }
 });
 

src/app/slices/voice.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { KEY_UID } from "../config";
 import { ConnectionState } from "agora-rtc-sdk-ng";
+import { resetAuthData } from "./auth.data";
 
 export type VoiceBasicInfo = {
   context: "channel" | "dm"
@@ -139,6 +140,19 @@ const voiceSlice = createSlice({
       }
     }
   },
+  extraReducers: (builder) => {
+    builder.addCase(resetAuthData, (state) => {
+      //  reset voicing info
+      if (window.VOICE_CLIENT) {
+        window.VOICE_CLIENT.leave();
+      }
+      state.voicing = null;
+      state.voicingMembers = {
+        ids: [],
+        byId: {}
+      };
+    });
+  }
 });
 
 export const { updateConnectionState, addVoiceMember, removeVoiceMember, upsertVoiceList, updateVoicingInfo, updateVoicingNetworkQuality, updateMuteStatus, updateVoicingMember, updateDeafenStatus } = voiceSlice.actions;

src/common/component/Voice.tsx

@@ -57,11 +57,11 @@ const Voice = () => {
                 });
                 //remote user leave
                 agoraEngine.on("user-left", (user, reason) => {
+                    console.log(user, "has left the channel");
                     switch (reason) {
                         case "Quit":
                         case "ServerTimeOut": {
                             dispatch(removeVoiceMember(+user.uid as number));
-                            console.log(user, "has left the channel");
                         }
                             break;
                         default:
@@ -206,6 +206,7 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
                 dispatch(updateChannelVisibleAside({
                     id, aside: null
                 }));
+                // 即时更新对应的活跃列表信息
                 dispatch(upsertVoiceList({
                     id,
                     context,

src/common/hook/useLogout.ts

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useDispatch } from "react-redux";
 import { resetFootprint } from "../../app/slices/footprint";
 import { resetChannels } from "../../app/slices/channels";
@@ -9,7 +8,6 @@ import { resetReactionMessage } from "../../app/slices/message.reaction";
 import { resetFileMessage } from "../../app/slices/message.file";
 import { resetMessage } from "../../app/slices/message";
 import { useLazyLogoutQuery } from "../../app/services/auth";
-import { updateVoicingInfo } from '../../app/slices/voice';
 export default function useLogout() {
   const dispatch = useDispatch();
   const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
@@ -24,15 +22,5 @@ export default function useLogout() {
     dispatch(resetFileMessage());
   };
 
-  useEffect(() => {
-    if (isSuccess) {
-      // 清理当前voicing上下文
-      if (window.VOICE_CLIENT) {
-        window.VOICE_CLIENT.leave();
-        dispatch(updateVoicingInfo(null));
-      }
-    }
-  }, [isSuccess]);
-
   return { clearLocalData, logout, exited: isSuccess, exiting: isLoading };
 }