refactor: remember channel aside

src/app/listener.middleware/handler.channels.ts

@@ -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;
   }

src/app/listener.middleware/handler.footprint.ts

@@ -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;
   }

src/app/slices/channels.ts

@@ -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;

src/app/slices/footprint.ts

@@ -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;