feat: message reply

src/app/config.js

@@ -11,6 +11,7 @@ export const googleClientID =
 // "840319286941-6ds7lbvk55eq8mjortf68cb2ll65lprt.apps.googleusercontent.com";
 export const tokenHeader = "X-API-Key";
 export const KEY_TOKEN = "RUSTCHAT_TOKEN";
+export const KEY_EXPIRE = "RUSTCHAT_TOKEN_EXPIRE";
 export const KEY_REFRESH_TOKEN = "RUSTCHAT_REFRESH_TOKEN";
 export const KEY_UID = "RUSTCHAT_CURR_UID";
 

src/app/services/base.query.js

@@ -1,5 +1,6 @@
 import { fetchBaseQuery } from "@reduxjs/toolkit/query";
 import toast from "react-hot-toast";
+import dayjs from "dayjs";
 import { updateToken, clearAuthData } from "../slices/auth.data";
 import BASE_URL, { tokenHeader } from "../config";
 const whiteList = ["login", "checkInviteTokenValid", "getServer", "getOpenid"];
@@ -8,18 +9,54 @@ const baseQuery = fetchBaseQuery({
   prepareHeaders: (headers, { getState, endpoint }) => {
     console.log("req", endpoint);
     const { token } = getState().authData;
-    if (token && !whiteList.includes(endpoint)) {
+    const noHeaderList = [...whiteList, "renew"];
+    if (token && !noHeaderList.includes(endpoint)) {
       headers.set(tokenHeader, token);
     }
-    // 发送channel msg (临时举措)
-    // if (endpoint == "sendChannelMsg") {
-    //   headers.set("Content-Type", "text/plain");
-    // }
     return headers;
   },
 });
-const baseQueryWithReauth = async (args, api, extraOptions) => {
-  let result = await baseQuery(args, api, extraOptions);
+let waitingForRenew = null;
+const baseQueryWithTokenCheck = async (args, api, extraOptions) => {
+  if (waitingForRenew) {
+    await waitingForRenew;
+  }
+  // 先检查token是否过期，过期则renew
+  const {
+    token,
+    refreshToken,
+    expireTime = new Date().getTime(),
+  } = api.getState().authData;
+  let result = null;
+  if (
+    !whiteList.includes(api.endpoint) &&
+    dayjs().isAfter(new Date(expireTime - 20 * 1000))
+  ) {
+    // 快过期了，renew
+    waitingForRenew = baseQuery(
+      {
+        url: "/token/renew",
+        method: "POST",
+        body: {
+          token,
+          refresh_token: refreshToken,
+        },
+      },
+      api,
+      extraOptions
+    );
+    result = await waitingForRenew;
+    waitingForRenew = null;
+    // console.log({ refreshResult });
+    if (result.data) {
+      // store the new token
+      api.dispatch(updateToken(result.data));
+      // retry the initial query
+      result = await baseQuery(args, api, extraOptions);
+    }
+  } else {
+    result = await baseQuery(args, api, extraOptions);
+  }
   if (result?.error) {
     console.log("api error", result.error.originalStatus, api.endpoint);
     switch (result.error.originalStatus || result.error.status) {
@@ -40,35 +77,14 @@ const baseQueryWithReauth = async (args, api, extraOptions) => {
             api.dispatch(clearAuthData());
             location.href = "/#/login";
             return;
-          }
-          // try to get a new token with refreshToken
-          const { token, refreshToken } = api.getState().authData;
-          const refreshResult = await baseQuery(
-            {
-              url: "/token/renew",
-              method: "POST",
-              body: {
-                token,
-                refresh_token: refreshToken,
-              },
-            },
-            api,
-            extraOptions
-          );
-          console.log({ refreshResult });
-          if (refreshResult.data) {
-            // store the new token
-            api.dispatch(updateToken(refreshResult.data));
-            // retry the initial query
-            result = await baseQuery(args, api, extraOptions);
           } else {
-            toast.error("token expired, please login again");
-            api.dispatch(clearAuthData());
+            toast.error("Not Authenticated");
           }
         }
-
         break;
-
+      case 403:
+        toast.error("Request Not Allowed");
+        break;
       default:
         break;
     }
@@ -76,4 +92,4 @@ const baseQueryWithReauth = async (args, api, extraOptions) => {
   return result;
 };
 
-export default baseQueryWithReauth;
+export default baseQueryWithTokenCheck;

src/app/services/message.js

@@ -31,10 +31,13 @@ export const messageApi = createApi({
       }),
     }),
     replyMessage: builder.mutation({
-      query: (mid, data) => ({
+      query: ({ mid, content, type = "text" }) => ({
+        headers: {
+          "content-type": ContentTypes[type],
+        },
         url: `/message/${mid}/reply`,
         method: "POST",
-        body: data,
+        body: content,
       }),
     }),
   }),

src/app/slices/auth.data.js

@@ -1,9 +1,15 @@
 import { createSlice } from "@reduxjs/toolkit";
-import BASE_URL, { KEY_REFRESH_TOKEN, KEY_TOKEN, KEY_UID } from "../config";
+import BASE_URL, {
+  KEY_REFRESH_TOKEN,
+  KEY_TOKEN,
+  KEY_UID,
+  KEY_EXPIRE,
+} from "../config";
 import { getNonNullValues } from "../../common/utils";
 const initialState = {
   user: null,
   token: localStorage.getItem(KEY_TOKEN),
+  expireTime: localStorage.getItem(KEY_EXPIRE) || new Date().getTime(),
   refreshToken: localStorage.getItem(KEY_REFRESH_TOKEN),
 };
 const authDataSlice = createSlice({
@@ -11,11 +17,16 @@ const authDataSlice = createSlice({
   initialState,
   reducers: {
     setAuthData(state, action) {
-      const { user, token, refresh_token } = action.payload;
+      const { user, token, refresh_token, expired_in = 0 } = action.payload;
       state.user = user;
       state.token = token;
       state.refreshToken = refresh_token;
+      // 当前时间往后推expire时长
+      console.log("expire", expired_in);
+      const expireTime = new Date().getTime() + Number(expired_in) * 1000;
+      state.expireTime = expireTime;
       // set local data
+      localStorage.setItem(KEY_EXPIRE, expireTime);
       localStorage.setItem(KEY_TOKEN, token);
       localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
       localStorage.setItem(KEY_UID, user.uid);
@@ -51,15 +62,19 @@ const authDataSlice = createSlice({
       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);
     },
     updateToken(state, action) {
-      const { token, refresh_token } = action.payload;
+      const { token, refresh_token, expired_in } = action.payload;
       console.log("refresh token");
       state.token = token;
+      const et = new Date().getTime() + Number(expired_in) * 1000;
+      state.expireTime = et;
       state.refreshToken = refresh_token;
+      localStorage.setItem(KEY_EXPIRE, et);
       localStorage.setItem(KEY_TOKEN, token);
       localStorage.setItem(KEY_REFRESH_TOKEN, refresh_token);
     },

src/app/slices/message.handler.js

@@ -33,11 +33,16 @@ export const msgAdd = (state, payload) => {
     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];
     // 如果存在，并且新消息和缓存消息不一样，则替换掉，并且改为已读（可能有问题）

src/app/slices/message.pending.js

@@ -1,6 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
+  reply: {},
   user: {},
   channel: {},
 };
@@ -18,6 +19,17 @@ const pendingMessageSlice = createSlice({
       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);
@@ -29,5 +41,7 @@ export const {
   clearPendingMsg,
   addPendingMessage,
   removePendingMessage,
+  removeReplyMessage,
+  setReplyMessage,
 } = pendingMessageSlice.actions;
 export default pendingMessageSlice.reducer;