refactor: upsertVoiceList

src/app/services/server.ts

@@ -22,7 +22,7 @@ import {
 } from "../../types/server";
 import { Channel } from "../../types/channel";
 import { ContentTypeKey } from "../../types/message";
-import { updateVoiceList } from "../slices/voice";
+import { upsertVoiceList } from "../slices/voice";
 
 const defaultExpireDuration = 2 * 24 * 60 * 60;
 
@@ -139,7 +139,7 @@ export const serverApi = createApi({
                 memberCount: count
               };
             });
-            dispatch(updateVoiceList(arr));
+            dispatch(upsertVoiceList(arr));
           }
         } catch {
           console.error("get voice list error");

src/app/slices/voice.ts

@@ -93,8 +93,18 @@ const voiceSlice = createSlice({
         state.voicing.downlinkNetworkQuality = payload;
       }
     },
-    updateVoiceList(state, { payload }: PayloadAction<VoiceInfo[]>) {
+    upsertVoiceList(state, { payload }: PayloadAction<VoiceInfo[] | VoiceInfo>) {
+      if (Array.isArray(payload)) {
         state.list = payload;
+      } else {
+        const { id, context } = payload;
+        const idx = state.list.findIndex(v => v.id == id && v.context == context);
+        if (idx > -1) {
+          state.list.splice(idx, 1, payload);
+        } else {
+          state.list.push(payload);
+        }
+      }
     },
     addVoiceMember(state, { payload }: PayloadAction<number>) {
       const notExisted = !state.voicingMembers.ids.includes(payload);
@@ -124,5 +134,5 @@ const voiceSlice = createSlice({
   },
 });
 
-export const { addVoiceMember, removeVoiceMember, updateVoiceList, updateVoicingInfo, updateVoicingNetworkQuality, updateMuteStatus, updateVoicingMember, updateDeafenStatus } = voiceSlice.actions;
+export const { addVoiceMember, removeVoiceMember, upsertVoiceList, updateVoicingInfo, updateVoicingNetworkQuality, updateMuteStatus, updateVoicingMember, updateDeafenStatus } = voiceSlice.actions;
 export default voiceSlice.reducer;

src/common/component/Voice.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useGetAgoraConfigQuery, useGetAgoraVoicingListQuery, useLazyGetAgoraTokenQuery } from '../../app/services/server';
 import { updateChannelVisibleAside } from '../../app/slices/channels';
-import { addVoiceMember, removeVoiceMember, updateDeafenStatus, updateMuteStatus, updateVoicingInfo, updateVoicingMember, updateVoicingNetworkQuality } from '../../app/slices/voice';
+import { addVoiceMember, removeVoiceMember, updateDeafenStatus, updateMuteStatus, updateVoicingInfo, updateVoicingMember, updateVoicingNetworkQuality, upsertVoiceList } from '../../app/slices/voice';
 import { useAppSelector } from '../../app/store';
 
 // type Props = {}
@@ -187,6 +187,11 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
                 dispatch(updateChannelVisibleAside({
                     id, aside: null
                 }));
+                dispatch(upsertVoiceList({
+                    id,
+                    context,
+                    memberCount: 0
+                }));
             }
         }
     };

src/routes/chat/VoiceChat/index.tsx

@@ -56,7 +56,7 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
             <li className={`relative group`} >
                 <IconHeadphone className={visible ? "fill-gray-600" : "fill-gray-500"} role="button" onClick={joinedAtThisContext ? toggleDashboard : handleJoin} />
                 {visible ? null : memberCount > 0 ? <span className={`${badgeClass} flex-center font-bold text-[10px]`}>{memberCount}</span> : <span className={`${badgeClass} hidden text-xs group-hover:flex-center`}>
-                    <em className='font-normal'>+</em>
+                    <em className='not-italic'>+</em>
                 </span>}
             </li>
         </Tooltip>