refactor: lots updates

package.json

@@ -12,15 +12,15 @@
   "@svgr/webpack": "^6.2.1",
   "@tippyjs/react": "^4.2.6",
   "animate.css": "^4.1.1",
-  "axios": "^0.26.0",
+  "axios": "^0.26.1",
   "babel-loader": "^8.2.3",
   "babel-plugin-named-asset-import": "^0.3.8",
   "babel-preset-react-app": "^10.0.1",
   "bfj": "^7.0.2",
-  "browserslist": "^4.19.3",
+  "browserslist": "^4.20.0",
   "camelcase": "^6.3.0",
   "case-sensitive-paths-webpack-plugin": "^2.4.0",
-  "css-loader": "^6.6.0",
+  "css-loader": "^6.7.1",
   "css-minimizer-webpack-plugin": "^3.4.1",
   "dayjs": "^1.10.8",
   "dotenv": "^16.0.0",
@@ -29,12 +29,12 @@
   "eslint": "^8.10.0",
   "event-source-polyfill": "^1.0.25",
   "file-loader": "^6.2.0",
-  "firebase": "^9.6.7",
+  "firebase": "^9.6.8",
   "fs-extra": "^10.0.1",
   "html-webpack-plugin": "^5.5.0",
   "linkify-it": "^3.0.3",
   "localforage": "^1.10.0",
-  "mini-css-extract-plugin": "^2.5.3",
+  "mini-css-extract-plugin": "^2.6.0",
   "react": "^17.0.2",
   "react-dev-utils": "^12.0.0",
   "react-dnd": "^15.1.1",
@@ -52,7 +52,7 @@
   "react-window": "^1.8.6",
   "redux-persist": "^6.0.0",
   "resolve": "^1.22.0",
-  "rooks": "^5.10.0",
+  "rooks": "^5.10.2",
   "semver": "^7.3.5",
   "source-map-loader": "^3.0.1",
   "style-loader": "^3.3.1",
@@ -60,10 +60,10 @@
   "styled-reset": "^4.3.4",
   "terser-webpack-plugin": "^5.3.1",
   "tippy.js": "^6.3.7",
-  "webpack": "^5.69.1",
+  "webpack": "^5.70.0",
   "webpack-dev-server": "^4.7.4",
-  "webpack-manifest-plugin": "^4.1.1",
-  "workbox-webpack-plugin": "^6.5.0"
+  "webpack-manifest-plugin": "^5.0.0",
+  "workbox-webpack-plugin": "^6.5.1"
  },
  "scripts": {
   "start": "node scripts/start.js",
@@ -93,18 +93,18 @@
   "@commitlint/cli": "^16.2.1",
   "@commitlint/config-conventional": "^16.2.1",
   "autoprefixer": "^10.4.2",
-  "eslint-config-prettier": "^8.4.0",
+  "eslint-config-prettier": "^8.5.0",
   "eslint-plugin-import": "^2.25.4",
   "eslint-plugin-prettier": "^4.0.0",
-  "eslint-plugin-react": "^7.29.2",
+  "eslint-plugin-react": "^7.29.3",
   "eslint-plugin-react-hooks": "^4.3.0",
   "gh-pages": "^3.2.3",
   "husky": "^7.0.4",
-  "lint-staged": "^12.3.4",
-  "postcss": "^8.4.7",
+  "lint-staged": "^12.3.5",
+  "postcss": "^8.4.8",
   "postcss-flexbugs-fixes": "^5.0.2",
   "postcss-loader": "^6.2.1",
-  "postcss-preset-env": "^7.4.1",
+  "postcss-preset-env": "^7.4.2",
   "prettier": "^2.5.1"
  }
 }

src/app/cache.js

@@ -1,70 +1,122 @@
 import { useState } from "react";
 import localforage from "localforage";
-import { useDispatch } from "react-redux";
-import { initChannelMsg } from "./slices/message.channel";
-import { initUserMsg } from "./slices/message.user";
-import { setChannels } from "./slices/channels";
-import { setMark } from "./slices/visit.mark";
+import { useDispatch, batch } from "react-redux";
+import { fullfillReactionMessage } from "./slices/message.reaction";
+import { fullfillMessage } from "./slices/message";
+import { fullfillChannelMsg } from "./slices/message.channel";
+import { fullfillUserMsg } from "./slices/message.user";
+import { fullfillChannels } from "./slices/channels";
+import { fullfillContacts } from "./slices/contacts";
+import { fullfillFootprint } from "./slices/footprint";
 import { KEY_UID } from "./config";
+const tables = [
+  {
+    storeName: "channels",
+    description: "store channel list",
+  },
+  {
+    storeName: "contacts",
+    description: "store contact list",
+  },
+  {
+    storeName: "messageDM",
+    description: "store DM message with IDs",
+  },
+  {
+    storeName: "messageChannel",
+    description: "store channel message with IDs",
+  },
+  {
+    storeName: "message",
+    description: "store message with key-val full data",
+  },
+  {
+    storeName: "messageReaction",
+    description: "store message reaction with key-val full data",
+  },
+  {
+    storeName: "footprint",
+    description: "store user visit data",
+  },
+  // {
+  //   storeName: "message",
+  //   description: "store message with key-val full data",
+  // },
+];
 const initCache = () => {
   const uid = localStorage.getItem(KEY_UID) || "";
-  const name = `cache_db_${uid}`;
-  // const channels = localforage.createInstance({
-  //   name,
-  //   storeName: "channels",
-  //   description: "channel list",
-  // });
-  // const contacts = localforage.createInstance({
-  //   name,
-  //   storeName: "contacts",
-  //   description: "contact list",
-  // });
-  // const msgs_user = localforage.createInstance({
-  //   name,
-  //   storeName: "msgs_dm",
-  //   description: "DM message list",
-  // });
-  // const msgs_channel = localforage.createInstance({
-  //   name,
-  //   storeName: "msgs_channel",
-  //   description: "channel message list",
-  // });
-  window.CACHE = localforage.createInstance({
-    name,
-    storeName: "data",
-    description: "rustchat cache data by uid",
+  const name = `local_db_${uid}`;
+  window.CACHE = {};
+  tables.forEach(({ storeName, description }) => {
+    window.CACHE[storeName] = localforage.createInstance({
+      name,
+      storeName,
+      description,
+    });
   });
 };
 export const useRehydrate = () => {
   const [iterated, setIterated] = useState(false);
   const dispatch = useDispatch();
   const rehydrate = async () => {
-    const res = await window.CACHE.iterate((data, key) => {
-      switch (key) {
-        case "visitMark":
-          dispatch(setMark(data));
-          break;
-        case "channels":
-          dispatch(setChannels(data));
-          break;
-        // case "contacts":
-        //   dispatch(initChannelMsg(data));
-        //   break;
-        case "channelMessage":
-          dispatch(initChannelMsg(data));
-          break;
-        case "userMessage":
-          dispatch(initUserMsg(data));
-          break;
+    const rehydrateData = {
+      channels: [],
+      contacts: [],
+      channelMessage: {},
+      userMessage: {},
+      reactionMessage: {},
+      message: { replying: {} },
+      footprint: {},
+    };
+    const tables = Object.keys(window.CACHE);
+    const results = await Promise.all(
+      tables.map((_key) => {
+        return window.CACHE[_key].iterate((data, key) => {
+          // console.log("iterated", key);
+          switch (_key) {
+            case "channels":
+              rehydrateData.channels.push(data);
+              break;
+            case "contacts":
+              rehydrateData.contacts.push(data);
+              break;
+            case "footprint":
+              rehydrateData.footprint[key] = data;
+              break;
+            case "messageChannel":
+              rehydrateData.channelMessage[key] = data;
+              break;
+            case "messageDM":
+              rehydrateData.userMessage[key] = data;
+              break;
+            case "messageReaction":
+              rehydrateData.reactionMessage[key] = data;
+              break;
+            case "message":
+              rehydrateData.message[key] = data;
+              break;
 
-        default:
-          break;
-      }
+            default:
+              break;
+          }
+        });
+      })
+    );
+    batch(() => {
+      dispatch(fullfillContacts(rehydrateData.contacts));
+      console.log("fullfill channels from indexedDB");
+      dispatch(fullfillChannels(rehydrateData.channels));
+      dispatch(fullfillChannelMsg(rehydrateData.channelMessage));
+      dispatch(fullfillUserMsg(rehydrateData.userMessage));
+      dispatch(fullfillMessage(rehydrateData.message));
+      dispatch(fullfillFootprint(rehydrateData.footprint));
+      dispatch(fullfillReactionMessage(rehydrateData.reactionMessage));
     });
+
     setIterated(true);
-    console.log("iterate", res);
+    // console.log("iterate results", rehydrateData, results);
   };
-  return { rehydrate, cacheFirst: iterated };
+  return { rehydrate, rehydrated: iterated };
 };
 
 export default initCache;

src/app/config.js

@@ -3,6 +3,7 @@ const BASE_URL = `https://dev.rustchat.com/api`;
 // const BASE_URL = `https://rustchat.net/api`;
 export const ContentTypes = {
   text: "text/plain",
+  markdown: "text/markdown",
   image: "image/png",
   json: "application/json",
 };

src/app/listener.middleware.js

@@ -1,39 +0,0 @@
-import { createListenerMiddleware } from "@reduxjs/toolkit";
-const getCacheKey = (action = "") => {
-  const [type] = action.split("/");
-  const keys = [
-    "visitMark",
-    "channels",
-    "contacts",
-    "userMessage",
-    "channelMessage",
-    // "pendingMessage",
-  ];
-  const [tmp = ""] = keys.filter((k) => k == type);
-  return tmp;
-};
-
-// Create the middleware instance and methods
-const listenerMiddleware = createListenerMiddleware();
-
-// Add one or more listener entries that look for specific actions.
-// They may contain any sync or async logic, similar to thunks.
-listenerMiddleware.startListening({
-  predicate: (action, currentState, previousState) => {
-    const { type = "" } = action;
-
-    return !!getCacheKey(type);
-    // console.log("listener predicate", action, currentState, previousState);
-    // return true;
-  },
-  effect: async (action, listenerApi) => {
-    const { type = "" } = action;
-    const key = getCacheKey(type);
-    // console.log("listener effect", key, listenerApi.getState(), window.CACHE);
-    if (key && window.CACHE) {
-      await window.CACHE.setItem(key, listenerApi.getState()[key]);
-    }
-  },
-});
-
-export default listenerMiddleware;

src/app/listener.middleware/clear.handler.js

@@ -0,0 +1,9 @@
+const clearTable = async (table) => {
+  const t = window.CACHE[table];
+  if (!t) return;
+
+  await t.iterate((data, key) => {
+    t.removeItem(key);
+  });
+};
+export default clearTable;

src/app/listener.middleware/handler.channel.msg.js

@@ -0,0 +1,29 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data = {}, payload }) {
+  const table = window.CACHE["messageChannel"];
+  if (operation.startsWith("reset")) {
+    clearTable("messageChannel");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillChannelMsgs":
+    //   {
+    //     await Promise.all(
+    //       Object.entries(data).map(async ([cid, arr]) => {
+    //         await table.setItem(cid + "", arr);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "addChannelMsg":
+    case "removeChannelMsg":
+      {
+        const { id } = payload;
+
+        await table.setItem(id + "", data[id]);
+      }
+      break;
+    default:
+      break;
+  }
+}

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

@@ -0,0 +1,40 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data, payload }) {
+  const table = window.CACHE["channels"];
+  if (operation.startsWith("reset")) {
+    clearTable("channels");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillChannels":
+    //   {
+    //     await Promise.all(
+    //       data.ids.map(async (cid) => {
+    //         await table.setItem(cid + "", data.byId[cid]);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "addChannel":
+      {
+        const { gid } = payload;
+        await table.setItem(gid + "", payload);
+      }
+      break;
+    case "removeChannel":
+      {
+        const id = payload;
+        await table.removeItem(id + "");
+      }
+      break;
+    case "updateChannel":
+      {
+        const { id } = payload;
+        await table.setItem(id + "", data.byId[id]);
+      }
+      break;
+
+    default:
+      break;
+  }
+}

src/app/listener.middleware/handler.contacts.js

@@ -0,0 +1,55 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data, payload }) {
+  const table = window.CACHE["contacts"];
+  if (operation.startsWith("reset")) {
+    clearTable("contacts");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillContacts":
+    //   {
+    //     await Promise.all(
+    //       data.ids.map(async (uid) => {
+    //         await table.setItem(uid + "", data.byId[uid]);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "updateUsersByLogs":
+      {
+        const changeLogs = payload;
+        await Promise.all(
+          changeLogs.map(async ({ action, uid }) => {
+            switch (action) {
+              case "update":
+              case "create":
+                await table.setItem(uid + "", data.byId[uid]);
+                break;
+              case "delete":
+                await table.removeItem(uid + "");
+                break;
+
+              default:
+                break;
+            }
+          })
+        );
+      }
+      break;
+    case "addContact":
+      {
+        const { uid } = payload;
+        await table.setItem(uid + "", payload);
+      }
+      break;
+    case "removeContact":
+      {
+        const id = payload;
+        await table.removeItem(id + "");
+      }
+      break;
+
+    default:
+      break;
+  }
+}

src/app/listener.middleware/handler.dm.msg.js

@@ -0,0 +1,28 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data = {}, payload }) {
+  const table = window.CACHE["messageDM"];
+  if (operation.startsWith("reset")) {
+    clearTable("messageDM");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillUserMsgs":
+    //   {
+    //     await Promise.all(
+    //       Object.entries(data).map(async ([uid, arr]) => {
+    //         await table.setItem(uid + "", arr);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "addUserMsg":
+    case "removeUserMsg":
+      {
+        const { id } = payload;
+        await table.setItem(id + "", data.byId[id]);
+      }
+      break;
+    default:
+      break;
+  }
+}

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

@@ -0,0 +1,33 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data = {}, payload }) {
+  const table = window.CACHE["footprint"];
+  if (operation.startsWith("reset")) {
+    clearTable("footprint");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillFootprint":
+    //   {
+    //     await Promise.all(
+    //       Object.entries(data).map(async ([key, value]) => {
+    //         await table.setItem(key, value);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "updateUsersVersion":
+      {
+        const usersVersion = payload;
+        await table.setItem("usersVersion", usersVersion);
+      }
+      break;
+    case "updateAfterMid":
+      {
+        const afterMid = payload;
+        await table.setItem("afterMid", afterMid);
+      }
+      break;
+    default:
+      break;
+  }
+}

src/app/listener.middleware/handler.message.js

@@ -0,0 +1,44 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data = {}, payload }) {
+  const table = window.CACHE["message"];
+  if (operation.startsWith("reset")) {
+    clearTable("message");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillChannelMsgs":
+    //   {
+    //     await Promise.all(
+    //       Object.entries(data).map(async ([mid, obj]) => {
+    //         await table.setItem(mid + "", obj);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "addMessage":
+    case "updateMessage":
+      {
+        const { mid } = payload;
+        await table.setItem(mid + "", data[mid]);
+      }
+      break;
+    case "removeMessage":
+      {
+        const mid = payload;
+        await table.removeItem(mid + "");
+      }
+      break;
+    case "readMessage":
+      {
+        const mids = Array.isArray(payload) ? payload : [payload];
+        await Promise.all(
+          mids.map(async (mid) => {
+            await table.setItem(mid + "", data[mid]);
+          })
+        );
+      }
+      break;
+    default:
+      break;
+  }
+}

src/app/listener.middleware/handler.reaction.js

@@ -0,0 +1,27 @@
+import clearTable from "./clear.handler";
+export default async function handler({ operation, data = {}, payload }) {
+  const table = window.CACHE["messageReaction"];
+  if (operation.startsWith("reset")) {
+    clearTable("messageReaction");
+    return;
+  }
+  switch (operation) {
+    // case "fullfillReactionMessage":
+    //   {
+    //     await Promise.all(
+    //       Object.entries(data).map(async ([mid, data]) => {
+    //         await table.setItem(mid + "", data);
+    //       })
+    //     );
+    //   }
+    //   break;
+    case "toggleReactionMessage":
+      {
+        const { mid } = payload;
+        await table.setItem(mid + "", data[mid]);
+      }
+      break;
+    default:
+      break;
+  }
+}

src/app/listener.middleware/index.js

