refactor: remember channel aside

2023-04-18 21:55:56 +08:00
parent 0e77e90664
commit 03d4803034
7 changed files with 50 additions and 39 deletions
@@ -17,7 +17,7 @@ export default async function handler({ operation, data, payload }: Params) {
      {
        const chs = payload as Channel[];
        const arr = chs.map(({ gid, ...rest }) => {
-          return { key: gid + "", value: rest };
+          return { key: gid + "", value: { gid, ...rest } };
        });
        await table.setItems(arr);
      }
@@ -40,6 +40,7 @@ export default async function handler({ operation, data, payload }: Params) {
        await table?.setItem(id + "", data.byId[id]);
      }
      break;
+
    default:
      break;
  }
@@ -69,6 +69,11 @@ export default async function handler({ operation, data = {}, payload }: Params)
        await table?.setItem("autoDeleteMsgChannels", data.autoDeleteMsgChannels || []);
      }
      break;
+    case "updateChannelVisibleAside":
+      {
+        await table?.setItem("channelAsides", data.channelAsides);
+      }
+      break;
    default:
      break;
  }
@@ -2,13 +2,10 @@ 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 {
  icon?: string;
-  visibleAside: ChannelAside
 }

 interface State {
@@ -28,9 +25,10 @@ const channelsSlice = createSlice({
    resetChannels() {
      return initialState;
    },
-    fillChannels(state, action: PayloadAction<Channel[]>) {
+    fillChannels(state, action: PayloadAction<StoredChannel[]>) {
      const channels = action.payload || [];
      state.ids = channels.map(({ gid }) => gid);
+
      channels.forEach((c) => {
        state.byId[c.gid] = {
          ...c,
@@ -38,7 +36,6 @@ const channelsSlice = createSlice({
            c.avatar_updated_at == 0
              ? ""
              : `${BASE_URL}/resource/group_avatar?gid=${c.gid}&t=${c.avatar_updated_at}`,
-          visibleAside: state.byId[c.gid]?.visibleAside ?? null
        };
      });
    },
@@ -54,7 +51,6 @@ const channelsSlice = createSlice({
          avatar_updated_at == 0
            ? ""
            : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`,
-        visibleAside: "members"
      };
    },
    updateChannel(state, action: PayloadAction<UpdateChannelDTO>) {
@@ -105,12 +101,6 @@ const channelsSlice = createSlice({
        }
      }
    },
-    updateChannelVisibleAside(state, action: PayloadAction<{ id: number, aside: ChannelAside }>) {
-      const { id, aside } = action.payload;
-      if (state.byId[id]) {
-        state.byId[id].visibleAside = aside;
-      }
-    },
    removeChannel(state, action: PayloadAction<number>) {
      const gid = action.payload;
      const idx = state.ids.findIndex((i) => i == gid);
@@ -120,16 +110,7 @@ const channelsSlice = createSlice({
      }
    }
  },
-  extraReducers: (builder) => {
-    builder.addCase(resetAuthData, (state) => {
-      // 如果有aside是voice的，就把它关掉
-      Object.values(state.byId).forEach((ch) => {
-        if (ch.visibleAside === "voice") {
-          ch.visibleAside = null;
-        }
-      });
-    });
-  }
+
 });

 export const {
@@ -139,7 +120,6 @@ export const {
  addChannel,
  updateChannel,
  removeChannel,
-  updateChannelVisibleAside
 } = channelsSlice.actions;

 export default channelsSlice.reducer;
@@ -2,7 +2,9 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { MuteDTO } from "../../types/message";
 import { OG } from "../../types/resource";
 import { AutoDeleteMessageSettingDTO, AutoDeleteMsgForGroup, AutoDeleteMsgForUser, AutoDeleteSettingForChannels, AutoDeleteSettingForUsers } from "../../types/sse";
+import { resetAuthData } from "./auth.data";

+type ChannelAside = "members" | "voice" | null;
 export interface State {
  og: { [url: string]: OG }
  usersVersion: number;
@@ -15,8 +17,10 @@ export interface State {
  muteChannels: { [cid: number]: { expired_in?: number } | undefined };
  autoDeleteMsgUsers: AutoDeleteMsgForUser[];
  autoDeleteMsgChannels: AutoDeleteMsgForGroup[];
+  channelAsides: { [cid: number]: ChannelAside };
 }

+
 const initialState: State = {
  og: {},
  usersVersion: 0,
@@ -29,6 +33,7 @@ const initialState: State = {
  muteChannels: {},
  autoDeleteMsgUsers: [],
  autoDeleteMsgChannels: [],
+  channelAsides: {}
 };

 const footprintSlice = createSlice({
@@ -50,7 +55,8 @@ const footprintSlice = createSlice({
        muteUsers = {},
        muteChannels = {},
        autoDeleteMsgUsers = [],
-        autoDeleteMsgChannels = []
+        autoDeleteMsgChannels = [],
+        channelAsides = {}
      } = action.payload;
      return {
        og,
@@ -63,7 +69,8 @@ const footprintSlice = createSlice({
        muteUsers,
        muteChannels,
        autoDeleteMsgUsers,
-        autoDeleteMsgChannels
+        autoDeleteMsgChannels,
+        channelAsides
      };
    },
    updateUsersVersion(state, action: PayloadAction<number>) {
@@ -177,7 +184,21 @@ const footprintSlice = createSlice({
      reads.forEach(({ gid, mid }) => {
        state.readChannels[gid] = mid;
      });
-    }
+    },
+    updateChannelVisibleAside(state, action: PayloadAction<{ id: number, aside: ChannelAside }>) {
+      const { id, aside } = action.payload;
+      state.channelAsides[id] = aside;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(resetAuthData, (state) => {
+      // 如果有aside是voice的，就把它关掉
+      Object.keys(state.channelAsides).forEach((channel_id: string) => {
+        if (state.channelAsides[+channel_id] === "voice") {
+          state.channelAsides[+channel_id] = null;
+        }
+      });
+    });
  }
 });

@@ -191,7 +212,8 @@ export const {
  updateMute,
  updateAutoDeleteSetting,
  updateHistoryMark,
-  upsertOG
+  upsertOG,
+  updateChannelVisibleAside
 } = footprintSlice.actions;

 export default footprintSlice.reducer;
@@ -2,7 +2,7 @@ import AgoraRTC, { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
 import { memo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useGetAgoraConfigQuery, useGetAgoraVoicingListQuery, useLazyGetAgoraTokenQuery } from '../../app/services/server';
-import { updateChannelVisibleAside } from '../../app/slices/channels';
+import { updateChannelVisibleAside } from '../../app/slices/footprint';
 import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenStatus, updateMuteStatus, updateVoicingInfo, updateVoicingMember, updateVoicingNetworkQuality, upsertVoiceList } from '../../app/slices/voice';
 import { useAppSelector } from '../../app/store';
 import AudioJoin from '../../assets/join.wav';
@@ -17,7 +17,7 @@ import { useAppSelector } from "../../../app/store";
 import GoBackNav from "../../../common/component/GoBackNav";
 import Members from "./Members";
 import VoiceChat from "../VoiceChat";
-import { updateChannelVisibleAside } from "../../../app/slices/channels";
+import { updateChannelVisibleAside } from "../../../app/slices/footprint";
 import Dashboard from "../VoiceChat/Dashboard";
 type Props = {
  cid?: number;
@@ -33,11 +33,13 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
    userIds,
    data,
    loginUser,
+    visibleAside
  } = useAppSelector((store) => {
    return {
      loginUser: store.authData.user,
      userIds: store.users.ids,
      data: store.channels.byId[cid],
+      visibleAside: store.footprint.channelAsides[cid]
    };
  });
  useEffect(() => {
@@ -56,7 +58,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
  const toggleMembersVisible = () => {
    dispatch(updateChannelVisibleAside({
      id: cid,
-      aside: data.visibleAside !== "members" ? "members" : null
+      aside: visibleAside !== "members" ? "members" : null
    }));
  };

@@ -109,7 +111,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
          onClick={toggleMembersVisible}
        >
          <Tooltip tip={t("channel_members")} placement="left">
-            <IconPeople className={data.visibleAside == "members" ? "fill-gray-600" : ""} />
+            <IconPeople className={visibleAside == "members" ? "fill-gray-600" : ""} />
          </Tooltip>
        </li>
      </ul>
@@ -125,10 +127,10 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
      </header>
    }
    users={
-      <Members uids={memberIds} addVisible={addVisible} cid={cid} ownerId={owner} membersVisible={data.visibleAside == "members"} />
+      <Members uids={memberIds} addVisible={addVisible} cid={cid} ownerId={owner} membersVisible={visibleAside == "members"} />
    }
    voice={
-      <Dashboard visible={data.visibleAside == "voice"} id={cid} context="channel" />
+      <Dashboard visible={visibleAside == "voice"} id={cid} context="channel" />
    }
  />;
 }
@@ -3,7 +3,7 @@
 // import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { updateChannelVisibleAside } from '../../../app/slices/channels';
+import { updateChannelVisibleAside } from '../../../app/slices/footprint';
 import { useAppSelector } from '../../../app/store';
 import IconHeadphone from '../../../assets/icons/headphone.svg';
 import Tooltip from '../../../common/component/Tooltip';
@@ -18,11 +18,12 @@ type Props = {
 const VoiceChat = ({ id, context = "channel" }: Props) => {
    const { joinVoice, joined, joining = false, joinedAtThisContext } = useVoice({ id, context });
    const dispatch = useDispatch();
-    const { loginUser, contextData, voiceList } = useAppSelector(store => {
+    const { loginUser, voiceList, visibleAside } = useAppSelector(store => {
        return {
            loginUser: store.authData.user,
            contextData: context == "channel" ? store.channels.byId[id] : store.users.byId[id],
-            voiceList: store.voice.list
+            voiceList: store.voice.list,
+            visibleAside: context == "channel" ? store.footprint.channelAsides[id] : null,
        };
    });
    const { data: agoraConfig } = useGetAgoraConfigQuery(undefined, { skip: !loginUser?.is_admin });
@@ -31,7 +32,7 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
        if (context == "channel") {
            dispatch(updateChannelVisibleAside({
                id,
-                aside: contextData.visibleAside == "voice" ? null : "voice"
+                aside: visibleAside == "voice" ? null : "voice"
            }));
        }
        // todo DM
@@ -51,7 +52,7 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
    };
    // 只有admin才能看到入口，后续会改
    if (!loginUser || !loginUser.is_admin || !agoraConfig?.enabled) return null;
-    const visible = contextData.visibleAside == "voice";
+    const visible = visibleAside == "voice";
    const memberCount = voiceList.find((v) => v.context == context && v.id == id)?.memberCount ?? 0;
    const badgeClass = `absolute -top-2 -right-2 w-4 h-4 rounded-full bg-primary-400 text-white `;
    return (