feat: refactor the cache

src/app/slices/auth.data.js

@@ -1,12 +1,10 @@
 import { createSlice } from "@reduxjs/toolkit";
-import BASE_URL from "../config";
+import BASE_URL, { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
 import { getNonNullValues } from "../../common/utils";
 const initialState = {
   user: null,
-  usersVersion: null,
-  afterMid: null,
-  token: null,
-  refreshToken: null,
+  token: localStorage.getItem(KEY_TOKEN),
+  refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
 };
 const authDataSlice = createSlice({
   name: "authData",
@@ -17,6 +15,14 @@ const authDataSlice = createSlice({
       state.user = user;
       state.token = token;
       state.refreshToken = refresh_token;
+      // set local data
+      localStorage.setItem(KEY_TOKEN, token);
+      localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
+      localStorage.setItem(KEY_UID, user.uid);
+    },
+    setUserData(state, action) {
+      const user = action.payload;
+      state.user = user;
     },
     updateLoginedUserByLogs(state, action) {
       const logs = action.payload;
@@ -44,29 +50,26 @@ const authDataSlice = createSlice({
       state.user = null;
       state.token = null;
       state.refreshToken = null;
+      // remove local data
+      localStorage.removeItem(KEY_TOKEN);
+      localStorage.removeItem(KEY_REFRESH_TOKEN);
+      localStorage.removeItem(KEY_UID);
     },
     updateToken(state, action) {
       const { token, refresh_token } = action.payload;
       console.log("refresh token");
       state.token = token;
       state.refreshToken = refresh_token;
-    },
-    setUsersVersion(state, action) {
-      const { version } = action.payload;
-      state.usersVersion = version;
-    },
-    setAfterMid(state, action) {
-      const { mid } = action.payload;
-      state.afterMid = mid;
+      localStorage.setItem(KEY_TOKEN, token);
+      localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
     },
   },
 });
 export const {
   updateToken,
   setAuthData,
+  setUserData,
   clearAuthData,
-  setUsersVersion,
-  setAfterMid,
   updateLoginedUserByLogs,
 } = authDataSlice.actions;
 export default authDataSlice.reducer;

src/app/slices/channels.js

@@ -4,15 +4,20 @@ const channelsSlice = createSlice({
   name: `channels`,
   initialState,
   reducers: {
+    clearChannels() {
+      return initialState;
+    },
     setChannels(state, action) {
       console.log("set channels store", state);
       const chs = action.payload || [];
-      return Object.fromEntries(
-        chs.map((c) => {
-          const { gid, ...rest } = c;
-          return [gid, rest];
-        })
-      );
+      return Array.isArray(chs)
+        ? Object.fromEntries(
+            chs.map((c) => {
+              const { gid, ...rest } = c;
+              return [gid, rest];
+            })
+          )
+        : chs;
     },
 
     updateChannel(state, action) {
@@ -41,6 +46,7 @@ const channelsSlice = createSlice({
   },
 });
 export const {
+  clearChannels,
   setChannels,
   addChannel,
   deleteChannel,

src/app/slices/contacts.js

@@ -5,6 +5,9 @@ const contactsSlice = createSlice({
   name: `contacts`,
   initialState,
   reducers: {
+    clearContacts() {
+      return initialState;
+    },
     setContacts(state, action) {
       console.log("set Contacts store", state);
       const contacts = action.payload || [];
@@ -21,8 +24,8 @@ const contactsSlice = createSlice({
           case "update":
             {
               const vals = getNonNullValues(rest);
-              console.log("update vals", vals);
               const curr = state.find(({ uid: id }) => id == uid);
+              console.log("update vals", vals, curr);
               if (curr) {
                 Object.keys(vals).forEach((k) => {
                   curr[k] = vals[k];
@@ -32,7 +35,14 @@ const contactsSlice = createSlice({
             break;
           case "create":
             {
-              state.push({ uid, ...rest });
+              const idx = state.findIndex((o) => {
+                return o.uid == uid;
+              });
+              if (idx > -1) {
+                state.splice(idx, 1, { uid, ...rest });
+              } else {
+                state.push({ uid, ...rest });
+              }
             }
             break;
           case "delete":
@@ -56,7 +66,7 @@ const contactsSlice = createSlice({
       onlines.forEach((item) => {
         const { uid, online = false } = item;
         const curr = state.find(({ uid: id }) => id == uid);
-        console.log("update user status", curr, online);
+        // console.log("update user status", curr, online);
         if (curr) {
           curr.online = online;
         }
@@ -65,6 +75,7 @@ const contactsSlice = createSlice({
   },
 });
 export const {
+  clearContacts,
   setContacts,
   removeContact,
   updateUsersByLogs,

src/app/slices/message.channel.js

@@ -1,15 +1,18 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { isObjectEqual } from "../../common/utils";
 
-const initialState = {
-  // accessLogs: {},
-  pendingMsgs: [],
-};
+const initialState = {};
 
 const channelMsgSlice = createSlice({
   name: "channelMessage",
   initialState,
   reducers: {
+    clearChannelMsg() {
+      return initialState;
+    },
+    initChannelMsg(state, action) {
+      return action.payload;
+    },
     addChannelMsg(state, action) {
       const {
         id,
@@ -48,22 +51,13 @@ const channelMsgSlice = createSlice({
         obj.unread = false;
       });
     },
-    addPendingMsg(state, action) {
-      state.pendingMsgs.push(action.payload);
-    },
-    removePendingMsg(state, action) {
-      const timestamp = action.payload;
-      state.pendingMsgs = state.pendingMsgs.filter(
-        (m) => m.timestamp != timestamp
-      );
-    },
   },
 });
 export const {
+  clearChannelMsg,
+  initChannelMsg,
   clearChannelMsgUnread,
   setChannelMsgRead,
   addChannelMsg,
-  addPendingMsg,
-  removePendingMsg,
 } = channelMsgSlice.actions;
 export default channelMsgSlice.reducer;

src/app/slices/message.pending.js

@@ -8,6 +8,9 @@ const pendingMessageSlice = createSlice({
   name: "pendingMessage",
   initialState,
   reducers: {
+    clearPendingMsg() {
+      return initialState;
+    },
     addPendingMessage(state, action) {
       const { type = "user", msg } = action.payload;
       const { id, mid } = msg;
@@ -23,6 +26,7 @@ const pendingMessageSlice = createSlice({
   },
 });
 export const {
+  clearPendingMsg,
   addPendingMessage,
   removePendingMessage,
 } = pendingMessageSlice.actions;

src/app/slices/message.user.js

@@ -6,6 +6,12 @@ const userMsgSlice = createSlice({
   name: "userMessage",
   initialState,
   reducers: {
+    clearUserMsg() {
+      return initialState;
+    },
+    initUserMsg(state, action) {
+      return action.payload;
+    },
     addUserMsg(state, action) {
       const {
         id,
@@ -44,5 +50,11 @@ const userMsgSlice = createSlice({
     },
   },
 });
-export const { addUserMsg, setUserMsgRead, removeMsg } = userMsgSlice.actions;
+export const {
+  clearUserMsg,
+  initUserMsg,
+  addUserMsg,
+  setUserMsgRead,
+  removeMsg,
+} = userMsgSlice.actions;
 export default userMsgSlice.reducer;

src/app/slices/visit.mark.js

@@ -0,0 +1,34 @@
+import { createSlice } from "@reduxjs/toolkit";
+// import  { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
+const initialState = {
+  usersVersion: null,
+  afterMid: null,
+};
+const visitMarkSlice = createSlice({
+  name: "visitMark",
+  initialState,
+  reducers: {
+    clearMark() {
+      return initialState;
+    },
+    setMark(state, action) {
+      const mark = action.payload;
+      return mark;
+    },
+    setUsersVersion(state, action) {
+      const { version } = action.payload;
+      state.usersVersion = version;
+    },
+    setAfterMid(state, action) {
+      const { mid } = action.payload;
+      state.afterMid = mid;
+    },
+  },
+});
+export const {
+  setMark,
+  setUsersVersion,
+  setAfterMid,
+  clearMark,
+} = visitMarkSlice.actions;
+export default visitMarkSlice.reducer;