@@ -0,0 +1,114 @@
+import { createListenerMiddleware } from "@reduxjs/toolkit";
+import channelsHandler from "./handler.channels";
+import contactsHandler from "./handler.contacts";
+import channelMsgHandler from "./handler.channel.msg";
+import dmMsgHandler from "./handler.dm.msg";
+import messageHandler from "./handler.message";
+import reactionHandler from "./handler.reaction";
+import footprintHandler from "./handler.footprint";
+const operations = [
+  "channels",
+  "channelMessage",
+  "contacts",
+  "userMessage",
+  "reactionMessage",
+  "message",
+  "footprint",
+];
+
+// Create the middleware instance and methods
+const listenerMiddleware = createListenerMiddleware();
+
+// Add one or more listener entries that look for specific actions.
+// They may contain any sync or async logic, similar to thunks.
+listenerMiddleware.startListening({
+  predicate: (action, currentState, previousState) => {
+    const { type = "" } = action;
+    console.log("operation", type);
+    const [prefix] = type.split("/");
+    return operations.includes(prefix);
+    // console.log("listener predicate", action, currentState, previousState);
+    // return true;
+  },
+  effect: async (action, listenerApi) => {
+    if (!window.CACHE) return;
+    const { type = "", payload } = action;
+    // const key = getCacheKey(type);
+    // // console.log("listener effect", key, listenerApi.getState(), window.CACHE);
+    // if (key && window.CACHE) {
+    //   await window.CACHE.setItem(key, listenerApi.getState()[key]);
+    // }
+    const [prefix, operation] = type.split("/");
+    const state = listenerApi.getState()[prefix];
+    switch (prefix) {
+      case "channels":
+        {
+          await channelsHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+      case "contacts":
+        {
+          await contactsHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+      case "channelMessage":
+        {
+          await channelMsgHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+      case "userMessage":
+        {
+          await dmMsgHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+      case "message":
+        {
+          await messageHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+      case "reactionMessage":
+        {
+          await reactionHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+      case "footprint":
+        {
+          await footprintHandler({
+            operation,
+            payload,
+            data: state,
+          });
+        }
+        break;
+
+      default:
+        break;
+    }
+  },
+});
+
+export default listenerMiddleware;

src/app/services/auth.js

@@ -2,7 +2,7 @@ import { createApi } from "@reduxjs/toolkit/query/react";
 import baseQuery from "./base.query";
 import BASE_URL from "../config";
 export const authApi = createApi({
-  reducerPath: "auth",
+  reducerPath: "authApi",
   baseQuery,
   endpoints: (builder) => ({
     login: builder.mutation({

src/app/services/base.query.js

@@ -1,9 +1,15 @@
 import { fetchBaseQuery } from "@reduxjs/toolkit/query";
 import toast from "react-hot-toast";
 import dayjs from "dayjs";
-import { updateToken, clearAuthData } from "../slices/auth.data";
+import { updateToken, resetAuthData } from "../slices/auth.data";
 import BASE_URL, { tokenHeader } from "../config";
-const whiteList = ["login", "checkInviteTokenValid", "getServer", "getOpenid"];
+const whiteList = [
+  "login",
+  "checkInviteTokenValid",
+  "getServer",
+  "getOpenid",
+  "getMetamaskNonce",
+];
 const baseQuery = fetchBaseQuery({
   baseUrl: BASE_URL,
   prepareHeaders: (headers, { getState, endpoint }) => {
@@ -72,14 +78,14 @@ const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
         break;
       case 401:
         {
-          if (api.endpoint === "renew") {
-            // toast.error("token expired, please login again");
-            api.dispatch(clearAuthData());
-            location.href = "/#/login";
-            return;
-          } else {
-            toast.error("Not Authenticated");
-          }
+          // if (api.endpoint === "renew") {
+          // toast.error("token expired, please login again");
+          api.dispatch(resetAuthData());
+          location.href = "/#/login";
+          // } else {
+          toast.error("API Not Authenticated");
+          return;
+          // }
         }
         break;
       case 403:

src/app/services/channel.js

@@ -5,7 +5,7 @@ import { ContentTypes } from "../config";
 import { updateChannel } from "../slices/channels";
 import { onMessageSendStarted } from "./handlers";
 export const channelApi = createApi({
-  reducerPath: "channel",
+  reducerPath: "channelApi",
   baseQuery,
   refetchOnFocus: true,
   endpoints: (builder) => ({

src/app/services/contact.js

@@ -2,10 +2,9 @@ import { createApi } from "@reduxjs/toolkit/query/react";
 // import toast from "react-hot-toast";
 import baseQuery from "./base.query";
 import BASE_URL, { ContentTypes } from "../config";
-import { removeContact } from "../slices/contacts";
 import { onMessageSendStarted } from "./handlers";
 export const contactApi = createApi({
-  reducerPath: "contact",
+  reducerPath: "contactApi",
   baseQuery,
   endpoints: (builder) => ({
     getContacts: builder.query({
@@ -23,16 +22,6 @@ export const contactApi = createApi({
     }),
     deleteContact: builder.query({
       query: (uid) => ({ url: `/admin/user/${uid}`, method: "DELETE" }),
-      async onQueryStarted(uid, { dispatch, queryFulfilled }) {
-        // id: who send to ,from_uid: who sent
-        const patchResult = dispatch(removeContact(uid));
-        try {
-          await queryFulfilled;
-        } catch {
-          console.log("channel update failed");
-          patchResult.undo();
-        }
-      },
     }),
     updateAvatar: builder.mutation({
       query: (data) => ({

src/app/services/handlers.js

@@ -1,56 +1,49 @@
 import toast from "react-hot-toast";
+import { batch } from "react-redux";
 import { ContentTypes } from "../config";
-import {
-  // addChannelMsg,
-  addChannelPendingMsg,
-  removeChannelPendingMsg,
-  replaceChannelPendingMsg,
-} from "../slices/message.channel";
-import {
-  addUserPendingMsg,
-  removeUserPendingMsg,
-  replaceUserPendingMsg,
-} from "../slices/message.user";
-
-// import {
-//   addPendingMessage,
-//   removePendingMessage,
-// } from "../slices/message.pending";
+import { addChannelMsg, removeChannelMsg } from "../slices/message.channel";
+import { addUserMsg, removeUserMsg } from "../slices/message.user";
+import { addMessage, removeMessage } from "../slices/message";
 export const onMessageSendStarted = async (
-  { id, content, type, from_uid },
+  { id, content, type = "text", from_uid, reply_mid = null },
   { dispatch, queryFulfilled },
   from = "channel"
 ) => {
   // id: who send to ,from_uid: who sent
   const ts = new Date().getTime();
   const tmpMsg = {
-    id,
     content: type == "image" ? URL.createObjectURL(content) : content,
     content_type: ContentTypes[type],
     created_at: ts,
-    local_mid: ts,
     from_uid,
-    // unread: false,
+    reply_mid,
+    // 已读
+    read: true,
+    sending: true,
   };
-  const addPendingMessage =
-    from == "channel" ? addChannelPendingMsg : addUserPendingMsg;
-  const replacePendingMessage =
-    from == "channel" ? replaceChannelPendingMsg : replaceUserPendingMsg;
-  const removePendingMessage =
-    from == "channel" ? removeChannelPendingMsg : removeUserPendingMsg;
-  // dispatch(addPendingMessage({ type: from, msg: tmpMsg }));
-  dispatch(addPendingMessage({ ...tmpMsg }));
+  const addContextMessage = from == "channel" ? addChannelMsg : addUserMsg;
+  const removeContextMessage =
+    from == "channel" ? removeChannelMsg : removeUserMsg;
+  batch(() => {
+    dispatch(addMessage({ mid: ts, ...tmpMsg }));
+    dispatch(addContextMessage({ id, mid: ts }));
+  });
+
   try {
     const { data: server_mid } = await queryFulfilled;
     console.log("message server mid", server_mid);
-    // 此处的id，是指给谁发的
-    // const addMessage = from == "channel" ? addChannelMsg : addUserMsg;
-    dispatch(replacePendingMessage({ id, local_mid: ts, server_mid }));
+    batch(() => {
+      dispatch(removeContextMessage({ id, mid: ts }));
+      dispatch(removeMessage(ts));
+      dispatch(addMessage({ mid: server_mid, ...tmpMsg }));
+      dispatch(addContextMessage({ id, mid: server_mid }));
+    });
     // dispatch(removePendingMessage({ id, mid:ts, type: from }));
   } catch {
     console.log("message send failed");
     toast.error("Send Message Failed");
-    dispatch(removePendingMessage({ id, mid: ts, type: from }));
+    dispatch(removeContextMessage({ id, mid: ts }));
+    dispatch(removeMessage(ts));
     // patchResult.undo();
   }
 };

src/app/services/message.js

@@ -1,10 +1,12 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { ContentTypes } from "../config";
+import { onMessageSendStarted } from "./handlers";
 
+// import { updateMessage } from "../slices/message";
 import baseQuery from "./base.query";
 
 export const messageApi = createApi({
-  reducerPath: "message",
+  reducerPath: "messageApi",
   baseQuery,
   endpoints: (builder) => ({
     editMessage: builder.mutation({
@@ -16,8 +18,11 @@ export const messageApi = createApi({
         method: "PUT",
         body: content,
       }),
+      // async onQueryStarted({mid,content},{dispatch}){
+      //   dispatch()
+      // }
     }),
-    likeMessage: builder.mutation({
+    reactMessage: builder.mutation({
       query: ({ mid, action }) => ({
         url: `/message/${mid}/like`,
         method: "PUT",
@@ -31,21 +36,24 @@ export const messageApi = createApi({
       }),
     }),
     replyMessage: builder.mutation({
-      query: ({ mid, content, type = "text" }) => ({
+      query: ({ reply_mid, content, type = "text" }) => ({
         headers: {
           "content-type": ContentTypes[type],
         },
-        url: `/message/${mid}/reply`,
+        url: `/message/${reply_mid}/reply`,
         method: "POST",
         body: content,
       }),
+      async onQueryStarted(param1, param2) {
+        await onMessageSendStarted.call(this, param1, param2, param1.context);
+      },
     }),
   }),
 });
 
 export const {
   useEditMessageMutation,
-  useLikeMessageMutation,
+  useReactMessageMutation,
   useReplyMessageMutation,
   useLazyDeleteMessageQuery,
 } = messageApi;

src/app/services/server.js

@@ -4,7 +4,7 @@ import BASE_URL from "../config";
 import baseQuery from "./base.query";
 
 export const serverApi = createApi({
-  reducerPath: "server",
+  reducerPath: "serverApi",
   baseQuery,
   endpoints: (builder) => ({
     getServer: builder.query({

src/app/services/streaming/chat.handler.js

@@ -0,0 +1,130 @@
+import { batch } from "react-redux";
+import { addChannelMsg, removeChannelMsg } from "../../slices/message.channel";
+import { addMessage, removeMessage, updateMessage } from "../../slices/message";
+import { toggleReactionMessage } from "../../slices/message.reaction";
+import { addUserMsg, removeUserMsg } from "../../slices/message.user";
+import { updateAfterMid } from "../../slices/footprint";
+const handler = (data, dispatch, currState) => {
+  const {
+    mid,
+    from_uid,
+    created_at,
+    target,
+    detail: {
+      mid: detailMid,
+      content,
+      content_type,
+      type,
+      properties,
+      expires_in,
+      detail: innerDetail,
+    },
+  } = data;
+  const common = {
+    from_uid,
+    created_at,
+    content,
+    content_type,
+    properties,
+    expires_in,
+  };
+  switch (type) {
+    case "normal":
+    case "reply":
+      // 更新after_mid
+      dispatch(updateAfterMid(mid));
+      break;
+  }
+  const { ready, loginUid } = currState;
+  const to = typeof target.gid !== "undefined" ? "channel" : "user";
+  const appendMessage = to == "user" ? addUserMsg : addChannelMsg;
+  const self = from_uid == loginUid;
+  // 此处有点绕
+  const id = to == "user" ? (self ? target.uid : from_uid) : target.gid;
+
+  switch (type) {
+    case "normal":
+      {
+        batch(() => {
+          dispatch(
+            addMessage({
+              mid,
+              // 如果是自己发的消息，就是已读
+              read: self,
+              ...common,
+            })
+          );
+          // 未推送完  or  不是自己发的消息
+          console.log("curr state", ready, loginUid, common.from_uid);
+          if (!ready || loginUid != common.from_uid) {
+            dispatch(appendMessage({ id, mid }));
+          }
+        });
+      }
+      break;
+    case "reply":
+      {
+        batch(() => {
+          dispatch(
+            addMessage({
+              mid,
+              reply_mid: detailMid,
+              // 如果是自己发的消息，就是已读
+              read: self,
+              ...common,
+            })
+          );
+          // 未推送完  or  不是自己发的消息
+          if (!ready || loginUid != common.from_uid) {
+            dispatch(appendMessage({ id, mid }));
+          }
+        });
+      }
+      break;
+    case "reaction":
+      {
+        const removeContextMessage =
+          to == "user" ? removeUserMsg : removeChannelMsg;
+        const { type, action, content, content_type, properties } = innerDetail;
+        switch (type) {
+          case "like":
+            {
+              dispatch(
+                toggleReactionMessage({ from_uid, mid: detailMid, action })
+              );
+            }
+
+            break;
+          case "delete":
+            {
+              batch(() => {
+                dispatch(removeContextMessage({ id, mid: detailMid }));
+                dispatch(removeMessage(detailMid));
+              });
+            }
+            break;
+          case "edit":
+            {
+              dispatch(
+                updateMessage({
+                  mid: detailMid,
+                  content,
+                  content_type,
+                  properties,
+                  edited: true,
+                })
+              );
+            }
+            break;
+
+          default:
+            break;
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
+};
+export default handler;

src/app/services/streaming/index.js

@@ -0,0 +1,173 @@
+// for SSE
+
+import { createApi } from "@reduxjs/toolkit/query/react";
+import toast from "react-hot-toast";
+import BASE_URL from "../../config";
+import { setReady } from "../../slices/ui";
+import {
+  fullfillChannels,
+  addChannel,
+  removeChannel,
+} from "../../slices/channels";
+import { updateUsersVersion } from "../../slices/footprint";
+import { updateUsersByLogs, updateUsersStatus } from "../../slices/contacts";
+import { resetAuthData } from "../../slices/auth.data";
+import baseQuery from "../base.query";
+import chatMessageHandler from "./chat.handler";
+const getQueryString = (params = {}) => {
+  const sp = new URLSearchParams();
+  Object.entries(params).forEach(([key, val]) => {
+    if (val) {
+      sp.append(key, val);
+    }
+  });
+  return sp.toString();
+};
+export const streamingApi = createApi({
+  reducerPath: "streamingApi",
+  baseQuery,
+  refetchOnMountOrArgChange: true,
+  tagTypes: ["streaming"],
+  endpoints: (builder) => ({
+    initStreaming: builder.query({
+      query: () => ({ url: `user/me?ts=${new Date().getTime()}` }),
+      async onCacheEntryAdded(
+        arg,
+        { dispatch, getState, cacheDataLoaded, cacheEntryRemoved }
+      ) {
+        // todo
+        const {
+          authData: { token },
+          footprint: { usersVersion, afterMid },
+        } = getState();
+        // create a websocket connection when the cache subscription starts
+        const streaming = new EventSource(
+          `${BASE_URL}/user/events?${getQueryString({
+            "api-key": token,
+            users_version: usersVersion,
+            after_mid: afterMid,
+          })}`
+        );
+        console.log("cache loaded 1");
+        try {
+          // wait for the initial query to resolve before proceeding
+          await cacheDataLoaded;
+          console.log("cache loaded 2");
+
+          streaming.onmessage = (evt) => {
+            const {
+              ui: { ready },
+              authData: { uid: loginUid },
+            } = getState();
+            const data = JSON.parse(evt.data);
+            const { type } = data;
+            switch (type) {
+              case "heartbeat":
+                console.log("heartbeat");
+                break;
+              case "ready":
+                console.log("streaming ready");
+                dispatch(setReady());
+                break;
+              case "users_snapshot":
+                {
+                  console.log("users snapshot");
+                  const { version } = data;
+                  dispatch(updateUsersVersion(version));
+                }
+                break;
+              case "users_log":
+                {
+                  console.log("users change logs");
+                  const { logs } = data;
+                  dispatch(updateUsersByLogs(logs));
+                }
+                break;
+              case "users_state":
+              case "users_state_changed":
+                {
+                  let { type, ...rest } = data;
+                  const onlines =
+                    type == "users_state_changed" ? [rest] : rest.users;
+                  dispatch(updateUsersStatus(onlines));
+                }
+                break;
+              case "kick":
+                {
+                  console.log("kicked");
+                  switch (data.reason) {
+                    case "login_from_other_device":
+                      dispatch(resetAuthData());
+                      toast("kicked from the other device");
+                      break;
+                    case "delete_user":
+                      dispatch(resetAuthData());
+                      toast("sorry, your account has been deleted");
+                      break;
+                    default:
+                      break;
+                  }
+                }
+                break;
+              case "related_groups":
+                console.log("fullfill channels from streaming", data);
+                dispatch(fullfillChannels(data.groups));
+                break;
+              case "joined_group":
+                console.log("joined group", data.group);
+                dispatch(addChannel(data.group));
+                break;
+              case "kick_from_group":
+                console.log("kicked from group", data.gid);
+                dispatch(removeChannel(data.gid));
+                break;
+              case "chat":
+                {
+                  chatMessageHandler(data, dispatch, { ready, loginUid });
+                }
+                break;
+
+              default:
+                console.log("sse event data", data);
+                break;
+            }
+          };
+          streaming.onopen = () => {
+            console.info("sse opened");
+          };
+          streaming.onerror = (err) => {
+            switch (err.eventPhase) {
+              case EventSource.CLOSED:
+                console.log("sse error closed error");
+                break;
+              case EventSource.CONNECTING:
+                console.log("sse error connecting error");
+                // streamingApi.util.resetApiState({ type: "initStreaming" });
+                streamingApi.util.invalidateTags("streaming");
+                streamingApi.util.updateQueryData("initStreaming");
+                break;
+
+              default:
+                console.error("sse error error", err);
+                // renewToken({ token, refreshToken });
+                break;
+            }
+          };
+        } catch {
+          // no-op in case `cacheEntryRemoved` resolves before `cacheDataLoaded`,
+          // in which case `cacheDataLoaded` will throw
+        }
+        // cacheEntryRemoved will resolve when the cache subscription is no longer active
+        await cacheEntryRemoved;
+        // perform cleanup steps once the `cacheEntryRemoved` promise resolves
+        console.log("close streaming");
+        streaming.close();
+      },
+    }),
+  }),
+});
+
+export const {
+  useInitStreamingQuery,
+  useLazyInitStreamingQuery,
+} = streamingApi;

src/app/slices/auth.data.js

@@ -1,13 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
-import BASE_URL, {
-  KEY_REFRESH_TOKEN,
-  KEY_TOKEN,
-  KEY_UID,
-  KEY_EXPIRE,
-} from "../config";
-import { getNonNullValues } from "../../common/utils";
+import { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID, KEY_EXPIRE } from "../config";
 const initialState = {
-  user: null,
+  uid: null,
   token: localStorage.getItem(KEY_TOKEN),
   expireTime: localStorage.getItem(KEY_EXPIRE) || new Date().getTime(),
   refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
@@ -17,8 +11,13 @@ const authDataSlice = createSlice({
   initialState,
   reducers: {
     setAuthData(state, action) {
-      const { user, token, refresh_token, expired_in = 0 } = action.payload;
-      state.user = user;
+      const {
+        user: { uid },
+        token,
+        refresh_token,
+        expired_in = 0,
+      } = action.payload;
+      state.uid = uid;
       state.token = token;
       state.refreshToken = refresh_token;
       // 当前时间往后推expire时长
@@ -29,43 +28,20 @@ const authDataSlice = createSlice({
       localStorage.setItem(KEY_EXPIRE, expireTime);
       localStorage.setItem(KEY_TOKEN, token);
       localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
-      localStorage.setItem(KEY_UID, user.uid);
+      localStorage.setItem(KEY_UID, uid);
     },
-    setUserData(state, action) {
-      const user = action.payload;
-      state.user = user;
-    },
-    updateLoginedUserByLogs(state, action) {
-      const logs = action.payload;
-      logs.forEach(({ action, uid, ...rest }) => {
-        switch (action) {
-          case "update":
-            {
-              const vals = getNonNullValues(rest);
-              console.log("update vals", vals);
-              if (Object.keys(vals).includes("avatar_updated_at")) {
-                vals.avatar = `${BASE_URL}/resource/avatar?uid=${uid}&t=${vals.avatar_updated_at}`;
-              }
-              state.user = { ...state.user, ...vals };
-            }
-
-            break;
-
-          default:
-            break;
-        }
-      });
-    },
-    clearAuthData(state) {
+    resetAuthData() {
       console.log("clear auth data");
-      state.user = null;
-      state.token = null;
-      state.refreshToken = null;
       // remove local data
       localStorage.removeItem(KEY_EXPIRE);
       localStorage.removeItem(KEY_TOKEN);
       localStorage.removeItem(KEY_REFRESH_TOKEN);
       localStorage.removeItem(KEY_UID);
+      return initialState;
+    },
+    setUid(state, action) {
+      const uid = action.payload;
+      state.uid = uid;
     },
     updateToken(state, action) {
       const { token, refresh_token, expired_in } = action.payload;
@@ -81,10 +57,9 @@ const authDataSlice = createSlice({
   },
 });
 export const {
-  updateToken,
   setAuthData,
-  setUserData,
-  clearAuthData,
-  updateLoginedUserByLogs,
+  resetAuthData,
+  setUid,
+  updateToken,
 } = authDataSlice.actions;
 export default authDataSlice.reducer;

src/app/slices/channels.js

@@ -1,55 +1,53 @@
 import { createSlice } from "@reduxjs/toolkit";
-const initialState = {};
+const initialState = {
+  ids: [],
+  byId: {},
+};
 const channelsSlice = createSlice({
   name: `channels`,
   initialState,
   reducers: {
-    clearChannels() {
+    resetChannels() {
       return initialState;
     },
-    setChannels(state, action) {
+    fullfillChannels(state, action) {
       console.log("set channels store", state);
       const chs = action.payload || [];
-      return Array.isArray(chs)
-        ? Object.fromEntries(
-            chs.map((c) => {
-              const { gid, ...rest } = c;
-              return [gid, rest];
-            })
-          )
-        : chs;
-    },
-
-    updateChannel(state, action) {
-      // console.log("set channels store", action);
-      const { id, name, description } = action.payload;
-      const oObj = state[id];
-      const newObj = { ...oObj, name, description };
-      state[id] = newObj;
+      state.ids = chs.map(({ gid }) => gid);
+      state.byId = Object.fromEntries(
+        chs.map((c) => {
+          const { gid } = c;
+          return [gid, c];
+        })
+      );
     },
     addChannel(state, action) {
       // console.log("set channels store", action);
       const ch = action.payload;
       const { gid, ...rest } = ch;
-      state[gid] = rest;
+      state.ids.push(gid);
+      state.byId[gid] = rest;
     },
-    deleteChannel(state, action) {
+    updateChannel(state, action) {
+      // console.log("set channels store", action);
+      const { id, ...rest } = action.payload;
+      state.byId[id] = { ...state.byId[id], ...rest };
+    },
+    removeChannel(state, action) {
       const gid = action.payload;
-      delete state[gid];
+      const idx = state.ids.findIndex((i) => i == gid);
+      if (idx > -1) {
+        state.ids.splice(idx, 1);
+        delete state.byId[gid];
+      }
     },
-    // clearAuthData(state) {
-    //   console.log("clear auth data");
-    //   state.user = null;
-    //   state.token = null;
-    //   state.refreshToken = null;
-    // },
   },
 });
 export const {
-  clearChannels,
-  setChannels,
+  resetChannels,
+  fullfillChannels,
   addChannel,
-  deleteChannel,
   updateChannel,
+  removeChannel,
 } = channelsSlice.actions;
 export default channelsSlice.reducer;

src/app/slices/contacts.js

@@ -1,21 +1,31 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { getNonNullValues } from "../../common/utils";
-const initialState = [];
+const initialState = {
+  ids: [],
+  byId: {},
+};
 const contactsSlice = createSlice({
   name: `contacts`,
   initialState,
   reducers: {
-    clearContacts() {
+    resetContacts() {
       return initialState;
     },
-    setContacts(state, action) {
-      console.log("set Contacts store", state);
+    fullfillContacts(state, action) {
+      console.log("set Contacts store", action);
       const contacts = action.payload || [];
-      return contacts;
+      state.ids = contacts.map(({ uid }) => uid);
+      state.byId = Object.fromEntries(
+        contacts.map((c) => {
+          const { uid } = c;
+          return [uid, c];
+        })
+      );
     },
     removeContact(state, action) {
       const uid = action.payload;
-      return state.filter((c) => c.uid != uid);
+      state.ids = state.ids.filter((i) => i != uid);
+      delete state.byId[uid];
     },
     updateUsersByLogs(state, action) {
       const changeLogs = action.payload;
@@ -24,34 +34,25 @@ const contactsSlice = createSlice({
           case "update":
             {
               const vals = getNonNullValues(rest);
-              const curr = state.find(({ uid: id }) => id == uid);
-              console.log("update vals", vals, curr);
-              if (curr) {
+              if (state.byId[uid]) {
                 Object.keys(vals).forEach((k) => {
-                  curr[k] = vals[k];
+                  state.byId[uid][k] = vals[k];
                 });
               }
             }
             break;
           case "create":
             {
-              const idx = state.findIndex((o) => {
-                return o.uid == uid;
-              });
-              if (idx > -1) {
-                state.splice(idx, 1, { uid, ...rest });
-              } else {
-                state.push({ uid, ...rest });
-              }
+              state.byId[uid] = { uid, ...rest };
+              state.ids.push(uid);
             }
             break;
           case "delete":
             {
-              const idx = state.findIndex((o) => {
-                return o.uid == uid;
-              });
+              const idx = state.ids.findIndex((i) => i == uid);
               if (idx > -1) {
-                state.splice(idx, 1);
+                state.ids.splice(idx, 1);
+                delete state.byId[uid];
               }
             }
             break;
@@ -63,21 +64,19 @@ const contactsSlice = createSlice({
     },
     updateUsersStatus(state, action) {
       const onlines = action.payload;
-      onlines.forEach((item) => {
-        const { uid, online = false } = item;
-        const curr = state.find(({ uid: id }) => id == uid);
+      onlines.forEach((data) => {
+        const { uid, online = false } = data;
         // console.log("update user status", curr, online);
-        if (curr) {
-          curr.online = online;
+        if (state.byId[uid]) {
+          state.byId[uid].online = online;
         }
       });
     },
   },
 });
 export const {
-  clearContacts,
-  setContacts,
-  removeContact,
+  resetContacts,
+  fullfillContacts,
   updateUsersByLogs,
   updateUsersStatus,
 } = contactsSlice.actions;

src/app/slices/footprint.js

@@ -0,0 +1,32 @@
+import { createSlice } from "@reduxjs/toolkit";
+const initialState = {
+  usersVersion: 0,
+  afterMid: 0,
+};
+const footprintSlice = createSlice({
+  name: "footprint",
+  initialState,
+  reducers: {
+    resetFootprint() {
+      return initialState;
+    },
+    fullfillFootprint(state, action) {
+      return action.payload;
+    },
+    updateUsersVersion(state, action) {
+      const usersVersion = action.payload;
+      state.usersVersion = usersVersion;
+    },
+    updateAfterMid(state, action) {
+      const afterMid = action.payload;
+      state.afterMid = afterMid;
+    },
+  },
+});
+export const {
+  resetFootprint,
+  fullfillFootprint,
+  updateAfterMid,
+  updateUsersVersion,
+} = footprintSlice.actions;
+export default footprintSlice.reducer;

src/app/slices/message.channel.js

@@ -1,67 +1,38 @@
 import { createSlice } from "@reduxjs/toolkit";
-import {
-  msgReaction,
-  msgAdd,
-  msgSetRead,
-  msgClearUnread,
-  msgUpdate,
-  msgDelete,
-  msgAddPending,
-  msgRemovePending,
-  msgReplacePending,
-} from "./message.handler";
 const initialState = {};
 
 const channelMsgSlice = createSlice({
   name: "channelMessage",
   initialState,
   reducers: {
-    clearChannelMsg() {
+    resetChannelMsg() {
       return initialState;
     },
-    initChannelMsg(state, action) {
+    fullfillChannelMsg(state, action) {
       return action.payload;
     },
     addChannelMsg(state, action) {
-      msgAdd(state, action.payload);
+      const { id, mid } = action.payload;
+      if (state[id]) {
+        if (state[id].findIndex((id) => id == mid) > -1) return;
+        state[id].push(mid);
+      } else {
+        state[id] = [mid];
+      }
     },
-    deleteChannelMsg(state, action) {
-      msgDelete(state, action.payload);
-    },
-    updateChannelMsg(state, action) {
-      msgUpdate(state, action.payload);
-    },
-    likeChannelMsg(state, action) {
-      msgReaction(state, action.payload);
-    },
-    setChannelMsgRead(state, action) {
-      msgSetRead(state, action.payload);
-    },
-    clearChannelMsgUnread(state, action) {
-      msgClearUnread(state, action.payload);
-    },
-    addChannelPendingMsg(state, action) {
-      msgAddPending(state, action.payload);
-    },
-    replaceChannelPendingMsg(state, action) {
-      msgReplacePending(state, action.payload);
-    },
-    removeChannelPendingMsg(state, action) {
-      msgRemovePending(state, action.payload);
+    removeChannelMsg(state, action) {
+      const { id, mid } = action.payload;
+      if (state[id]) {
+        const idx = state[id].findIndex((i) => i == mid);
+        state[id].splice(idx, 1);
+      }
     },
   },
 });
 export const {
-  updateChannelMsg,
-  deleteChannelMsg,
-  likeChannelMsg,
-  clearChannelMsg,
-  initChannelMsg,
-  clearChannelMsgUnread,
-  setChannelMsgRead,
+  resetChannelMsg,
+  fullfillChannelMsg,
   addChannelMsg,
-  addChannelPendingMsg,
-  replaceChannelPendingMsg,
-  removeChannelPendingMsg,
+  removeChannelMsg,
 } = channelMsgSlice.actions;
 export default channelMsgSlice.reducer;

src/app/slices/message.handler.js

@@ -1,130 +0,0 @@
-import { isObjectEqual } from "../../common/utils";
-
-export const msgReaction = (state, payload) => {
-  const { id, from_uid, mid, action: reaction } = payload;
-  console.log("msg reaction: likes", id, mid, from_uid, reaction);
-  if (state[id] && state[id][mid]) {
-    if (!state[id][mid].likes) {
-      console.log("msg reaction: initial ");
-      state[id][mid].likes = {};
-    }
-    const currLikes = state[id][mid].likes;
-    // state[id][mid].likes = currLikes ? [...currLikes, reaction] : [reaction];
-    if (currLikes[reaction]) {
-      if (currLikes[reaction].includes(from_uid)) {
-        const idx = currLikes[reaction].findIndex((id) => {
-          return id == from_uid;
-        });
-        console.log("remove reaction", currLikes[reaction], idx, from_uid);
-        currLikes[reaction].splice(idx, 1);
-      } else {
-        currLikes[reaction].push(from_uid);
-      }
-    } else {
-      currLikes[reaction] = [from_uid];
-    }
-    // state[id][mid].likes = currLikes;
-  }
-};
-
-export const msgAdd = (state, payload) => {
-  const {
-    id,
-    content,
-    created_at,
-    mid,
-    reply_mid = null,
-    from_uid,
-    content_type,
-    unread = true,
-  } = payload;
-  const newMsg = { content, content_type, created_at, from_uid, unread };
-
-  if (reply_mid && state[id][reply_mid]) {
-    newMsg.reply = { mid: reply_mid, ...state[id][reply_mid] };
-  }
-  if (state[id]) {
-    let replaceMsg = state[id][mid];
-    // 如果存在，并且新消息和缓存消息不一样，则替换掉，并且改为已读（可能有问题）
-    if (replaceMsg) {
-      const copyMsg = { ...replaceMsg };
-      if (!isObjectEqual(copyMsg, newMsg)) {
-        state[id][mid] = { ...newMsg, unread: false };
-      }
-    } else {
-      state[id][mid] = newMsg;
-    }
-  } else {
-    state[id] = { [mid]: newMsg };
-  }
-};
-export const msgAddPending = (state, payload) => {
-  const {
-    id,
-    content,
-    created_at,
-    local_mid,
-    reply_mid = null,
-    from_uid,
-    content_type,
-    unread = false,
-  } = payload;
-  const newMsg = { content, content_type, created_at, from_uid, unread };
-
-  if (reply_mid && state[id][reply_mid]) {
-    newMsg.reply = { mid: reply_mid, ...state[id][reply_mid] };
-  }
-  if (state[id]) {
-    state[id][local_mid] = newMsg;
-  } else {
-    state[id] = { [local_mid]: newMsg };
-  }
-};
-export const msgReplacePending = (state, payload) => {
-  const { id, local_mid, server_mid } = payload;
-  if (state[id] && state[id][local_mid]) {
-    // 先赋值，再去delete
-    state[id] = Object.fromEntries(
-      Object.entries(state[id]).map(([key, obj]) => {
-        return key == local_mid ? [server_mid, obj] : [key, obj];
-      })
-    );
-    // state[id][server_mid] = { ...state[id][local_mid] };
-    // delete state[id][local_mid];
-  }
-};
-export const msgRemovePending = (state, payload) => {
-  const { id, local_mid } = payload;
-  if (state[id] && state[id][local_mid]) {
-    delete state[id][local_mid];
-  }
-};
-export const msgSetRead = (state, payload) => {
-  const { id, mid } = payload;
-  console.log("set read", id, mid);
-  if (state[id] && state[id][mid]) {
-    state[id][mid].unread = false;
-  }
-};
-export const msgDelete = (state, payload) => {
-  const { id, mid } = payload;
-  console.log("delete message", id, mid);
-  if (state[id][mid]) {
-    // state[id][mid].removed = true;
-    delete state[id][mid];
-  }
-};
-export const msgClearUnread = (state, id) => {
-  console.log("set all unread", id);
-  Object.entries(state[id]).forEach(([, obj]) => {
-    obj.unread = false;
-  });
-};
-export const msgUpdate = (state, payload) => {
-  const { id, mid, content, time } = payload;
-  console.log("update channel message", id, mid);
-  if (state[id][mid]) {
-    state[id][mid].content = content;
-    state[id][mid].edited = time;
-  }
-};

src/app/slices/message.js

@@ -0,0 +1,64 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  replying: {},
+};
+const messageSlice = createSlice({
+  name: "message",
+  initialState,
+  reducers: {
+    resetMessage() {
+      return initialState;
+    },
+    fullfillMessage(state, action) {
+      return action.payload;
+    },
+    updateMessage(state, action) {
+      const { mid, ...rest } = action.payload;
+      state[mid] = { ...state[mid], ...rest };
+    },
+    readMessage(state, action) {
+      const mids = Array.isArray(action.payload)
+        ? action.payload
+        : [action.payload];
+      mids.forEach((id) => {
+        if (state[id]) {
+          state[id].read = true;
+        }
+      });
+    },
+    addMessage(state, action) {
+      const { mid, sending } = action.payload;
+      // 如果是正发送，并且已存在，则不覆盖
+      if (sending && state[mid]) return;
+      state[mid] = action.payload;
+    },
+    removeMessage(state, action) {
+      const mid = action.payload;
+      delete state[mid];
+    },
+    addReplyingMessage(state, action) {
+      const { id, mid } = action.payload;
+      console.log("to ", id, mid);
+      state.replying[id] = mid;
+    },
+    removeReplyingMessage(state, action) {
+      const id = action.payload;
+      if (state.replying[id]) {
+        delete state.replying[id];
+      }
+    },
+  },
+});
+export const {
+  resetMessage,
+  fullfillMessage,
+  setMessage,
+  updateMessage,
+  readMessage,
+  addMessage,
+  removeMessage,
+  addReplyingMessage,
+  removeReplyingMessage,
+} = messageSlice.actions;
+export default messageSlice.reducer;

src/app/slices/message.pending.js

@@ -1,47 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-
-const initialState = {
-  reply: {},
-  user: {},
-  channel: {},
-};
-const pendingMessageSlice = createSlice({
-  name: "pendingMessage",
-  initialState,
-  reducers: {
-    clearPendingMsg() {
-      return initialState;
-    },
-    addPendingMessage(state, action) {
-      const { type = "user", msg } = action.payload;
-      const { id, mid } = msg;
-      const curr = state[type][id] || {};
-      curr[mid] = { ...msg, pending: true };
-      state[type][id] = curr;
-    },
-    setReplyMessage(state, action) {
-      const { id, msg } = action.payload;
-      console.log("reply to ", id, msg);
-      state.reply[id] = msg;
-    },
-    removeReplyMessage(state, action) {
-      const id = action.payload;
-      if (state.reply[id]) {
-        delete state.reply[id];
-      }
-    },
-    removePendingMessage(state, action) {
-      const { id, mid, type = "user" } = action.payload;
-      console.log("remove msg", type, id, mid);
-      delete state[type][id][mid];
-    },
-  },
-});
-export const {
-  clearPendingMsg,
-  addPendingMessage,
-  removePendingMessage,
-  removeReplyMessage,
-  setReplyMessage,
-} = pendingMessageSlice.actions;
-export default pendingMessageSlice.reducer;

src/app/slices/message.reaction.js

@@ -0,0 +1,39 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {};
+const reactionMessageSlice = createSlice({
+  name: "reactionMessage",
+  initialState,
+  reducers: {
+    resetReactionMessage() {
+      return initialState;
+    },
+    fullfillReactionMessage(state, action) {
+      return action.payload;
+    },
+    toggleReactionMessage(state, action) {
+      const { from_uid, mid, action: reaction } = action.payload;
+      console.log("msg reaction", mid, from_uid, reaction);
+      if (!state[mid]) {
+        state[mid] = {};
+      }
+      if (state[mid][reaction]) {
+        const reactionUids = state[mid][reaction];
+        const idx = reactionUids.findIndex((id) => id == from_uid);
+        if (idx > -1) {
+          reactionUids.splice(idx, 1);
+        } else {
+          reactionUids.push(from_uid);
+        }
+      } else {
+        state[mid][reaction] = [from_uid];
+      }
+    },
+  },
+});
+export const {
+  resetReactionMessage,
+  fullfillReactionMessage,
+  toggleReactionMessage,
+} = reactionMessageSlice.actions;
+export default reactionMessageSlice.reducer;

src/app/slices/message.user.js

@@ -1,61 +1,42 @@
 import { createSlice } from "@reduxjs/toolkit";
-import {
-  msgReaction,
-  msgAdd,
-  msgSetRead,
-  msgUpdate,
-  msgDelete,
-  msgAddPending,
-  msgRemovePending,
-  msgReplacePending,
-} from "./message.handler";
-const initialState = {};
+const initialState = {
+  ids: [],
+  byId: {},
+};
 const userMsgSlice = createSlice({
   name: "userMessage",
   initialState,
   reducers: {
-    clearUserMsg() {
+    resetUserMsg() {
       return initialState;
     },
-    initUserMsg(state, action) {
-      return action.payload;
+    fullfillUserMsg(state, action) {
+      state.ids = Object.keys(action.payload);
+      state.byId = action.payload;
     },
     addUserMsg(state, action) {
-      msgAdd(state, action.payload);
+      const { id, mid } = action.payload;
+      if (state.byId[id]) {
+        if (state.byId[id].findIndex((id) => id == mid) > -1) return;
+        state.byId[id].push(mid);
+      } else {
+        state.byId[id] = [mid];
+        state.ids.push(id);
+      }
     },
-    likeUserMsg(state, action) {
-      msgReaction(state, action.payload);
-    },
-    updateUserMsg(state, action) {
-      msgUpdate(state, action.payload);
-    },
-    deleteUserMsg(state, action) {
-      msgDelete(state, action.payload);
-    },
-    setUserMsgRead(state, action) {
-      msgSetRead(state, action.payload);
-    },
-    addUserPendingMsg(state, action) {
-      msgAddPending(state, action.payload);
-    },
-    replaceUserPendingMsg(state, action) {
-      msgReplacePending(state, action.payload);
-    },
-    removeUserPendingMsg(state, action) {
-      msgRemovePending(state, action.payload);
+    removeUserMsg(state, action) {
+      const { id, mid } = action.payload;
+      if (state.byId[id]) {
+        const idx = state.byId[id].findIndex((i) => i == mid);
+        state.byId[id].splice(idx, 1);
+      }
     },
   },
 });
 export const {
-  updateUserMsg,
-  likeUserMsg,
-  deleteUserMsg,
-  clearUserMsg,
-  initUserMsg,
+  resetUserMsg,
+  fullfillUserMsg,
   addUserMsg,
-  setUserMsgRead,
-  addUserPendingMsg,
-  replaceUserPendingMsg,
-  removeUserPendingMsg,
+  removeUserMsg,
 } = userMsgSlice.actions;
 export default userMsgSlice.reducer;

src/app/slices/readme.md

@@ -0,0 +1,7 @@
+reset
+fullfill
+set
+add
+update
+remove
+toggle

src/app/slices/visit.mark.js

@@ -1,38 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { KEY_AFTER_MID, KEY_USERS_VERSION, 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;
-      let currUid = localStorage.getItem(KEY_UID);
-      localStorage.setItem(`${KEY_USERS_VERSION}_${currUid}`, version);
-    },
-    setAfterMid(state, action) {
-      const { mid } = action.payload;
-      state.afterMid = mid;
-      let currUid = localStorage.getItem(KEY_UID);
-      localStorage.setItem(`${KEY_AFTER_MID}_${currUid}`, mid);
-    },
-  },
-});
-export const {
-  setMark,
-  setUsersVersion,
-  setAfterMid,
-  clearMark,
-} = visitMarkSlice.actions;
-export default visitMarkSlice.reducer;

src/app/store.js

@@ -2,33 +2,37 @@ import { configureStore, combineReducers } from "@reduxjs/toolkit";
 import { setupListeners } from "@reduxjs/toolkit/query";
 import listenerMiddleware from "./listener.middleware";
 import authDataReducer from "./slices/auth.data";
-import visitMarkReducer from "./slices/visit.mark";
+import footprintReducer from "./slices/footprint";
 import uiReducer from "./slices/ui";
 import channelsReducer from "./slices/channels";
 import contactsReducer from "./slices/contacts";
-import pendingMsgReducer from "./slices/message.pending";
+import reactionMsgReducer from "./slices/message.reaction";
 import channelMsgReducer from "./slices/message.channel";
 import userMsgReducer from "./slices/message.user";
+import messageReducer from "./slices/message";
 import { authApi } from "./services/auth";
 import { contactApi } from "./services/contact";
 import { channelApi } from "./services/channel";
 import { messageApi } from "./services/message";
 import { serverApi } from "./services/server";
+import { streamingApi } from "./services/streaming";
 
 const reducer = combineReducers({
+  authData: authDataReducer,
   ui: uiReducer,
-  visitMark: visitMarkReducer,
+  footprint: footprintReducer,
   contacts: contactsReducer,
   channels: channelsReducer,
-  pendingMessage: pendingMsgReducer,
+  reactionMessage: reactionMsgReducer,
   userMessage: userMsgReducer,
   channelMessage: channelMsgReducer,
-  authData: authDataReducer,
+  message: messageReducer,
   [authApi.reducerPath]: authApi.reducer,
   [messageApi.reducerPath]: messageApi.reducer,
   [contactApi.reducerPath]: contactApi.reducer,
   [channelApi.reducerPath]: channelApi.reducer,
   [serverApi.reducerPath]: serverApi.reducer,
+  [streamingApi.reducerPath]: streamingApi.reducer,
 });
 
 const store = configureStore({
@@ -40,7 +44,8 @@ const store = configureStore({
         contactApi.middleware,
         channelApi.middleware,
         serverApi.middleware,
-        messageApi.middleware
+        messageApi.middleware,
+        streamingApi.middleware
       )
       .prepend(listenerMiddleware.middleware),
 });

src/common/component/Avatar.js

@@ -1,7 +1,8 @@
 import { useState, useEffect } from "react";
 import { getInitials, getInitialsAvatar } from "../utils";
 export default function Avatar({ url, name = "unkonw name", ...rest }) {
-  const [src, setSrc] = useState(url);
+  // console.log("avatar url", url);
+  const [src, setSrc] = useState("");
   const handleError = () => {
     const tmp = getInitialsAvatar({
       initials: getInitials(name),
@@ -14,6 +15,8 @@ export default function Avatar({ url, name = "unkonw name", ...rest }) {
         initials: getInitials(name),
       });
       setSrc(tmp);
+    } else {
+      setSrc(url);
     }
   }, [url, name]);
 

src/common/component/ChannelModal/index.js

@@ -15,6 +15,9 @@ import { addChannel } from "../../../app/slices/channels";
 import { useCreateChannelMutation } from "../../../app/services/channel";
 
 export default function ChannelModal({ personal = false, closeModal }) {
+  const { conactsData, loginUid } = useSelector((store) => {
+    return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
+  });
   const navigateTo = useNavigate();
   const dispatch = useDispatch();
   const [data, setData] = useState({
@@ -28,9 +31,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
     createChannel,
     { isSuccess, isError, isLoading, data: newChannel },
   ] = useCreateChannelMutation();
-  const currentUser = useSelector((state) => {
-    return state.authData.user;
-  });
+
   const handleToggle = () => {
     const { is_public } = data;
     setData((prev) => {
@@ -48,6 +49,7 @@ export default function ChannelModal({ personal = false, closeModal }) {
     }
     createChannel(data);
   };
+
   useEffect(() => {
     if (isError) {
       toast.error("create new channel failed");
@@ -83,7 +85,8 @@ export default function ChannelModal({ personal = false, closeModal }) {
     console.log({ data });
   };
   console.log("contacts", contacts);
-  if (!currentUser) return null;
+  const loginUser = conactsData[loginUid];
+  if (!loginUser) return null;
   const { name, members, is_public } = data;
   return (
     <Modal>
@@ -142,17 +145,14 @@ export default function ChannelModal({ personal = false, closeModal }) {
               <ChannelIcon personal={!is_public} className="icon" />
             </div>
           </div>
-          {/* admin or  */}
-          {
-            <div className="private">
-              <span className="txt normal">Private Channel</span>
-              <StyledToggle
-                data-checked={!is_public}
-                data-disabled={!currentUser?.is_admin}
-                onClick={handleToggle}
-              />
-            </div>
-          }
+          <div className="private">
+            <span className="txt normal">Private Channel</span>
+            <StyledToggle
+              data-checked={!is_public}
+              data-disabled={!loginUser?.is_admin}
+              onClick={handleToggle}
+            />
+          </div>
           <div className="btns">
             <Button onClick={closeModal} className="normal cancel">
               Cancel

src/common/component/ChannelSetting/DeleteConfirmModal.js

@@ -4,7 +4,7 @@ import toast from "react-hot-toast";
 import { useNavigate, useMatch } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { toggleChannelSetting } from "../../../app/slices/ui";
-import { deleteChannel } from "../../../app/slices/channels";
+import { removeChannel } from "../../../app/slices/channels";
 import Modal from "../Modal";
 // import BASE_URL from "../../app/config";
 import { useLazyRemoveChannelQuery } from "../../../app/services/channel";
@@ -15,14 +15,14 @@ export default function DeleteConfirmModal({ id, closeModal }) {
   const navigateTo = useNavigate();
   const dispatch = useDispatch();
   const pathMatched = useMatch(`/chat/channel/${id}`);
-  const [removeChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
+  const [deleteChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
   const handleDelete = () => {
-    removeChannel(id);
+    deleteChannel(id);
   };
   useEffect(() => {
     if (isSuccess) {
       toast.success("delete channel successfully!");
-      dispatch(deleteChannel(id));
+      dispatch(removeChannel(id));
       dispatch(toggleChannelSetting());
       if (pathMatched) {
         navigateTo("/chat");

src/common/component/ChannelSetting/Overview.js

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
-// import { useSelector } from "react-redux";
 import {
   useGetChannelQuery,
   useUpdateChannelMutation,

src/common/component/ChannelSetting/navs.js

@@ -2,13 +2,14 @@ import Overview from "./Overview";
 import ManageMembers from "../ManageMembers";
 import { useSelector } from "react-redux";
 const useNavs = (channelId) => {
-  const { channels, contacts } = useSelector((store) => {
+  const { channels, contactIds } = useSelector((store) => {
     return {
-      channels: store.channels,
-      contacts: store.contacts,
+      channels: store.channels.byId,
+      contactIds: store.contacts.ids,
     };
   });
-  const ids = channels[channelId]?.members || [];
+  let ids = channels[channelId]?.members ?? [];
+  ids = ids.length == 0 ? contactIds : ids;
   const navs = [
     {
       title: "General",
@@ -38,15 +39,7 @@ const useNavs = (channelId) => {
         {
           name: "members",
           title: "Members",
-          component: (
-            <ManageMembers
-              members={
-                ids.length == 0
-                  ? contacts
-                  : contacts.filter((c) => ids.includes(c.uid))
-              }
-            />
-          ),
+          component: <ManageMembers members={ids} />,
         },
       ],
     },

src/common/component/Contact.js

@@ -65,9 +65,8 @@ export default function Contact({
   popover = false,
   compact = false,
 }) {
-  const contacts = useSelector((store) => store.contacts);
-  if (!contacts) return null;
-  const currUser = contacts.find((c) => c.uid == uid);
+  const curr = useSelector((store) => store.contacts.byId[uid]);
+  if (!curr) return null;
   return (
     <StyledWrapper
       className={`${interactive ? "interactive" : ""} ${
@@ -81,16 +80,16 @@ export default function Contact({
         disabled={!popover}
         placement="left"
         trigger="click"
-        content={<Profile data={currUser} type="card" />}
+        content={<Profile uid={uid} type="card" />}
       >
         <div className="avatar">
-          <Avatar url={currUser?.avatar} name={currUser?.name} alt="avatar" />
+          <Avatar url={curr?.avatar} name={curr?.name} alt="avatar" />
           <div
-            className={`status ${currUser?.online ? "online" : "offline"}`}
+            className={`status ${curr?.online ? "online" : "offline"}`}
           ></div>
         </div>
       </Tippy>
-      {!compact && <span className="name">{currUser?.name}</span>}
+      {!compact && <span className="name">{curr?.name}</span>}
     </StyledWrapper>
   );
 }

src/common/component/ContactsModal.js

@@ -1,6 +1,5 @@
 import { useRef } from "react";
 import styled from "styled-components";
-import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { useOutsideClick } from "rooks";
 import useFilteredUsers from "../hook/useFilteredUsers";
@@ -55,15 +54,12 @@ const StyledWrapper = styled.div`
 export default function ContactsModal({ closeModal }) {
   const wrapperRef = useRef();
   const { contacts, updateInput, input } = useFilteredUsers();
-  const currentUser = useSelector((state) => {
-    return state.authData.user;
-  });
   useOutsideClick(wrapperRef, closeModal);
   const handleSearch = (evt) => {
-    updateInput(evt.target.value);
+    console.log("www");
+    // updateInput(evt.target.value);
   };
 
-  if (!currentUser) return null;
   return (
     <Modal>
       <StyledWrapper ref={wrapperRef}>

src/common/component/CurrentUser.js

@@ -57,11 +57,13 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-export default function CurrentUser({ expand = true }) {
-  const { user } = useSelector((store) => store.authData);
+export default function CurrentUser() {
+  const currUser = useSelector((store) => {
+    return store.contacts.byId[store.authData.uid];
+  });
 
-  if (!user) return null;
-  const { uid, name, avatar } = user;
+  if (!currUser) return null;
+  const { uid, name, avatar } = currUser;
   return (
     <StyledWrapper>
       <div className="profile">
@@ -71,20 +73,20 @@ export default function CurrentUser({ expand = true }) {
           <span className="id">#{uid}</span>
         </div>
       </div>
-      {expand && (
-        <div className="settings">
-          <img
-            src="https://static.nicegoodthings.com/project/rustchat/icon.speaker.svg"
-            className="icon"
-            alt="mic icon"
-          />
-          <img
-            src="https://static.nicegoodthings.com/project/rustchat/icon.mic.svg"
-            className="icon"
-            alt="sound icon"
-          />
-        </div>
-      )}
+      {/* {expand && ( */}
+      <div className="settings">
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/icon.speaker.svg"
+          className="icon"
+          alt="mic icon"
+        />
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/icon.mic.svg"
+          className="icon"
+          alt="sound icon"
+        />
+      </div>
+      {/* )} */}
     </StyledWrapper>
   );
 }

src/common/component/ManageMembers.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import styled from "styled-components";
 import { useOutsideClick } from "rooks";
+import { useSelector } from "react-redux";
 import toast from "react-hot-toast";
 import useCopy from "../hook/useCopy";
 import { useLazyDeleteContactQuery } from "../../app/services/contact";
@@ -85,6 +86,7 @@ const StyledWrapper = styled.section`
   }
 `;
 export default function ManageMembers({ members = [] }) {
+  const contacts = useSelector((store) => store.contacts);
   const [copied, copy] = useCopy();
   const [remove, { isSuccess: removeSuccess }] = useLazyDeleteContactQuery();
   const wrapperRef = useRef(null);
@@ -111,6 +113,7 @@ export default function ManageMembers({ members = [] }) {
   const handleCopy = (str) => {
     copy(str);
   };
+  const uids = !members || members.length == 0 ? contacts.ids : members;
   return (
     <StyledWrapper>
       <div className="intro">
@@ -121,12 +124,12 @@ export default function ManageMembers({ members = [] }) {
         </p>
       </div>
       <ul className="members">
-        {members.map((m) => {
-          const { name, email, uid, is_admin } = m;
+        {uids.map((uid) => {
+          const { name, email, is_admin } = contacts.byId[uid];
           return (
             <li key={uid} className="member">
               <div className="left">
-                <Contact compact uid={uid} name={name} interactive={false} />
+                <Contact compact uid={uid} interactive={false} />
                 <div className="info">
                   <span className="name">{name}</span>
                   <span className="email">{email}</span>

src/common/component/Message/Commands.js

@@ -1,9 +1,9 @@
 import { useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
-import toast from "react-hot-toast";
+// import toast from "react-hot-toast";
 import { useOutsideClick } from "rooks";
-import { setReplyMessage } from "../../../app/slices/message.pending";
+import { addReplyingMessage } from "../../../app/slices/message";
 import StyledMenu from "../StyledMenu";
 import DeleteMessageConfirm from "./DeleteMessageConfirm";
 import EmojiPicker from "./EmojiPicker";
@@ -41,10 +41,8 @@ const StyledCmds = styled.ul`
 `;
 export default function Commands({
   contextId = 0,
-  message = null,
   mid = 0,
-  uid = 0,
-  reactions = [],
+  from_uid = 0,
   menuVisible,
   toggleMenu,
   emojiPopVisible,
@@ -54,12 +52,12 @@ export default function Commands({
   const dispatch = useDispatch();
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
 
-  const currUid = useSelector((store) => store.authData.user.uid);
+  const currUid = useSelector((store) => store.authData.uid);
   const menuRef = useRef(null);
 
   const handleReply = () => {
     if (contextId) {
-      dispatch(setReplyMessage({ id: contextId, msg: message }));
+      dispatch(addReplyingMessage({ id: contextId, mid }));
     }
     // toast.success("cooming soon");
   };
@@ -78,13 +76,9 @@ export default function Commands({
         />
       </li>
       {emojiPopVisible && (
-        <EmojiPicker
-          reactions={reactions}
-          mid={mid}
-          hidePicker={toggleEmojiPopover}
-        />
+        <EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
       )}
-      {currUid == uid ? (
+      {currUid == from_uid ? (
         <li className="cmd" onClick={toggleEditMessage}>
           <img
             src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
@@ -110,7 +104,7 @@ export default function Commands({
           {/* <li className="item">Edit Message</li> */}
           <li className="item underline">Pin Message</li>
           <li className="item">Reply</li>
-          {currUid == uid && (
+          {currUid == from_uid && (
             <li className="item danger" onClick={toggleDeleteModal}>
               Delete Message
             </li>
@@ -118,10 +112,7 @@ export default function Commands({
         </StyledMenu>
       )}
       {deleteModalVisible && (
-        <DeleteMessageConfirm
-          closeModal={toggleDeleteModal}
-          message={{ mid, ...message }}
-        />
+        <DeleteMessageConfirm closeModal={toggleDeleteModal} mid={mid} />
       )}
     </StyledCmds>
   );

src/common/component/Message/DeleteMessageConfirm.js

@@ -7,7 +7,7 @@ import StyledModal from "../styled/Modal";
 import Button from "../styled/Button";
 import Modal from "../Modal";
 import PreviewMessage from "./PreviewMessage";
-export default function LogoutConfirmModal({ closeModal, message = null }) {
+export default function DeleteMessageConfirmModal({ closeModal, mid = 0 }) {
   // const dispatch = useDispatch();
   const [deleteMessage, { isLoading, isSuccess }] = useLazyDeleteMessageQuery();
   const handleDelete = (evt) => {
@@ -21,8 +21,7 @@ export default function LogoutConfirmModal({ closeModal, message = null }) {
     }
   }, [isSuccess]);
 
-  if (!message) return;
-  const { mid, ...previewContent } = message;
+  if (!mid) return null;
   return (
     <Modal>
       <StyledModal
@@ -38,7 +37,7 @@ export default function LogoutConfirmModal({ closeModal, message = null }) {
         title="Delete Message"
         description="Are you sure want to delete this message?"
       >
-        <PreviewMessage data={previewContent} />
+        <PreviewMessage mid={mid} />
       </StyledModal>
     </Modal>
   );

src/common/component/Message/EmojiPicker.js

@@ -3,7 +3,8 @@
 import { useRef } from "react";
 import styled from "styled-components";
 import { useOutsideClick } from "rooks";
-import { useLikeMessageMutation } from "../../../app/services/message";
+import { useSelector } from "react-redux";
+import { useReactMessageMutation } from "../../../app/services/message";
 const StyledPicker = styled.div`
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: 6px;
@@ -32,13 +33,19 @@ const StyledPicker = styled.div`
   }
 `;
 const emojis = {
-  thumb_up: "👍",
-  ok: "👌",
-  like: "❤️",
+  ["U+1F44D"]: "👍",
+  ["U+1F44C"]: "👌",
+  ["U+2764"]: "❤️",
 };
-export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
+export default function EmojiPicker({ mid, hidePicker }) {
   const wrapperRef = useRef(null);
-  const [reactMessage, { isLoading }] = useLikeMessageMutation();
+  const [reactMessage, { isLoading }] = useReactMessageMutation();
+  const { reactionData, currUid } = useSelector((store) => {
+    return {
+      reactionData: store.reactionMessage[mid],
+      currUid: store.authData.uid,
+    };
+  });
   useOutsideClick(wrapperRef, hidePicker);
   const handleReact = (action) => {
     console.log("react", action);
@@ -48,9 +55,14 @@ export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
     <StyledPicker ref={wrapperRef}>
       <ul className={`emojis ${isLoading ? "reacting" : ""}`}>
         {Object.entries(emojis).map(([key, emoji]) => {
+          let reacted =
+            reactionData &&
+            reactionData[key] &&
+            reactionData[key].includes(currUid);
+
           return (
             <li
-              className={`emoji ${reactions.includes(key) ? "reacted" : ""}`}
+              className={`emoji ${reacted ? "reacted" : ""}`}
               key={key}
               onClick={handleReact.bind(null, key)}
             >

src/common/component/Message/PreviewMessage.js

@@ -1,12 +1,16 @@
 // import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
-// import { useSelector } from "react-redux";
 import renderContent from "./renderContent";
 import Avatar from "../Avatar";
 import StyledWrapper from "./styled";
-export default function PreviewMessage({ data = null }) {
-  if (!data) return null;
-  const { avatar, name, time, content_type, content } = data;
+import { useSelector } from "react-redux";
+export default function PreviewMessage({ mid = 0 }) {
+  const { msg, contactsData } = useSelector((store) => {
+    return { msg: store.message[mid], contactsData: store.contacts.byId };
+  });
+  if (!msg) return null;
+  const { from_uid, created_at, content_type, content } = msg;
+  const { name, avatar } = contactsData[from_uid];
   return (
     <StyledWrapper className={`preview`}>
       <div className="avatar">
@@ -15,7 +19,9 @@ export default function PreviewMessage({ data = null }) {
       <div className="details">
         <div className="up">
           <span className="name">{name}</span>
-          <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
+          <i className="time">
+            {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
+          </i>
         </div>
         <div className={`down`}>{renderContent(content_type, content)}</div>
       </div>

src/common/component/Message/Reaction.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import styled from "styled-components";
+import { emojis } from "./EmojiPicker";
+const StyledWrapper = styled.span`
+  display: flex;
+  gap: 8px;
+  font-size: 16px;
+  /* align-items: center; */
+  .reaction {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    em {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+`;
+export default function Reaction({ reactions = null }) {
+  // const {
+  //     messageData,
+  //     reactionMessageData,
+  //     contactsData,
+  //     loginedUser,
+  //   } = useSelector((store) => {
+  //     return {
+  //       reactionMessageData: store.reactionMessage,
+  //       messageData: store.message,
+  //       contactsData: store.contacts.byId,
+  //       loginedUser: store.authData.user,
+  //     };
+  //   });
+
+  if (!reactions) return null;
+  return (
+    <StyledWrapper className="reactions">
+      {Object.entries(reactions).map(([reaction, uids]) => {
+        return uids.length > 0 ? (
+          <i
+            className="reaction"
+            // data-count={count > 1 ? count : ""}
+            key={reaction}
+          >
+            {emojis[reaction]}
+
+            {uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
+          </i>
+        ) : null;
+      })}
+    </StyledWrapper>
+  );
+}

src/common/component/Message/Removed.js

@@ -1,8 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-const Styled = styled.div`
-  display: flex;
-`;
-export default function Removed() {
-  return <Styled>Removed</Styled>;
-}

src/common/component/Message/Reply.js

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+import { useSelector } from "react-redux";
+
+const Styled = styled.div`
+  color: #aaa;
+  font-size: 12px;
+  margin-bottom: -10px;
+  /* padding-left: 10px; */
+`;
+export default function Reply({ mid }) {
+  const data = useSelector((store) => store.message[mid]);
+  if (!data) return null;
+  return <Styled className="reply">{data.content}</Styled>;
+}

src/common/component/Message/index.js

@@ -1,44 +1,34 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import dayjs from "dayjs";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { useInViewRef } from "rooks";
 import Tippy from "@tippyjs/react";
-
+import Reaction from "./Reaction";
+import Reply from "./Reply";
 import Profile from "../Profile";
 import Avatar from "../Avatar";
-import { setChannelMsgRead } from "../../../app/slices/message.channel";
-import { setUserMsgRead } from "../../../app/slices/message.user";
+import { readMessage } from "../../../app/slices/message";
 import StyledWrapper from "./styled";
 import Commands from "./Commands";
-import { emojis } from "./EmojiPicker";
+
 import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
-function Message({
-  reply = null,
-  gid = "",
-  mid = "",
-  uid,
-  fromUid,
-  time,
-  content,
-  content_type = "text/plain",
-  unread = false,
-  pending,
-  edited = false,
-  likes = {},
-}) {
+function Message({ contextId = 0, mid = "" }) {
   const [myRef, inView] = useInViewRef();
   const [edit, setEdit] = useState(false);
   const [emojiPopVisible, setEmojiPopVisible] = useState(false);
   const [menuVisible, setMenuVisible] = useState(false);
   const disptach = useDispatch();
   const avatarRef = useRef(null);
-  const { contacts, loginedUser } = useSelector((store) => {
-    return {
-      contacts: store.contacts,
-      loginedUser: store.authData.user,
-    };
-  });
+  const { message = {}, reactionMessageData, contactsData } = useSelector(
+    (store) => {
+      return {
+        reactionMessageData: store.reactionMessage,
+        message: store.message[mid],
+        contactsData: store.contacts.byId,
+      };
+    }
+  );
   const toggleMenu = () => {
     setMenuVisible((prev) => !prev);
   };
@@ -49,20 +39,30 @@ function Message({
     setEmojiPopVisible((prev) => !prev);
   };
   // useEffect(() => {
-  //   if (!unread) {
+  //   if (!read) {
   //     avatarRef.current?.scrollIntoView();
   //   }
-  // }, [unread]);
+  // }, [read]);
+
+  // console.log("message", mid, messageData[mid]);
 
   useEffect(() => {
-    if (inView && unread) {
-      const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
-      disptach(setMsgRead({ id: gid || uid, mid }));
+    if (inView && !message.read) {
+      disptach(readMessage(mid));
     }
-  }, [gid, mid, uid, unread, inView]);
-
-  if (!contacts) return null;
-  const currUser = contacts.find((c) => c.uid == fromUid) || {};
+  }, [mid, message, inView]);
+  if (!message) return null;
+  const {
+    reply_mid,
+    from_uid: fromUid,
+    created_at: time,
+    sending,
+    content,
+    content_type = "text/plain",
+    edited,
+  } = message;
+  const reactions = reactionMessageData[mid];
+  const currUser = contactsData[fromUid] || {};
   return (
     <StyledWrapper
       ref={myRef}
@@ -74,36 +74,20 @@ function Message({
         interactive
         placement="left"
         trigger="click"
-        content={<Profile data={currUser} type="card" />}
+        content={<Profile uid={fromUid} type="card" />}
       >
-        <div className="avatar" data-uid={uid} ref={avatarRef}>
+        <div className="avatar" data-uid={fromUid} ref={avatarRef}>
           <Avatar url={currUser.avatar} name={currUser.name} />
         </div>
       </Tippy>
       <div className="details">
-        {reply && <div className="reply">{reply.content}</div>}
+        {reply_mid && <Reply mid={reply_mid} />}
         <div className="up">
           <span className="name">{currUser.name}</span>
           <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
-          {likes && (
-            <span className="likes">
-              {Object.entries(likes).map(([reaction, uids]) => {
-                return uids.length > 0 ? (
-                  <i
-                    className="like"
-                    // data-count={count > 1 ? count : ""}
-                    key={reaction}
-                  >
-                    {emojis[reaction]}
-
-                    {uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
-                  </i>
-                ) : null;
-              })}
-            </span>
-          )}
+          {reactions && <Reaction reactions={reactions} />}
         </div>
-        <div className={`down ${pending ? "pending" : ""}`}>
+        <div className={`down ${sending ? "sending" : ""}`}>
           {edit ? (
             <EditMessage
               content={content}
@@ -117,23 +101,9 @@ function Message({
       </div>
       {!edit && (
         <Commands
-          contextId={gid || uid}
-          message={{
-            mid,
-            from_uid: fromUid,
-            name: currUser.name,
-            avatar: currUser.avatar,
-            time,
-            content,
-            content_type,
-          }}
-          reactions={Object.entries(likes ?? {})
-            .filter(([, uids = []]) => uids.includes(loginedUser.uid))
-            .map(([reaction]) => {
-              return reaction;
-            })}
+          contextId={contextId}
           mid={mid}
-          uid={fromUid}
+          from_uid={fromUid}
           toggleMenu={toggleMenu}
           menuVisible={menuVisible}
           emojiPopVisible={emojiPopVisible}

src/common/component/Message/styled.js

@@ -35,12 +35,7 @@ const StyledMsg = styled.div`
     display: flex;
     flex-direction: column;
     gap: 8px;
-    .reply {
-      color: #aaa;
-      font-size: 12px;
-      margin-bottom: -10px;
-      /* padding-left: 10px; */
-    }
+
     .up {
       display: flex;
       align-items: center;
@@ -57,30 +52,6 @@ const StyledMsg = styled.div`
         font-size: 12px;
         line-height: 18px;
       }
-      .likes {
-        display: flex;
-        gap: 8px;
-        font-size: 16px;
-        /* align-items: center; */
-        .like {
-          position: relative;
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          em {
-            font-size: 12px;
-            color: #999;
-          }
-          /* &:after {
-            content: attr(data-count);
-            position: absolute;
-            top: -4px;
-            right: -8px;
-            font-size: 12px;
-            color: #999;
-          } */
-        }
-      }
     }
     .down {
       user-select: text;
@@ -95,7 +66,7 @@ const StyledMsg = styled.div`
         color: #999;
         font-size: 10px;
       }
-      &.pending {
+      &.sending {
         opacity: 0.5;
       }
       .img {

src/common/component/NotificationHub/index.js

@@ -22,7 +22,10 @@ import {
   clearAuthData,
   updateLoginedUserByLogs,
 } from "../../../app/slices/auth.data";
-import { setUsersVersion, setAfterMid } from "../../../app/slices/visit.mark";
+import {
+  updateUsersVersion,
+  updateAfterMid,
+} from "../../../app/slices/visit.mark";
 
 import { setReady } from "../../../app/slices/ui";
 import useMessageHandler from "./useMessageHandler";
@@ -117,7 +120,7 @@ const NotificationHub = () => {
         {
           console.log("users snapshot");
           const { version } = data;
-          dispatch(setUsersVersion({ version }));
+          dispatch(updateUsersVersion({ version }));
         }
         break;
       case "users_log":
@@ -179,7 +182,7 @@ const NotificationHub = () => {
 
           // 更新after_mid
           if (data.detail.type == "normal") {
-            dispatch(setAfterMid({ mid: data.mid }));
+            dispatch(updateAfterMid({ mid: data.mid }));
           }
         }
         break;

src/common/component/NotificationHub/useMessageHandler.js

@@ -51,7 +51,7 @@ export default function useMessageHandler(currUser) {
     dispatch(
       addMessage({
         id, // 自己发的 就不用标记未读
-        unread: !self,
+        read: !self,
         ...common,
       })
     );

src/common/component/Profile.js

@@ -1,7 +1,7 @@
 // import React from "react";
 // import toast from "react-hot-toast";
 // import { useState, useEffect } from "react";
-
+import { useSelector } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { BsChatText } from "react-icons/bs";
 import { RiUserAddLine } from "react-icons/ri";
@@ -62,9 +62,11 @@ const StyledWrapper = styled.div`
     }
   }
 `;
-export default function Profile({ data = null, type = "embed" }) {
+export default function Profile({ uid = null, type = "embed" }) {
+  const data = useSelector((store) => store.contacts.byId[uid]);
   if (!data) return null;
-  const { uid, name, email, avatar } = data;
+  // console.log("profile", data);
+  const { name, email, avatar } = data;
   return (
     <StyledWrapper className={type}>
       <Avatar className="avatar" url={avatar} name={name} />

src/common/component/Search.js

@@ -34,6 +34,7 @@ const StyledWrapper = styled.div`
     cursor: pointer;
   }
   .popup {
+    z-index: 999;
     user-select: none;
     box-shadow: 0px 20px 25px rgba(31, 41, 55, 0.1),
       0px 10px 10px rgba(31, 41, 55, 0.04);
@@ -63,7 +64,9 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Search() {
-  const currentUser = useSelector((store) => store.authData.user);
+  const currentUser = useSelector(
+    (store) => store.contacts.byId[store.authData.uid]
+  );
   const [popupVisible, setPopupVisible] = useState(false);
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [contactsModalVisible, setContactsModalVisible] = useState(false);
@@ -85,6 +88,7 @@ export default function Search() {
   const handleCloseModal = () => {
     setChannelModalVisible(false);
   };
+  console.log("searching");
   return (
     <StyledWrapper>
       {channelModalVisible && (

src/common/component/Send/Replying.js

@@ -0,0 +1,28 @@
+// import React from 'react'
+import { useDispatch, useSelector } from "react-redux";
+import { MdClose } from "react-icons/md";
+import { removeReplyingMessage } from "../../../app/slices/message";
+
+export default function Replying({ id, mid }) {
+  const { msg, contactsData } = useSelector((store) => {
+    return { contactsData: store.contacts.byId, msg: store.message[mid] };
+  });
+  const dispatch = useDispatch();
+  const removeReply = () => {
+    dispatch(removeReplyingMessage(id));
+  };
+  if (!msg) return null;
+  const { from_uid } = msg;
+  const user = contactsData[from_uid];
+  return (
+    <div className="reply">
+      <span className="txt">
+        Replying to
+        <em>{user?.name}</em>
+      </span>
+      <button className="close" onClick={removeReply}>
+        <MdClose size={20} color="#78787C" />
+      </button>
+    </div>
+  );
+}

src/common/component/Send/UploadModal/index.js

@@ -2,11 +2,8 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 // import toast from "react-hot-toast";
 // import { useNavigate } from "react-router-dom";
-// import { useSelector, useDispatch } from "react-redux";
 import { useSendChannelMsgMutation } from "../../../../app/services/channel";
 import { useSendMsgMutation } from "../../../../app/services/contact";
-// import { addChannelMsg } from "../../../../app/slices/message.channel";
-// import { addUserMsg } from "../../../../app/slices/message.user";
 import Modal from "../../Modal";
 import Button from "../../styled/Button";
 
@@ -19,7 +16,7 @@ export default function UploadModal({
   closeModal,
 }) {
   // const dispatch = useDispatch();
-  const from_uid = useSelector((store) => store.authData.user.uid);
+  const from_uid = useSelector((store) => store.authData.uid);
   const [
     sendChannelMsg,
     { isLoading: channelSending },

src/common/component/Send/index.js

@@ -1,140 +1,148 @@
-import { useState, useEffect, useRef } from 'react';
-import { MdAdd, MdClose } from 'react-icons/md';
-import TextareaAutosize from 'react-textarea-autosize';
-import { useDispatch, useSelector } from 'react-redux';
-import { useKey } from 'rooks';
+import { useState, useEffect, useRef } from "react";
+import { MdAdd } from "react-icons/md";
+import TextareaAutosize from "react-textarea-autosize";
+import { useDispatch, useSelector } from "react-redux";
+import { useKey } from "rooks";
 
-import { removeReplyMessage } from '../../../app/slices/message.pending';
-import { useSendChannelMsgMutation } from '../../../app/services/channel';
-import { useSendMsgMutation } from '../../../app/services/contact';
-import { useReplyMessageMutation } from '../../../app/services/message';
-import StyledSend from './styled';
-import useFiles from './useFiles';
-import UploadModal from './UploadModal';
-import EmojiPicker from './EmojiPicker';
+import { removeReplyingMessage } from "../../../app/slices/message";
+import { useSendChannelMsgMutation } from "../../../app/services/channel";
+import { useSendMsgMutation } from "../../../app/services/contact";
+import { useReplyMessageMutation } from "../../../app/services/message";
+import StyledSend from "./styled";
+import useFiles from "./useFiles";
+import UploadModal from "./UploadModal";
+import EmojiPicker from "./EmojiPicker";
+import Replying from "./Replying";
 
 const Types = {
- channel: '#',
- user: '@'
+  channel: "#",
+  user: "@",
 };
 export default function Send({
- name,
- type = 'channel',
- // 发给谁，或者是channel，或者是user
- id = '',
- dragFiles = []
+  name,
+  type = "channel",
+  // 发给谁，或者是channel，或者是user
+  id = "",
+  dragFiles = [],
 }) {
- const [replyMessage] = useReplyMessageMutation();
- const { files, setFiles, resetFiles } = useFiles([]);
- const inputRef = useRef();
- const [shift, setShift] = useState(false);
- const [enter, setEnter] = useState(false);
- const [msg, setMsg] = useState('');
- const dispatch = useDispatch();
- // 谁发的
- const {
-  from_uid,
-  reply = null,
-  contacts
- } = useSelector((store) => {
-  return {
-   contacts: store.contacts,
-   from_uid: store.authData.user.uid,
-   reply: store.pendingMessage.reply[id]
-  };
- });
- useEffect(() => {
-  if (dragFiles.length) {
-   setFiles((prev) => [...prev, ...dragFiles]);
-  }
- }, [dragFiles]);
+  const [replyMessage] = useReplyMessageMutation();
+  const { files, setFiles, resetFiles } = useFiles([]);
+  const inputRef = useRef();
+  const [shift, setShift] = useState(false);
+  const [enter, setEnter] = useState(false);
+  const [msg, setMsg] = useState("");
+  const dispatch = useDispatch();
+  // 谁发的
+  const { from_uid, replying_mid = null } = useSelector((store) => {
+    return {
+      from_uid: store.authData.uid,
+      replying_mid: store.message.replying[id],
+    };
+  });
+  useEffect(() => {
+    if (dragFiles.length) {
+      setFiles((prev) => [...prev, ...dragFiles]);
+    }
+  }, [dragFiles]);
 
- const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
- const [sendChannelMsg, { isLoading: channelSending }] = useSendChannelMsgMutation();
- const sendMessage = type == 'channel' ? sendChannelMsg : sendMsg;
- const sendingMessage = userSending || channelSending;
- useKey(
-  'Shift',
-  (e) => {
-   console.log('shift', e.type);
-   setShift(e.type == 'keydown');
-  },
-  { eventTypes: ['keydown', 'keyup'], target: inputRef }
- );
- const handleMsgChange = (evt) => {
-  if (enter && !shift) {
-   handleSendMessage();
-  } else {
-   setMsg(evt.target.value);
-  }
- };
- const handleInputKeydown = (e) => {
-  console.log('keydown event', e);
-  setEnter(e.key === 'Enter');
- };
- const selectEmoji = (emoji) => {
-  setMsg((prev) => `${prev}${emoji}`);
- };
- useEffect(() => {
-  inputRef.current.focus();
- }, [msg, reply]);
- const handleUpload = (evt) => {
-  setFiles([...evt.target.files]);
- };
- const handleSendMessage = () => {
-  if (!msg || !id || sendingMessage) return;
-  if (reply) {
-   replyMessage({ mid: reply.mid, content: msg });
-   dispatch(removeReplyMessage(id));
-  } else {
-   sendMessage({ id, content: msg, from_uid });
-  }
-  setMsg('');
- };
- const removeReply = () => {
-  dispatch(removeReplyMessage(id));
- };
- return (
-  <>
-   <StyledSend className={`send ${reply ? 'reply' : ''}`}>
-    {reply && (
-     <div className="reply">
-      <span className="txt">
-       Replying to
-       <em>{contacts.find((c) => c.uid == reply.from_uid)?.name}</em>
-      </span>
-      <button className="close" onClick={removeReply}>
-       <MdClose size={20} color="#78787C" />
-      </button>
-     </div>
-    )}
-    <div className="addon">
-     <MdAdd size={20} color="#78787C" />
-     <input multiple={true} onChange={handleUpload} type="file" name="file" id="file" />
-    </div>
-    <div className="input">
-     <TextareaAutosize
-      autoFocus
-      onFocus={(e) =>
-       e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)
-      }
-      ref={inputRef}
-      className="content"
-      maxRows={8}
-      minRows={1}
-      onKeyDown={handleInputKeydown}
-      onChange={handleMsgChange}
-      value={msg}
-      placeholder={`给 ${Types[type]}${name} 发消息`}
-     />
-    </div>
-    <div className="emoji">
-     <EmojiPicker selectEmoji={selectEmoji} />
-    </div>
-   </StyledSend>
-   {files.length !== 0 && (
-    <UploadModal type={type} files={files} sendTo={id} closeModal={resetFiles} />
-   )}
-  </>
- );
+  const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
+  const [
+    sendChannelMsg,
+    { isLoading: channelSending },
+  ] = useSendChannelMsgMutation();
+  const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
+  const sendingMessage = userSending || channelSending;
+  useKey(
+    "Shift",
+    (e) => {
+      console.log("shift", e.type);
+      setShift(e.type == "keydown");
+    },
+    { eventTypes: ["keydown", "keyup"], target: inputRef }
+  );
+  const handleMsgChange = (evt) => {
+    if (enter && !shift) {
+      handleSendMessage();
+    } else {
+      setMsg(evt.target.value);
+    }
+  };
+  const handleInputKeydown = (e) => {
+    console.log("keydown event", e);
+    setEnter(e.key === "Enter");
+  };
+  const selectEmoji = (emoji) => {
+    setMsg((prev) => `${prev}${emoji}`);
+  };
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [msg, replying_mid]);
+  const handleUpload = (evt) => {
+    setFiles([...evt.target.files]);
+  };
+  const handleSendMessage = () => {
+    if (!msg || !id || sendingMessage) return;
+    if (replying_mid) {
+      console.log("replying", replying_mid);
+      replyMessage({
+        id,
+        reply_mid: replying_mid,
+        content: msg,
+        context: type,
+        from_uid,
+      });
+      dispatch(removeReplyingMessage(id));
+    } else {
+      sendMessage({ id, content: msg, from_uid });
+    }
+    setMsg("");
+  };
+
+  return (
+    <>
+      <StyledSend className={`send ${replying_mid ? "reply" : ""}`}>
+        {replying_mid && <Replying mid={replying_mid} id={id} />}
+        <div className="addon">
+          <MdAdd size={20} color="#78787C" />
+          <input
+            multiple={true}
+            onChange={handleUpload}
+            type="file"
+            name="file"
+            id="file"
+          />
+        </div>
+        <div className="input">
+          <TextareaAutosize
+            autoFocus
+            onFocus={(e) =>
+              e.currentTarget.setSelectionRange(
+                e.currentTarget.value.length,
+                e.currentTarget.value.length
+              )
+            }
+            ref={inputRef}
+            className="content"
+            maxRows={8}
+            minRows={1}
+            onKeyDown={handleInputKeydown}
+            onChange={handleMsgChange}
+            value={msg}
+            placeholder={`给 ${Types[type]}${name} 发消息`}
+          />
+        </div>
+        <div className="emoji">
+          <EmojiPicker selectEmoji={selectEmoji} />
+        </div>
+      </StyledSend>
+      {files.length !== 0 && (
+        <UploadModal
+          type={type}
+          files={files}
+          sendTo={id}
+          closeModal={resetFiles}
+        />
+      )}
+    </>
+  );
 }

src/common/component/Setting/MyAccount.js

@@ -114,7 +114,9 @@ export default function MyAccount() {
     uploadAvatar,
     { isSuccess: uploadSuccess },
   ] = useUpdateAvatarMutation();
-  const { user } = useSelector((store) => store.authData);
+  const loginUser = useSelector((store) => {
+    return store.contacts.byId[store.authData.uid];
+  });
   useEffect(() => {
     if (uploadSuccess) {
       toast.success("update avatar successfully!");
@@ -127,8 +129,8 @@ export default function MyAccount() {
   const closeBasicEditModal = () => {
     setEditModal(null);
   };
-  if (!user) return null;
-  const { uid, avatar, name, email } = user;
+  if (!loginUser) return null;
+  const { uid, avatar, name, email } = loginUser;
   return (
     <>
       <StyledWrapper>

src/common/component/Setting/Overview.js

@@ -66,7 +66,9 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Overview() {
-  const currUser = useSelector((store) => store.authData.user);
+  const loginUser = useSelector((store) => {
+    return store.contacts.byId[store.authData.uid];
+  });
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState(null);
   const { data, refetch } = useGetServerQuery();
@@ -119,7 +121,7 @@ export default function Overview() {
 
   if (!values) return null;
   const { name, description, logo } = values;
-  const isAdmin = currUser?.is_admin;
+  const isAdmin = loginUser?.is_admin;
   return (
     <StyledWrapper>
       <div className="logo">

src/common/component/Setting/config/Agora.js

@@ -1,6 +1,5 @@
 // import { useState, useEffect } from "react";
 import StyledContainer from "./StyledContainer";
-// import { useSelector } from "react-redux";
 import Input from "../../styled/Input";
 import Textarea from "../../styled/Textarea";
 import Label from "../../styled/Label";

src/common/component/Setting/config/Firebase.js

@@ -1,6 +1,5 @@
 // import { useState, useEffect } from "react";
 import StyledContainer from "./StyledContainer";
-// import { useSelector } from "react-redux";
 import Input from "../../styled/Input";
 import Textarea from "../../styled/Textarea";
 import Toggle from "../../styled/Toggle";

src/common/component/Setting/navs.js

@@ -4,16 +4,8 @@ import ConfigFirebase from "./config/Firebase";
 import ConfigSMTP from "./config/SMTP";
 import Notifications from "./Notifications";
 import ManageMembers from "../ManageMembers";
-import { useSelector } from "react-redux";
 import ConfigAgora from "./config/Agora";
 const useNavs = () => {
-  const { contacts } = useSelector((store) => {
-    return {
-      currUser: store.authData.user,
-      channels: store.channels,
-      contacts: store.contacts,
-    };
-  });
   const navs = [
     {
       title: "General",
@@ -54,7 +46,7 @@ const useNavs = () => {
         {
           name: "members",
           title: "Members",
-          component: <ManageMembers members={contacts} />,
+          component: <ManageMembers />,
         },
       ],
     },

src/common/hook/useChatScroll.js

@@ -0,0 +1,32 @@
+import { useRef, useEffect } from "react";
+// import { useDebounce } from "rooks";
+function useChatScroll(dep) {
+  const ref = useRef();
+  // const updateScrollTop = useDebounce(() => {
+  //   console.log("chat scroll", ref);
+  //   if (ref.current) {
+  //     setTimeout(() => {
+  //       ref.current.scrollTop = ref.current.scrollHeight;
+  //     }, 50);
+  //   }
+  // }, 100);
+  // const updateScrollTop = () => {
+  //   console.log("chat scroll", ref);
+  //   if (ref.current) {
+  //     setTimeout(() => {
+  //       ref.current.scrollTop = ref.current.scrollHeight;
+  //     }, 100);
+  //   }
+  // };
+  useEffect(() => {
+    console.log("chat scroll", ref);
+    if (ref.current) {
+      setTimeout(() => {
+        ref.current.scrollTop = ref.current.scrollHeight;
+      }, 20);
+    }
+  }, [dep]);
+  return ref;
+}
+
+export default useChatScroll;

src/common/hook/useFilteredUsers.js

@@ -2,8 +2,8 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 export default function useFilteredUsers() {
   const [input, setInput] = useState("");
-  const contacts = useSelector((store) => store.contacts);
-  const [filteredUsers, setFilteredUsers] = useState(contacts);
+  const contacts = useSelector((store) => Object.values(store.contacts.byId));
+  const [filteredUsers, setFilteredUsers] = useState([]);
   useEffect(() => {
     if (!input) {
       setFilteredUsers(contacts);
@@ -16,7 +16,7 @@ export default function useFilteredUsers() {
         })
       );
     }
-  }, [input, contacts]);
+  }, [input]);
   const updateInput = (val) => {
     setInput(val);
   };

src/common/hook/useLogout.js

@@ -1,30 +1,34 @@
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, batch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { clearAuthData } from "../../app/slices/auth.data";
-import { clearMark } from "../../app/slices/visit.mark";
-import { clearChannels } from "../../app/slices/channels";
-import { clearContacts } from "../../app/slices/contacts";
-import { clearChannelMsg } from "../../app/slices/message.channel";
-import { clearUserMsg } from "../../app/slices/message.user";
-import { clearPendingMsg } from "../../app/slices/message.pending";
+import { resetAuthData } from "../../app/slices/auth.data";
+import { resetFootprint } from "../../app/slices/footprint";
+import { resetChannels } from "../../app/slices/channels";
+import { resetContacts } from "../../app/slices/contacts";
+import { resetChannelMsg } from "../../app/slices/message.channel";
+import { resetUserMsg } from "../../app/slices/message.user";
+import { resetReactionMessage } from "../../app/slices/message.reaction";
+import { resetMessage } from "../../app/slices/message";
 import { useLazyLogoutQuery } from "../../app/services/auth";
 export default function useLogout() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [logout, { isLoading, isSuccess }] = useLazyLogoutQuery();
   const clearLocalData = () => {
-    dispatch(clearMark());
-    dispatch(clearChannelMsg());
-    dispatch(clearUserMsg());
-    dispatch(clearChannels());
-    dispatch(clearContacts());
-    dispatch(clearPendingMsg());
+    batch(() => {
+      dispatch(resetFootprint());
+      dispatch(resetChannelMsg());
+      dispatch(resetUserMsg());
+      dispatch(resetChannels());
+      dispatch(resetContacts());
+      dispatch(resetMessage());
+      dispatch(resetReactionMessage());
+    });
   };
 
   useEffect(() => {
     if (isSuccess) {
-      dispatch(clearAuthData());
+      dispatch(resetAuthData());
       navigate("/login");
     }
   }, [isSuccess]);

src/routes/chat/ChannelChat/index.js

@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
 
 import { useSelector, useDispatch } from "react-redux";
-import dayjs from "dayjs";
+// import dayjs from "dayjs";
+import useChatScroll from "../../../common/hook/useChatScroll";
 
 import Message from "../../../common/component/Message";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Send from "../../../common/component/Send";
-import { clearChannelMsgUnread } from "../../../app/slices/message.channel";
+// import { readMessage } from "../../../app/slices/message";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
 import {
@@ -16,37 +17,29 @@ import {
   StyledHeader,
 } from "./styled";
 
-export default function ChannelChat({
-  cid = "",
-  unreads = 0,
-  data = {},
-  dropFiles = [],
-}) {
+export default function ChannelChat({ cid = "", dropFiles = [] }) {
   // const containerRef = useRef(null);
   const [dragFiles, setDragFiles] = useState([]);
-  const dispatch = useDispatch();
-  const { msgs, users } = useSelector((store) => {
+  // const dispatch = useDispatch();
+  const { msgIds, userIds, data } = useSelector((store) => {
     return {
-      msgs: store.channelMessage[cid] || {},
-      users: store.contacts,
+      msgIds: store.channelMessage[cid] || [],
+      userIds: store.contacts.ids,
+      data: store.channels.byId[cid],
     };
   });
-  const handleClearUnreads = () => {
-    dispatch(clearChannelMsgUnread(cid));
-  };
+  const ref = useChatScroll(msgIds);
+  // const handleClearUnreads = () => {
+  //   dispatch(readMessage(msgIds));
+  // };
   useEffect(() => {
     if (dropFiles.length) {
       setDragFiles(dropFiles);
     }
   }, [dropFiles]);
   const { name, description, is_public, members = [] } = data;
-  const filteredUsers =
-    members.length == 0
-      ? users
-      : users.filter((u) => {
-          return members.includes(u.uid);
-        });
-  console.log("channel message list", msgs);
+  const memberIds = members.length == 0 ? userIds : members;
+  console.log("channel message list", msgIds);
   return (
     <Layout
       setDragFiles={setDragFiles}
@@ -82,61 +75,31 @@ export default function ChannelChat({
       }
       contacts={
         <StyledContacts>
-          {filteredUsers.map(({ name, uid }) => {
-            return <Contact key={name} uid={uid} popover />;
+          {memberIds.map((uid) => {
+            return <Contact key={uid} uid={uid} popover />;
           })}
         </StyledContacts>
       }
     >
       <StyledChannelChat>
-        <div className="wrapper">
+        <div className="wrapper" ref={ref}>
           <div className="info">
             <h2 className="title">Welcome to #{name} !</h2>
             <p className="desc">This is the start of the #{name} channel. </p>
             {/* <button className="edit">Edit Channel</button> */}
           </div>
           <div className="chat">
-            {Object.entries(msgs)
-              .sort(([, msg1], [, msg2]) => {
-                return msg1.created_at - msg2.created_at;
-              })
-              .map(([mid, msg], idx) => {
-                if (!msg) return null;
-                const {
-                  likes = {},
-                  pending = false,
-                  from_uid,
-                  content,
-                  content_type,
-                  created_at,
-                  unread,
-                  edited,
-                  reply,
-                } = msg;
-                return (
-                  <Message
-                    reply={reply}
-                    edited={edited}
-                    likes={likes}
-                    pending={pending}
-                    content_type={content_type}
-                    unread={unread}
-                    gid={cid}
-                    mid={mid}
-                    key={idx}
-                    time={created_at}
-                    fromUid={from_uid}
-                    content={content}
-                  />
-                );
-              })}
+            {msgIds.map((mid, idx) => {
+              // if (!msg) return null;
+              return <Message contextId={cid} mid={mid} key={idx} />;
+            })}
           </div>
         </div>
 
         <Send dragFiles={dragFiles} id={cid} type="channel" name={name} />
         <div className="placeholder"></div>
       </StyledChannelChat>
-      {unreads != 0 && (
+      {/* {unreads != 0 && (
         <StyledNotification>
           <div className="content">
             {unreads} new messages
@@ -148,7 +111,7 @@ export default function ChannelChat({
             Mark As Read
           </button>
         </StyledNotification>
-      )}
+      )} */}
     </Layout>
   );
 }

src/routes/chat/ChannelList.js

@@ -2,19 +2,26 @@
 import { NavLink, useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import useContextMenu from "../../common/hook/useContextMenu";
 import ContextMenu from "../../common/component/ContextMenu";
 import { toggleChannelSetting } from "../../app/slices/ui";
 import ChannelIcon from "../../common/component/ChannelIcon";
-const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
+import getUnreadCount from "./getUnreadCount";
+const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-
+  const { channel, mids, messageData } = useSelector((store) => {
+    return {
+      channel: store.channels.byId[id],
+      mids: store.channelMessage[id],
+      messageData: store.message,
+    };
+  });
   const handleChannelSetting = (evt) => {
     evt.preventDefault();
     evt.stopPropagation();
-    dispatch(toggleChannelSetting(data.id));
+    dispatch(toggleChannelSetting(id));
   };
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
@@ -22,7 +29,7 @@ const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
       if (dataTransfer.files.length) {
         // console.log(files, rest);
         setFiles([...dataTransfer.files]);
-        navigate(`/chat/channel/${data.id}`);
+        navigate(`/chat/channel/${id}`);
         // 重置
         setTimeout(() => {
           setFiles([]);
@@ -33,7 +40,8 @@ const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
-  const { id, is_public, name, unreads } = data;
+  const { is_public, name } = channel;
+  const unreads = getUnreadCount(mids, messageData);
   return (
     <NavLink
       onContextMenu={contextMenuEventHandler}
@@ -57,7 +65,8 @@ const NavItem = ({ data, setFiles, contextMenuEventHandler }) => {
     </NavLink>
   );
 };
-export default function ChannelList({ channels, setDropFiles }) {
+export default function ChannelList({ setDropFiles }) {
+  const channelIds = useSelector((store) => store.channels.ids);
   const {
     visible: contextMenuVisible,
     posX,
@@ -67,12 +76,12 @@ export default function ChannelList({ channels, setDropFiles }) {
   } = useContextMenu();
   return (
     <>
-      {channels.map(({ id, is_public, name, description, unreads }) => {
+      {channelIds.map((cid) => {
         return (
           <NavItem
             contextMenuEventHandler={handleContextMenuEvent}
-            key={id}
-            data={{ id, is_public, name, description, unreads }}
+            key={cid}
+            id={cid}
             setFiles={setDropFiles}
           />
         );

src/routes/chat/DMChat/index.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
+import useChatScroll from "../../../common/hook/useChatScroll";
 import Message from "../../../common/component/Message";
 import Send from "../../../common/component/Send";
 import Contact from "../../../common/component/Contact";
@@ -10,19 +11,17 @@ import { StyledHeader, StyledDMChat } from "./styled";
 export default function DMChat({ uid = "", dropFiles = [] }) {
   console.log("dm files", dropFiles);
   const [dragFiles, setDragFiles] = useState([]);
-  const contacts = useSelector((store) => store.contacts);
-  const { msgs } = useSelector((store) => {
+  // const [mids, setMids] = useState([]);
+  const { msgIds, currUser } = useSelector((store) => {
     return {
-      msgs: store.userMessage[uid] || {},
+      currUser: store.contacts.byId[uid],
+      msgIds: store.userMessage.byId[uid] || [],
     };
   });
-  const [currUser, setCurrUser] = useState(null);
-  useEffect(() => {
-    console.log({ uid });
-    if (uid && contacts) {
-      setCurrUser(contacts.find((c) => c.uid == uid));
-    }
-  }, [uid, contacts]);
+  const ref = useChatScroll(msgIds);
+  // useEffect(() => {
+  //   setMids(msgIds);
+  // }, [msgIds]);
   useEffect(() => {
     if (dropFiles.length) {
       setDragFiles(dropFiles);
@@ -67,42 +66,12 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
       }
     >
       <StyledDMChat>
-        <div className="chat">
-          {Object.entries(msgs)
-            .sort(([, msg1], [, msg2]) => {
-              return msg1.created_at - msg2.created_at;
-            })
-            .map(([mid, msg], idx) => {
-              if (!msg) return null;
-              // console.log("user msg", msg);
-              const {
-                likes = {},
-                from_uid,
-                content,
-                content_type,
-                created_at,
-                unread,
-                pending = false,
-                edited,
-                reply,
-              } = msg;
-              return (
-                <Message
-                  reply={reply}
-                  likes={likes}
-                  edited={edited}
-                  pending={pending}
-                  content_type={content_type}
-                  unread={unread}
-                  fromUid={from_uid}
-                  mid={mid}
-                  key={idx}
-                  time={created_at}
-                  uid={uid}
-                  content={content}
-                />
-              );
-            })}
+        <div className="chat" ref={ref}>
+          {msgIds.map((mid) => {
+            // if (!msg) return null;
+            // console.log("user msg", msg);
+            return <Message mid={mid} key={mid} contextId={uid} />;
+          })}
         </div>
       </StyledDMChat>
       <div className="placeholder"></div>

src/routes/chat/DMChat/styled.js

@@ -45,13 +45,12 @@ export const StyledHeader = styled.header`
 export const StyledDMChat = styled.article`
   position: relative;
   width: 100%;
-  padding-top: 25px;
-  /* margin-bottom: 120px; */
+  padding-top: 20px;
   > .chat {
     display: flex;
     flex-direction: column;
     padding: 0 16px;
-    padding-top: 10px;
+    padding-top: 15px;
     padding-bottom: 25px;
     height: calc(100vh - 56px - 80px);
     overflow-y: scroll;

src/routes/chat/DMList.js

@@ -4,9 +4,16 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
+import { useSelector } from "react-redux";
 import Contact from "../../common/component/Contact";
 dayjs.extend(relativeTime);
-const NavItem = ({ data, setFiles }) => {
+const NavItem = ({ uid, mid, unreads, setFiles }) => {
+  const { currMsg, currUser } = useSelector((store) => {
+    return {
+      currUser: store.contacts.byId[uid],
+      currMsg: store.message[mid],
+    };
+  });
   const navigate = useNavigate();
   const [{ isActive }, drop] = useDrop(() => ({
     accept: [NativeTypes.FILE],
@@ -14,7 +21,7 @@ const NavItem = ({ data, setFiles }) => {
       if (dataTransfer.files.length) {
         // console.log(files, rest);
         setFiles([...dataTransfer.files]);
-        navigate(`/chat/dm/${data.uid}`);
+        navigate(`/chat/dm/${uid}`);
         // 重置
         setTimeout(() => {
           setFiles([]);
@@ -25,7 +32,7 @@ const NavItem = ({ data, setFiles }) => {
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
-  const { uid, user, lastMsg, unreads } = data;
+  if (!currUser || !currMsg) return null;
   return (
     <NavLink
       ref={drop}
@@ -33,15 +40,15 @@ const NavItem = ({ data, setFiles }) => {
       className={`session ${isActive ? "drop_over" : ""}`}
       to={`/chat/dm/${uid}`}
     >
-      <Contact compact interactive={false} className="avatar" uid={user.uid} />
+      <Contact compact interactive={false} className="avatar" uid={uid} />
       <div className="details">
         <div className="up">
-          <span className="name">{user.name}</span>
-          <time>{dayjs(lastMsg.created_at).fromNow()}</time>
+          <span className="name">{currUser.name}</span>
+          {currMsg && <time>{dayjs(currMsg.created_at).fromNow()}</time>}
         </div>
 
         <div className="down">
-          <div className="msg">{lastMsg.content}</div>
+          {currMsg && <div className="msg">{currMsg.content}</div>}
           {unreads > 0 && <i className="badge">{unreads}</i>}
         </div>
       </div>
@@ -49,12 +56,14 @@ const NavItem = ({ data, setFiles }) => {
   );
 };
 export default function DMList({ sessions, setDropFiles }) {
-  return sessions.map(({ uid, user, lastMsg, unreads } = {}) => {
-    if (!user) return null;
+  return sessions.map(({ uid, lastMid, unreads } = {}) => {
+    if (!uid) return null;
     return (
       <NavItem
         key={uid}
-        data={{ uid, user, lastMsg, unreads }}
+        uid={uid}
+        mid={lastMid}
+        unreads={unreads}
         setFiles={setDropFiles}
       />
     );

src/routes/chat/getUnreadCount.js

@@ -0,0 +1,12 @@
+const getUnreadCount = (mids, messageData) => {
+  if (!mids || !messageData) return 0;
+  let unreads = 0;
+  mids.forEach((id) => {
+    if (!messageData[id].read) {
+      unreads++;
+    }
+  });
+  return unreads;
+};
+
+export default getUnreadCount;

src/routes/chat/index.js

@@ -16,20 +16,18 @@ import ChannelList from "./ChannelList";
 import ContactsModal from "../../common/component/ContactsModal";
 import ChannelModal from "../../common/component/ChannelModal";
 import DMList from "./DMList";
+import getUnreadCount from "./getUnreadCount";
 
 export default function ChatPage() {
   const [channelDropFiles, setChannelDropFiles] = useState([]);
   const [userDropFiles, setUserDropFiles] = useState([]);
-  const { contacts, channels, UserMsgData, ChannelMsgData } = useSelector(
-    (store) => {
-      return {
-        contacts: store.contacts,
-        channels: store.channels,
-        UserMsgData: store.userMessage,
-        ChannelMsgData: store.channelMessage,
-      };
-    }
-  );
+  const { contactsData, UserMsgData, messageData } = useSelector((store) => {
+    return {
+      contactsData: store.contacts.byId,
+      UserMsgData: store.userMessage,
+      messageData: store.message,
+    };
+  });
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [contactsModalVisible, setContactsModalVisible] = useState(false);
   const { channel_id, user_id } = useParams();
@@ -39,31 +37,19 @@ export default function ChatPage() {
   const toggleChannelModalVisible = () => {
     setChannelModalVisible((prev) => !prev);
   };
-  const getUnreadCount = (gid) => {
-    return Object.values(ChannelMsgData[gid] || {}).filter((m) => m.unread)
-      .length;
-  };
+  // const getUnreadCount = (gid) => {
+  //   return Object.values(ChannelMsgData[gid] || {}).filter((m) => m.read)
+  //     .length;
+  // };
   const handleToggleExpand = (evt) => {
     const { currentTarget } = evt;
     const listEle = currentTarget.parentElement.parentElement;
     listEle.classList.toggle("collapse");
   };
-  if (!contacts) return null;
-  const tmpSessionUser = contacts.find((c) => c.uid == user_id);
-  const transformedChannels = Object.entries(channels).map(([key, obj]) => {
-    const unreads = Object.values(ChannelMsgData[key] || {}).filter(
-      (m) => m.unread
-    ).length;
-    return { id: key, ...obj, unreads };
-  });
-  const sessions = Object.keys(UserMsgData).map((uid) => {
-    let currUser = contacts.find((c) => c.uid == uid);
-    if (!currUser) return undefined;
-    let lastMid = Object.keys(UserMsgData[uid]).sort().pop();
-    let unreads = Object.values(UserMsgData[uid] || {}).filter((m) => m.unread)
-      .length;
-    let lastMsg = UserMsgData[uid][lastMid];
-    return { user: currUser, unreads, uid, lastMsg };
+  const tmpSessionUser = contactsData[user_id];
+  const sessions = UserMsgData.ids.map((uid) => {
+    const unreads = getUnreadCount(UserMsgData.byId[uid], messageData);
+    return { uid, unreads, lastMid: [...UserMsgData.byId[uid]].pop() };
   });
   return (
     <>
@@ -93,10 +79,7 @@ export default function ChatPage() {
               />
             </h3>
             <nav className="nav">
-              <ChannelList
-                channels={transformedChannels}
-                setDropFiles={setChannelDropFiles}
-              />
+              <ChannelList setDropFiles={setChannelDropFiles} />
             </nav>
           </div>
           <div className="list dms">
@@ -117,7 +100,7 @@ export default function ChatPage() {
             </h3>
             <nav className="nav">
               <DMList sessions={sessions} setDropFiles={setUserDropFiles} />
-              {user_id && !Object.keys(UserMsgData).includes(user_id) && (
+              {user_id && UserMsgData.ids.findIndex((i) => i == user_id) == -1 && (
                 <NavLink className="session" to={`/chat/dm/${user_id}`}>
                   <Contact
                     compact
@@ -147,7 +130,6 @@ export default function ChatPage() {
             <ChannelChat
               unreads={getUnreadCount(channel_id)}
               cid={channel_id}
-              data={channels[channel_id]}
               dropFiles={channelDropFiles}
             />
           )}

src/routes/contacts/Profile.js

@@ -1,91 +0,0 @@
-// import React from "react";
-// import toast from "react-hot-toast";
-import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
-import { NavLink } from "react-router-dom";
-import { BsChatText } from "react-icons/bs";
-import { RiUserAddLine } from "react-icons/ri";
-import { IoShareOutline } from "react-icons/io5";
-import styled from "styled-components";
-
-import Avatar from "../../common/component/Avatar";
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  margin-top: 80px;
-  width: 432px;
-  gap: 4px;
-  .avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-  }
-  .name {
-    font-weight: bold;
-    font-size: 18px;
-    line-height: 100%;
-    color: #1c1c1e;
-  }
-  .email {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 20px;
-    color: #78787c;
-  }
-  .icons {
-    display: flex;
-    align-items: center;
-    padding: 26px 0;
-    gap: 28px;
-    .icon {
-    }
-  }
-  .line {
-    width: 100%;
-    height: 1px;
-    border: none;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-`;
-export default function Profile({ uid = null }) {
-  const contacts = useSelector((store) => store.contacts);
-  const [profile, setProfile] = useState(null);
-  useEffect(() => {
-    if (contacts && contacts) {
-      setProfile(contacts.find((c) => c.uid == uid));
-    } else {
-      setProfile(null);
-    }
-  }, [uid, contacts]);
-  if (!profile) return null;
-  console.log({ profile });
-  const { name, email, avatar } = profile;
-  return (
-    <StyledWrapper>
-      <Avatar className="avatar" url={avatar} name={name} />
-      <h2 className="name">{name}</h2>
-      <span className="email">{email}</span>
-      <ul className="icons">
-        <li className="icon chat">
-          <NavLink to={`/chat/dm/${uid}`}>
-            <BsChatText size={20} color="#616161" />
-          </NavLink>
-        </li>
-        <li className="icon add">
-          {/* <NavLink to={`/chat/dm/${uid}`}> */}
-          <RiUserAddLine size={20} color="#616161" />
-          {/* </NavLink> */}
-        </li>
-        <li className="icon share">
-          {/* <NavLink to={`/chat/dm/${uid}`}> */}
-          <IoShareOutline size={20} color="#616161" />
-          {/* </NavLink> */}
-        </li>
-      </ul>
-      <hr className="line" />
-    </StyledWrapper>
-  );
-}

src/routes/contacts/index.js

@@ -10,20 +10,20 @@ import StyledWrapper from "./styled";
 
 export default function ContactsPage() {
   const { user_id } = useParams();
-  const contacts = useSelector((store) => store.contacts);
+  const contactIds = useSelector((store) => store.contacts.ids);
 
-  console.log({ contacts, user_id });
-  if (!contacts) return null;
+  console.log({ contactIds, user_id });
+  if (!contactIds) return null;
   return (
     <StyledWrapper>
       <div className="left">
         <Search />
         <div className="list">
           <nav className="nav">
-            {contacts.map(({ uid, status }) => {
+            {contactIds.map((uid) => {
               return (
                 <NavLink key={uid} className="session" to={`/contacts/${uid}`}>
-                  <Contact uid={uid} status={status} />
+                  <Contact uid={uid} />
                 </NavLink>
               );
             })}
@@ -33,7 +33,7 @@ export default function ContactsPage() {
       </div>
       {user_id && (
         <div className="right">
-          <Profile data={contacts.find((c) => c.uid == user_id)} />
+          <Profile uid={user_id} />
         </div>
       )}
     </StyledWrapper>

src/routes/home/Loading.js

@@ -40,7 +40,7 @@ export default function Loading() {
   useEffect(() => {
     const inter = setTimeout(() => {
       setReloadVisible(true);
-    }, 10000);
+    }, 15000);
 
     return () => {
       clearTimeout(inter);

src/routes/home/index.js

@@ -14,7 +14,7 @@ import ChannelSettingModal from "../../common/component/ChannelSetting";
 
 import ChatIcon from "../../assets/icons/chat.svg";
 import ContactIcon from "../../assets/icons/contact.svg";
-import NotificationHub from "../../common/component/NotificationHub";
+// import NotificationHub from "../../common/component/NotificationHub";
 
 export default function HomePage() {
   const dispatch = useDispatch();
@@ -29,51 +29,45 @@ export default function HomePage() {
   const toggleExpand = () => {
     dispatch(toggleMenuExpand());
   };
-  console.log({ data, error, success });
-  if (loading) {
+  console.log("index loading", loading, ready);
+  if (loading || !ready) {
     return <Loading />;
   }
   return (
     <>
-      <NotificationHub />
-      {ready ? (
-        <StyledWrapper>
-          <div className={`col left ${menuExpand ? "expand" : ""}`}>
-            <ServerDropList
-              data={data?.server}
-              memberCount={data.contacts?.length}
-              expand={menuExpand}
-            />
-            <nav className="nav">
-              <NavLink className="link" to={"/chat"}>
-                <img src={ChatIcon} alt="chat icon" />{" "}
-                {menuExpand && (
-                  <span className="animate__animated animate__fadeIn">
-                    Chat
-                  </span>
-                )}
-              </NavLink>
-              <NavLink className="link" to={"/contacts"}>
-                <img src={ContactIcon} alt="contact icon" />{" "}
-                {menuExpand && (
-                  <span className="animate__animated animate__fadeIn">
-                    Contacts
-                  </span>
-                )}
-              </NavLink>
-            </nav>
-            <div className="divider"></div>
-            <Tools expand={menuExpand} />
-            <Menu toggle={toggleExpand} expand={menuExpand} />
-            {/* <CurrentUser expand={menuExpand} /> */}
-          </div>
-          <div className="col right">
-            <Outlet />
-          </div>
-        </StyledWrapper>
-      ) : (
-        <Loading />
-      )}
+      {/* <NotificationHub /> */}
+      <StyledWrapper>
+        <div className={`col left ${menuExpand ? "expand" : ""}`}>
+          <ServerDropList
+            data={data?.server}
+            memberCount={data.contacts?.length}
+            expand={menuExpand}
+          />
+          <nav className="nav">
+            <NavLink className="link" to={"/chat"}>
+              <img src={ChatIcon} alt="chat icon" />{" "}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">Chat</span>
+              )}
+            </NavLink>
+            <NavLink className="link" to={"/contacts"}>
+              <img src={ContactIcon} alt="contact icon" />{" "}
+              {menuExpand && (
+                <span className="animate__animated animate__fadeIn">
+                  Contacts
+                </span>
+              )}
+            </NavLink>
+          </nav>
+          <div className="divider"></div>
+          <Tools expand={menuExpand} />
+          <Menu toggle={toggleExpand} expand={menuExpand} />
+          {/* <CurrentUser expand={menuExpand} /> */}
+        </div>
+        <div className="col right">
+          <Outlet />
+        </div>
+      </StyledWrapper>
       {setting && <SettingModal />}
       {channelSetting && <ChannelSettingModal id={channelSetting} />}
     </>

src/routes/home/usePreload.js

@@ -3,8 +3,9 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import initCache, { useRehydrate } from "../../app/cache";
 import { useLazyGetContactsQuery } from "../../app/services/contact";
-import { clearAuthData, setUserData } from "../../app/slices/auth.data";
-import { setContacts } from "../../app/slices/contacts";
+import { useLazyInitStreamingQuery } from "../../app/services/streaming";
+import { resetAuthData, setUid } from "../../app/slices/auth.data";
+import { fullfillContacts } from "../../app/slices/contacts";
 
 // import { useGetChannelsQuery } from "../../app/services/channel";
 import { useLazyGetServerQuery } from "../../app/services/server";
@@ -14,7 +15,8 @@ import { KEY_UID } from "../../app/config";
 //   refetchOnMountOrArgChange: true,
 // };
 export default function usePreload() {
-  const { rehydrate, cacheFirst } = useRehydrate();
+  const { rehydrate, rehydrated } = useRehydrate();
+  const [initStreaming, { isLoading: streaming }] = useLazyInitStreamingQuery();
   const [checked, setChecked] = useState(false);
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -40,31 +42,44 @@ export default function usePreload() {
     initCache();
     rehydrate();
   }, []);
+
   useEffect(() => {
-    getContacts();
-    getServer();
-  }, []);
+    // rehydrate();
+    if (rehydrated) {
+      getContacts();
+      getServer();
+    }
+  }, [rehydrated]);
+  useEffect(() => {
+    if (checked && rehydrated) {
+      initStreaming({}, false);
+    }
+  }, [checked, rehydrated]);
 
   useEffect(() => {
     const local_uid = localStorage.getItem(KEY_UID);
     if (contacts) {
       const matchedUser = contacts.find((c) => c.uid == local_uid);
+      console.log("wtf", contacts, matchedUser);
       if (!matchedUser) {
+        // 用户已注销或被禁用
         console.log("no matched user, redirect to login");
-        dispatch(clearAuthData());
+        dispatch(resetAuthData());
         navigate("/login");
       } else {
         const markedContacts = contacts.map((u) => {
           return u.uid == matchedUser.uid ? { ...u, online: true } : u;
         });
-        dispatch(setUserData(matchedUser));
-        dispatch(setContacts(markedContacts));
+        dispatch(setUid(matchedUser.uid));
+        dispatch(fullfillContacts(markedContacts));
         setChecked(true);
       }
     }
   }, [contacts]);
+  console.log("loading", contactsLoading, serverLoading, !checked, streaming);
   return {
-    loading: contactsLoading || serverLoading || !checked || !cacheFirst,
+    loading:
+      contactsLoading || serverLoading || !checked || !rehydrated || streaming,
     error: contactsError && serverError,
     success: contactsSuccess && serverSuccess,
     data: {

src/routes/login/index.js

@@ -57,6 +57,7 @@ export default function LoginPage() {
   useEffect(() => {
     if (isSuccess && data) {
       // 更新本地认证信息
+      console.log("login data", data);
       toast.success("login success");
       dispatch(setAuthData(data));
       navigateTo("/");

tmp.json

@@ -0,0 +1,21 @@
+{
+  "groups": [
+    {
+      "description": null,
+      "gid": 1,
+      "is_public": true,
+      "members": [],
+      "name": "hello",
+      "owner": null
+    },
+    {
+      "description": null,
+      "gid": 11,
+      "is_public": false,
+      "members": [1, 2, 8],
+      "name": "23ssss",
+      "owner": 2
+    }
+  ],
+  "type": "related_groups"
+}

yarn.lock

@@ -1479,12 +1479,12 @@
     "@firebase/util" "1.4.3"
     tslib "^2.1.0"
 
-"@firebase/app-compat@0.1.18":
-  version "0.1.18"
-  resolved "https://registry.yarnpkg.com/@firebase/app-compat/-/app-compat-0.1.18.tgz#7d86c711c73231aaa408d04a331b468cb74ec7cb"
-  integrity sha512-YXmMLQro2g2xlNnzB6zVxYoFx9sJS/JDEQy6vsj3FpMUuARaImipL6W8KuGfH+tJ3M+q38qRaFROk5gK6PoCrQ==
+"@firebase/app-compat@0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@firebase/app-compat/-/app-compat-0.1.19.tgz#8a842b0a684899ec7213a26c8be08bcd5bfd7a07"
+  integrity sha512-a0TgAXcjF3htSdi10mRwAks1+73nwbmSMXzjlOQDYJ8t3HE7FvHxfB4hjuwHKfgr3MWZjcarsGKVr7LWhUAE8w==
   dependencies:
-    "@firebase/app" "0.7.17"
+    "@firebase/app" "0.7.18"
     "@firebase/component" "0.5.10"
     "@firebase/logger" "0.3.2"
     "@firebase/util" "1.4.3"
@@ -1495,14 +1495,15 @@
   resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.7.0.tgz#c9e16d1b8bed1a991840b8d2a725fb58d0b5899f"
   integrity sha512-6fbHQwDv2jp/v6bXhBw2eSRbNBpxHcd1NBF864UksSMVIqIyri9qpJB1Mn6sGZE+bnDsSQBC5j2TbMxYsJQkQg==
 
-"@firebase/app@0.7.17":
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.7.17.tgz#b6a75c03bc1236bf852e56ff7876e431835e18f1"
-  integrity sha512-OnZab790eMwRxkUs7o/kgniAzSBxecDTGEk1PVhiG0HQhKrIf+R7lgqOZHDb/2GJsX12jby1p/Z5+WJCBxVbJQ==
+"@firebase/app@0.7.18":
+  version "0.7.18"
+  resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.7.18.tgz#69660cbf02da80a1e1a1ab38b76b96231f9bb81d"
+  integrity sha512-jomDaPaEQEWfFUqvxQw4TYSs2gCT2BN0Ec1//3CdMsc1NcppduS31bxsjhn3KdPbtx4opkaZ2FcA+buHtdw9dw==
   dependencies:
     "@firebase/component" "0.5.10"
     "@firebase/logger" "0.3.2"
     "@firebase/util" "1.4.3"
+    idb "3.0.2"
     tslib "^2.1.0"
 
 "@firebase/auth-compat@0.2.9":
@@ -1656,13 +1657,13 @@
   dependencies:
     tslib "^2.1.0"
 
-"@firebase/messaging-compat@0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@firebase/messaging-compat/-/messaging-compat-0.1.8.tgz#3d8ae0302bfbd26e4e9b5cf05c832bffeb215e3d"
-  integrity sha512-1q0Bp/auG6XUSEBzmExrn6uU6JUtB5JxIHwTj8wmUf+JcdNqPMWou040Mem421Sxgd4GLn+vHHlVIRxv1yLYUA==
+"@firebase/messaging-compat@0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging-compat/-/messaging-compat-0.1.9.tgz#05e905bc5a26a3034635cdb2b1e7a1f257c2b08d"
+  integrity sha512-smcBhvTLfgE2KDtvDj1Pm9zQ7GeyR5BLarYLxtvmhhbV6tpa8g+UUE3pCdqN+y1kx6mIYqNOmEEXv+1YnSiYwQ==
   dependencies:
     "@firebase/component" "0.5.10"
-    "@firebase/messaging" "0.9.8"
+    "@firebase/messaging" "0.9.9"
     "@firebase/util" "1.4.3"
     tslib "^2.1.0"
 
@@ -1671,10 +1672,10 @@
   resolved "https://registry.yarnpkg.com/@firebase/messaging-interop-types/-/messaging-interop-types-0.1.0.tgz#bdac02dd31edd5cb9eec37b1db698ea5e2c1a631"
   integrity sha512-DbvUl/rXAZpQeKBnwz0NYY5OCqr2nFA0Bj28Fmr3NXGqR4PAkfTOHuQlVtLO1Nudo3q0HxAYLa68ZDAcuv2uKQ==
 
-"@firebase/messaging@0.9.8":
-  version "0.9.8"
-  resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.9.8.tgz#a7f38c268801513e7b02be10e951a1b2e825a082"
-  integrity sha512-X588ZFA/plaO4de7MyZs2gukrkdp+ounwqZ7JerHHVa6eKl1WNi9AuAfoXOJUMq+nX2DsOWYjohciCkC6qLrWw==
+"@firebase/messaging@0.9.9":
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.9.9.tgz#28ed74e82b849dcedebe2b41693d24fe6e99e8ad"
+  integrity sha512-Fe6+VqFgVuvFOiVerQkPzdmHXnB7urujcKAxK3lRKxgafH89CRvXO1sPnPMvox5/JOCBZrAPok5KA7rOCxBguw==
   dependencies:
     "@firebase/component" "0.5.10"
     "@firebase/installations" "0.5.5"
@@ -2782,10 +2783,10 @@ autoprefixer@^10.4.2:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-axios@^0.26.0:
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
-  integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
+axios@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
+  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
   dependencies:
     follow-redirects "^1.14.8"
 
@@ -2996,6 +2997,17 @@ browserslist@^4.19.3:
     node-releases "^2.0.2"
     picocolors "^1.0.0"
 
+browserslist@^4.20.0:
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.0.tgz#35951e3541078c125d36df76056e94738a52ebe9"
+  integrity sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==
+  dependencies:
+    caniuse-lite "^1.0.30001313"
+    electron-to-chromium "^1.4.76"
+    escalade "^3.1.1"
+    node-releases "^2.0.2"
+    picocolors "^1.0.0"
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -3091,6 +3103,11 @@ caniuse-lite@^1.0.30001312:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
   integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
 
+caniuse-lite@^1.0.30001313:
+  version "1.0.30001314"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz#65c7f9fb7e4594fca0a333bec1d8939662377596"
+  integrity sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==
+
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
@@ -3445,13 +3462,13 @@ css-has-pseudo@^3.0.4:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
-css-loader@^6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.6.0.tgz#c792ad5510bd1712618b49381bd0310574fafbd3"
-  integrity sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg==
+css-loader@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
+  integrity sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==
   dependencies:
     icss-utils "^5.1.0"
-    postcss "^8.4.5"
+    postcss "^8.4.7"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
@@ -3509,10 +3526,10 @@ css-what@^5.1.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
   integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
 
-cssdb@^6.3.1:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-6.4.0.tgz#54899b9042e302be3090b8510ea71fefd08c9e6b"
-  integrity sha512-8NMWrur/ewSNrRNZndbtOTXc2Xb2b+NCTPHj8VErFYvJUlgsMAiBGaFaxG6hjy9zbCjj2ZLwSQrMM+tormO8qA==
+cssdb@^6.4.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-6.4.1.tgz#a2b5955e3283d8df6b6bb86e4107fedaeec1521b"
+  integrity sha512-R70R/Q1fPlM1D6Y+Kpat0QjiY+aMsY2/8lekdVoYcJ7ZQs9kw71W78FdOMf8DFq975KHQf1089PNg1dLsbAhoA==
 
 cssesc@^3.0.0:
   version "3.0.0"
@@ -3851,6 +3868,11 @@ electron-to-chromium@^1.4.71:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
   integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q==
 
+electron-to-chromium@^1.4.76:
+  version "1.4.81"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.81.tgz#a9ce8997232fb9fb0ec53de8931a85b18c0a7383"
+  integrity sha512-Gs7xVpIZ7tYYSDA+WgpzwpPvfGwUk3KSIjJ0akuj5XQHFdyQnsUoM76EA4CIHXNLPiVwTwOFay9RMb0ChG3OBw==
+
 email-addresses@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
@@ -3884,10 +3906,10 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-enhanced-resolve@^5.8.3:
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz#6d552d465cce0423f5b3d718511ea53826a7b2f0"
-  integrity sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==
+enhanced-resolve@^5.9.2:
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
+  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -3981,10 +4003,10 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-prettier@^8.4.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.4.0.tgz#8e6d17c7436649e98c4c2189868562921ef563de"
-  integrity sha512-CFotdUcMY18nGRo5KGsnNxpznzhkopOcOo0InID+sgQssPrzjvsyKZPvOgymTFeHrFuC3Tzdf2YndhXtULK9Iw==
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
@@ -4033,10 +4055,10 @@ eslint-plugin-react-hooks@^4.3.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
   integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
 
-eslint-plugin-react@^7.29.2:
-  version "7.29.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.2.tgz#2d4da69d30d0a736efd30890dc6826f3e91f3f7c"
-  integrity sha512-ypEBTKOy5liFQXZWMchJ3LN0JX1uPI6n7MN7OPHKacqXAxq5gYC30TdO7wqGYQyxD1OrzpobdHC3hDmlRWDg9w==
+eslint-plugin-react@^7.29.3:
+  version "7.29.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.3.tgz#f4eab757f2756d25d6d4c2a58a9e20b004791f05"
+  integrity sha512-MzW6TuCnDOcta67CkpDyRfRsEVx9FNMDV8wZsDqe1luHPdGTrQIUaUXD27Ja3gHsdOIs/cXzNchWGlqm+qRVRg==
   dependencies:
     array-includes "^3.1.4"
     array.prototype.flatmap "^1.2.5"
@@ -4391,17 +4413,17 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
-firebase@^9.6.7:
-  version "9.6.7"
-  resolved "https://registry.yarnpkg.com/firebase/-/firebase-9.6.7.tgz#fad619416c9c16f569cbfd2ba63a937bdc081e33"
-  integrity sha512-WiqGC26cepwVy0CZ4n3ZrLSNpVj1RCPJTB6j1tZU4SadPOrGmuPAt71qcWwaLyqKtRzNTyOA9F5J4ygGDplchw==
+firebase@^9.6.8:
+  version "9.6.8"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-9.6.8.tgz#9a2da35ff97f89813306bdc504b0d302b40d1558"
+  integrity sha512-a/RcgiqK9L5d/ZKpHZ21c3x/KKIo2XwXp2droukbBTuaX0Md8ppHQWYlSqLmWIDR0y2zwN17lrfNVsE6f+4ncA==
   dependencies:
     "@firebase/analytics" "0.7.5"
     "@firebase/analytics-compat" "0.1.6"
-    "@firebase/app" "0.7.17"
+    "@firebase/app" "0.7.18"
     "@firebase/app-check" "0.5.3"
     "@firebase/app-check-compat" "0.2.3"
-    "@firebase/app-compat" "0.1.18"
+    "@firebase/app-compat" "0.1.19"
     "@firebase/app-types" "0.7.0"
     "@firebase/auth" "0.19.9"
     "@firebase/auth-compat" "0.2.9"
@@ -4412,8 +4434,8 @@ firebase@^9.6.7:
     "@firebase/functions" "0.7.8"
     "@firebase/functions-compat" "0.1.9"
     "@firebase/installations" "0.5.5"
-    "@firebase/messaging" "0.9.8"
-    "@firebase/messaging-compat" "0.1.8"
+    "@firebase/messaging" "0.9.9"
+    "@firebase/messaging-compat" "0.1.9"
     "@firebase/performance" "0.5.5"
     "@firebase/performance-compat" "0.1.5"
     "@firebase/polyfill" "0.3.36"
@@ -5437,10 +5459,10 @@ linkify-it@^3.0.3:
   dependencies:
     uc.micro "^1.0.1"
 
-lint-staged@^12.3.4:
-  version "12.3.4"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.4.tgz#4b1ff8c394c3e6da436aaec5afd4db18b5dac360"
-  integrity sha512-yv/iK4WwZ7/v0GtVkNb3R82pdL9M+ScpIbJLJNyCXkJ1FGaXvRCOg/SeL59SZtPpqZhE7BD6kPKFLIDUhDx2/w==
+lint-staged@^12.3.5:
+  version "12.3.5"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.5.tgz#8048ce048c3cac12f57200a06344a54dc91c8fa9"
+  integrity sha512-oOH36RUs1It7b9U/C7Nl/a0sLfoIBcMB8ramiB3nuJ6brBqzsWiUAFSR5DQ3yyP/OR7XKMpijtgKl2DV1lQ3lA==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.16"
@@ -5739,10 +5761,10 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.3.tgz#c5c79f9b22ce9b4f164e9492267358dbe35376d9"
-  integrity sha512-YseMB8cs8U/KCaAGQoqYmfUuhhGW0a9p9XvWXrxVOkE3/IiISTLw4ALNt7JR5B2eYauFM+PQGSbXMDmVbR7Tfw==
+mini-css-extract-plugin@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.0.tgz#578aebc7fc14d32c0ad304c2c34f08af44673f5e"
+  integrity sha512-ndG8nxCEnAemsg4FSgS+yNyHKgkTB4nPKqCOgh65j3/30qqC5RaSQQXMm++Y6sb6E1zRSxPkztj9fqxhS1Eo6w==
   dependencies:
     schema-utils "^4.0.0"
 
@@ -6331,13 +6353,6 @@ postcss-calc@^8.2.0:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.0.2"
 
-postcss-clamp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.0.0.tgz#766d3dbaa2dc56e8bea1b690291b632c0c5bf728"
-  integrity sha512-FsMmeBZtymFN7Jtlnw9is8I4nB+qEEb/qS0ZLTIqcKiwZyHBq44Yhv29Q+VQsTGHYFqIr/s/9tqvNM7j+j1d+g==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-color-functional-notation@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.2.tgz#f59ccaeb4ee78f1b32987d43df146109cc743073"
@@ -6683,10 +6698,10 @@ postcss-place@^7.0.4:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-preset-env@^7.4.1:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.1.tgz#ca6131c6e0d0e0bcc429dbef3e8f8d03250041ea"
-  integrity sha512-UvBVvPJ2vb4odAtckSbryndyBz+Me1q8wawqq0qznpDXy188I+8W5Sa929sCPqw2/NSYnqpHJbo41BKso3+I9A==
+postcss-preset-env@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.2.tgz#2ff3e4787bd9d89710659535855d6ce85ce6110b"
+  integrity sha512-AmOkb8AeNNQwE/z2fHl1iwOIt8J50V8WR0rmLagcgIDoqlJZWjV3NdtOPnLGco1oN8DZe+Ss5B9ULbBeS6HfeA==
   dependencies:
     "@csstools/postcss-color-function" "^1.0.2"
     "@csstools/postcss-font-format-keywords" "^1.0.0"
@@ -6697,13 +6712,12 @@ postcss-preset-env@^7.4.1:
     "@csstools/postcss-oklab-function" "^1.0.1"
     "@csstools/postcss-progressive-custom-properties" "^1.2.0"
     autoprefixer "^10.4.2"
-    browserslist "^4.19.1"
+    browserslist "^4.19.3"
     css-blank-pseudo "^3.0.3"
     css-has-pseudo "^3.0.4"
     css-prefers-color-scheme "^6.0.3"
-    cssdb "^6.3.1"
+    cssdb "^6.4.0"
     postcss-attribute-case-insensitive "^5.0.0"
-    postcss-clamp "^4.0.0"
     postcss-color-functional-notation "^4.2.2"
     postcss-color-hex-alpha "^8.0.3"
     postcss-color-rebeccapurple "^7.0.2"
@@ -6730,6 +6744,7 @@ postcss-preset-env@^7.4.1:
     postcss-pseudo-class-any-link "^7.1.1"
     postcss-replace-overflow-wrap "^4.0.0"
     postcss-selector-not "^5.0.0"
+    postcss-value-parser "^4.2.0"
 
 postcss-pseudo-class-any-link@^7.1.1:
   version "7.1.1"
@@ -6793,7 +6808,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.3.5, postcss@^8.4.5:
+postcss@^8.3.5:
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
   integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
@@ -6811,6 +6826,15 @@ postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.8:
+  version "8.4.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.8.tgz#dad963a76e82c081a0657d3a2f3602ce10c2e032"
+  integrity sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -7389,10 +7413,10 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rooks@^5.10.0:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.10.0.tgz#af39b75709b9221da454bb9607b58b87dad9413e"
-  integrity sha512-zKO0dOn/GJYn2vdo/vgy9fbQq4xebvJYntaxtJnZRXODhco/nLcNOWnhtwSPwx9X1vFPzdnLypoVrt9MZ+Cmvg==
+rooks@^5.10.2:
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.10.2.tgz#e886f2f8821a125d5088b3d7406d6eabc386c976"
+  integrity sha512-xn3xVUiMk6nOfLdZmHEbTHzPJy40mXyJUGSmhiagUZGzxLHVKG0uimnuprAIFRmCZPLrDH6EUdoZx6MomcGa+g==
   dependencies:
     lodash.debounce "^4.0.8"
     raf "^3.4.1"
@@ -8509,10 +8533,10 @@ webpack-dev-server@^4.7.4:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
-webpack-manifest-plugin@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz#10f8dbf4714ff93a215d5a45bcc416d80506f94f"
-  integrity sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==
+webpack-manifest-plugin@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-5.0.0.tgz#084246c1f295d1b3222d36e955546433ca8df803"
+  integrity sha512-8RQfMAdc5Uw3QbCQ/CBV/AXqOR8mt03B6GJmRbhWopE8GzRfEpn+k0ZuWywxW+5QZsffhmFDY1J6ohqJo+eMuw==
   dependencies:
     tapable "^2.0.0"
     webpack-sources "^2.2.0"
@@ -8538,10 +8562,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.69.1:
-  version "5.69.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.1.tgz#8cfd92c192c6a52c99ab00529b5a0d33aa848dc5"
-  integrity sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==
+webpack@^5.70.0:
+  version "5.70.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
+  integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -8552,7 +8576,7 @@ webpack@^5.69.1:
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.8.3"
+    enhanced-resolve "^5.9.2"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"
@@ -8634,25 +8658,25 @@ word-wrap@^1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-workbox-background-sync@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.0.tgz#50ba6bf19c71d21be29bb15ba0f317df7cfa8f44"
-  integrity sha512-rrekt/gt6qOIZsisj6QZfmAFPAnocq1Z603zAjt+qHmeXY8DLPOklVtvrXSaHoHH3qIjUq3SQY5s2x240iTIKw==
+workbox-background-sync@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.1.tgz#df79c6a4a22945d8a44493a4947a6ed0f720ef86"
+  integrity sha512-T5a35fagLXQvV8Dr4+bDU+XYsP90jJ3eBLjZMKuCNELMQZNj+VekCODz1QK44jgoBeQk+vp94pkZV6G+e41pgg==
   dependencies:
     idb "^6.1.4"
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-broadcast-update@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.0.tgz#0104b9ea41b40f8c5e03780226de66bec15141f2"
-  integrity sha512-JC97c7tYqoGWcCfbKO9KHG6lkU+WhXCnDB2j1oFWEiv53nUHy3yjPpzMmAGNLD9oV5lInO15n6V18HfwgkhISw==
+workbox-broadcast-update@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.1.tgz#9aecb116979b0709480b84cfd1beca7a901d01d4"
+  integrity sha512-mb/oyblyEpDbw167cCTyHnC3RqCnCQHtFYuYZd+QTpuExxM60qZuBH1AuQCgvLtDcztBKdEYK2VFD9SZYgRbaQ==
   dependencies:
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-build@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.0.tgz#fd3579de7a91c188e8d857a4b265fe7170197204"
-  integrity sha512-da0/1b6//P9+ts7ofcIKcMVPyN6suJvjJASXokF7DsqvUmgRBPcCVV4KCy8QWjgfcz7mzuTpkSbdVHcPFJ/p0A==
+workbox-build@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.1.tgz#6b5e8f090bb608267868540d3072b44b8531b3bc"
+  integrity sha512-coDUDzHvFZ1ADOl3wKCsCSyOBvkPKlPgcQDb6LMMShN1zgF31Mev/1HzN3+9T2cjjWAgFwZKkuRyExqc1v21Zw==
   dependencies:
     "@apideck/better-ajv-errors" "^0.3.1"
     "@babel/core" "^7.11.1"
@@ -8676,132 +8700,132 @@ workbox-build@6.5.0:
     strip-comments "^2.0.1"
     tempy "^0.6.0"
     upath "^1.2.0"
-    workbox-background-sync "6.5.0"
-    workbox-broadcast-update "6.5.0"
-    workbox-cacheable-response "6.5.0"
-    workbox-core "6.5.0"
-    workbox-expiration "6.5.0"
-    workbox-google-analytics "6.5.0"
-    workbox-navigation-preload "6.5.0"
-    workbox-precaching "6.5.0"
-    workbox-range-requests "6.5.0"
-    workbox-recipes "6.5.0"
-    workbox-routing "6.5.0"
-    workbox-strategies "6.5.0"
-    workbox-streams "6.5.0"
-    workbox-sw "6.5.0"
-    workbox-window "6.5.0"
+    workbox-background-sync "6.5.1"
+    workbox-broadcast-update "6.5.1"
+    workbox-cacheable-response "6.5.1"
+    workbox-core "6.5.1"
+    workbox-expiration "6.5.1"
+    workbox-google-analytics "6.5.1"
+    workbox-navigation-preload "6.5.1"
+    workbox-precaching "6.5.1"
+    workbox-range-requests "6.5.1"
+    workbox-recipes "6.5.1"
+    workbox-routing "6.5.1"
+    workbox-strategies "6.5.1"
+    workbox-streams "6.5.1"
+    workbox-sw "6.5.1"
+    workbox-window "6.5.1"
 
-workbox-cacheable-response@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.0.tgz#cf91b2d4f4707295539596a480ab1c908f6cbfdd"
-  integrity sha512-sqAtWAiBwWvI8HG/2Do7BeKPhHuUczt22ORkAjkH9DfTq9LuWRFd6T4HAMqX5G8F1gM9XA2UPlxRrEeSpFIz/A==
+workbox-cacheable-response@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.1.tgz#f71d0a75b3d6846e39594955e99ac42fd26f8693"
+  integrity sha512-3TdtH/luDiytmM+Cn72HCBLZXmbeRNJqZx2yaVOfUZhj0IVwZqQXhNarlGE9/k6U5Jelb+TtpH2mLVhnzfiSMg==
   dependencies:
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-core@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.0.tgz#076e03840ca568bd04284e9f9f30e86c8dd09f1c"
-  integrity sha512-5SPwNipUzYBhrneLVT02JFA0fw3LG82jFAN/G2NzxkIW10t4MVZuML2nU94bbkgjq25u0fkY8+4JXzMfHgxEWQ==
+workbox-core@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.1.tgz#0dba3bccf883a46dfa61cc412eaa3cb09bb549e6"
+  integrity sha512-qObXZ39aFJ2N8X7IUbGrJHKWguliCuU1jOXM/I4MTT84u9BiKD2rHMkIzgeRP1Ixu9+cXU4/XHJq3Cy0Qqc5hw==
 
-workbox-expiration@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.0.tgz#3cf6a0c8b08b59efa235d26d443c8b7f173179cd"
-  integrity sha512-y3WRkKRy/gMuZZNkrLFahjY0QZtLoq+QfhTbVAsOGHVg1CCtnNbeFAnEidQs7UisI2BK76VqQPvM7hEOFyZ92A==
+workbox-expiration@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.1.tgz#9f105fcf3362852754884ad153888070ce98b692"
+  integrity sha512-iY/cTADAQATMmPkUBRmQdacqq0TJd2wMHimBQz+tRnPGHSMH+/BoLPABPnu7O7rT/g/s59CUYYRGxe3mEgoJCA==
   dependencies:
     idb "^6.1.4"
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-google-analytics@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.0.tgz#86ee42bd1a72ec5aa41f32631ab7c8e5cf4c1602"
-  integrity sha512-CHHh55wMNCc/BV1URrzEM2Zjgf6g2CV6QpAAc1pBRqaLY5755PeQZbp3o8KbJEM7YsC9mIBeQVsOkSKkGS30bg==
+workbox-google-analytics@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.1.tgz#685224d439c1e7a943f8241d65e2a34ee95a4ba0"
+  integrity sha512-qZU46/h4dbionYT6Yk6iBkUwpiEzAfnO1W7KkI+AMmY7G9/gA03dQQ7rpTw8F4vWrG7ahTUGWDFv6fERtaw1BQ==
   dependencies:
-    workbox-background-sync "6.5.0"
-    workbox-core "6.5.0"
-    workbox-routing "6.5.0"
-    workbox-strategies "6.5.0"
+    workbox-background-sync "6.5.1"
+    workbox-core "6.5.1"
+    workbox-routing "6.5.1"
+    workbox-strategies "6.5.1"
 
-workbox-navigation-preload@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.0.tgz#3b73753a40e4d0cbae9520de232f2fc515f2c0f5"
-  integrity sha512-ktrRQzXJ0zFy0puOtCa49wE3BSBGUB8KRMot3tEieikCkSO0wMLmiCb9GwTVvNMJLl0THRlsdFoI93si04nTxA==
+workbox-navigation-preload@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.1.tgz#a244e3bdf99ce86da7210315ca1ba5aef3710825"
+  integrity sha512-aKrgAbn2IMgzTowTi/ZyKdQUcES2m++9aGtpxqsX7Gn9ovCY8zcssaMEAMMwrIeveij5HiWNBrmj6MWDHi+0rg==
   dependencies:
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-precaching@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.0.tgz#773d754b98f79cc13b646eaa7858e8b3ab740c37"
-  integrity sha512-IVLzgHx38T6LphJyEOltd7XAvpDi73p85uCT2ZtT1HHg9FAYC49a+5iHUVOnqye73fLW20eiAMFcnehGxz9RWg==
+workbox-precaching@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.1.tgz#177b6424f1e71e601b9c3d6864decad2655f9ff9"
+  integrity sha512-EzlPBxvmjGfE56YZzsT/vpVkpLG1XJhoplgXa5RPyVWLUL1LbwEAxhkrENElSS/R9tgiTw80IFwysidfUqLihg==
   dependencies:
-    workbox-core "6.5.0"
-    workbox-routing "6.5.0"
-    workbox-strategies "6.5.0"
+    workbox-core "6.5.1"
+    workbox-routing "6.5.1"
+    workbox-strategies "6.5.1"
 
-workbox-range-requests@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.0.tgz#f36006f11aa86736ff815d200d0a5baf0e66c66e"
-  integrity sha512-+qTELdGZE5rOjuv+ifFrfRDN8Uvzpbm5Fal7qSUqB1V1DLCMxPwHCj6mWwQBRKBpW7G09kAwewH7zA3Asjkf/Q==
+workbox-range-requests@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.1.tgz#f40f84aa8765940543eba16131d02f12b38e2fdc"
+  integrity sha512-57Da/qRbd9v33YlHX0rlSUVFmE4THCjKqwkmfhY3tNLnSKN2L5YBS3qhWeDO0IrMNgUj+rGve2moKYXeUqQt4A==
   dependencies:
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-recipes@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.0.tgz#8400fbb515ac14e15043f13197a37e971e4ed04f"
-  integrity sha512-7hWZAIcXmvr31NwYSWaQIrnThCH/Dx9+eYv/YdkpUeWIXRiHRkYvP1FdiHItbLSjL4Y6K7cy2Y9y5lGCkgaE4w==
+workbox-recipes@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.1.tgz#d2fb21743677cc3ca9e1fc9e3b68f0d1587df205"
+  integrity sha512-DGsyKygHggcGPQpWafC/Nmbm1Ny3sB2vE9r//3UbeidXiQ+pLF14KEG1/0NNGRaY+lfOXOagq6d1H7SC8KA+rA==
   dependencies:
-    workbox-cacheable-response "6.5.0"
-    workbox-core "6.5.0"
-    workbox-expiration "6.5.0"
-    workbox-precaching "6.5.0"
-    workbox-routing "6.5.0"
-    workbox-strategies "6.5.0"
+    workbox-cacheable-response "6.5.1"
+    workbox-core "6.5.1"
+    workbox-expiration "6.5.1"
+    workbox-precaching "6.5.1"
+    workbox-routing "6.5.1"
+    workbox-strategies "6.5.1"
 
-workbox-routing@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.0.tgz#cbc085a74622d35d599f0b5352d2b46e9b2e7ba8"
-  integrity sha512-w1A9OVa/yYStu9ds0Dj+TC6zOAoskKlczf+wZI5mrM9nFCt/KOMQiFp1/41DMFPrrN/8KlZTS3Cel/Ttutw93Q==
+workbox-routing@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.1.tgz#5488795ae850fe3ae435241143b54ff25ab0db70"
+  integrity sha512-yAAncdTwanvlR8KPjubyvFKeAok8ZcIws6UKxvIAg0I+wsf7UYi93DXNuZr6RBSQrByrN6HkCyjuhmk8P63+PA==
   dependencies:
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-strategies@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.0.tgz#40269f7bd8b3160b42f06fa027230370a8b6f981"
-  integrity sha512-Ngnwo+tfGw4uKSlTz3h1fYKb/lCV7SDI/dtTb8VaJzRl0N9XssloDGYERBmF6BN/DV/x3bnRsshfobnKI/3z0g==
+workbox-strategies@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.1.tgz#51cabbddad5a1956eb9d51cf6ce01ab0a6372756"
+  integrity sha512-JNaTXPy8wXzKkr+6za7/eJX9opoZk7UgY261I2kPxl80XQD8lMjz0vo9EOcBwvD72v3ZhGJbW84ZaDwFEhFvWA==
   dependencies:
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
-workbox-streams@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.0.tgz#8c2fd0af9b8e1a25f865ff254c44f6554a248ce1"
-  integrity sha512-ZbeaZINkju4x45P9DFyRbOYInE+dyNAJIelflz4f9AOAdm+zZUJCooU4MdfsedVhHiTIA6pCD/3jCmW1XbvlbA==
+workbox-streams@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.1.tgz#12036817385fa4449a86a3ef77fce1cb00ecad9f"
+  integrity sha512-7jaTWm6HRGJ/ewECnhb+UgjTT50R42E0/uNCC4eTKQwnLO/NzNGjoXTdQgFjo4zteR+L/K6AtFAiYKH3ZJbAYw==
   dependencies:
-    workbox-core "6.5.0"
-    workbox-routing "6.5.0"
+    workbox-core "6.5.1"
+    workbox-routing "6.5.1"
 
-workbox-sw@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.0.tgz#19b47d72f598fd515fe32d2551d67bdb104434cb"
-  integrity sha512-uPGJ9Yost4yabnCko/IuhouquoQKrWOEqLq7L/xVYtltWe4+J8Hw8iPCVtxvXQ26hffd7MaFWUAN83j2ZWbxRg==
+workbox-sw@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.1.tgz#f9256b40f0a7e94656ccd06f127ba19a92cd23c5"
+  integrity sha512-hVrQa19yo9wzN1fQQ/h2JlkzFpkuH2qzYT2/rk7CLaWt6tLnTJVFCNHlGRRPhytZSf++LoIy7zThT714sowT/Q==
 
-workbox-webpack-plugin@^6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.0.tgz#13efad7ebbe672db6e1e6b7ebf58093b76bc0cb0"
-  integrity sha512-wy4uCBJELNfJVf2b4Tg3mjJQySq/aReWv4Q1RxQweJkY9ihq7DOGA3wLlXvoauek+MX/SuQfS3it+eXIfHKjvg==
+workbox-webpack-plugin@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.1.tgz#da88b4b6d8eff855958f0e7ebb7aa3eea50a8282"
+  integrity sha512-SHtlQBpKruI16CAYhICDMkgjXE2fH5Yp+D+1UmBfRVhByZYzusVOykvnPm8ObJb9d/tXgn9yoppoxafFS7D4vQ==
   dependencies:
     fast-json-stable-stringify "^2.1.0"
     pretty-bytes "^5.4.1"
     upath "^1.2.0"
     webpack-sources "^1.4.3"
-    workbox-build "6.5.0"
+    workbox-build "6.5.1"
 
-workbox-window@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.0.tgz#7cc3bf4d5c7e7e0b4da579bee9e8df8bd9ba2718"
-  integrity sha512-DOrhiTnWup/CsNstO2uvfdKM4kdStgHd31xGGvBcoCE3Are3DRcy5s3zz3PedcAR1AKskQj3BXz0UhzQiOq8nA==
+workbox-window@6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.1.tgz#7b5ca29467b1da45dc9e2b5a1b89159d3eb9957a"
+  integrity sha512-oRlun9u7b7YEjo2fIDBqJkU2hXtrEljXcOytRhfeQRbqXxjUOpFgXSGRSAkmDx1MlKUNOSbr+zfi8h5n7In3yA==
   dependencies:
     "@types/trusted-types" "^2.0.2"
-    workbox-core "6.5.0"
+    workbox-core "6.5.1"
 
 wrap-ansi@^6.2.0:
   version "6.2.0"