fix: remove repetitive quota refresh interval

zmh-program · Apr 29, 2024 · 5214ea5 · 5214ea5
1 parent b879191
commit 5214ea5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/app/src/components/home/SideBar.tsx b/app/src/components/home/SideBar.tsx
@@ -1,14 +1,14 @@
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
-import { selectAuthenticated, selectUsername } from "@/store/auth.ts";
+import auth, { selectAuthenticated, selectUsername } from "@/store/auth.ts";
 import {
   closeMarket,
   selectCurrent,
   selectHistory,
   selectMaskItem,
   useConversationActions,
 } from "@/store/chat.ts";
-import React, { useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { ConversationInstance } from "@/api/types.tsx";
 import { useToast } from "@/components/ui/use-toast.ts";
 import { extractMessage, filterMessage } from "@/utils/processor.ts";
@@ -46,6 +46,9 @@ import { goAuth } from "@/utils/app.ts";
 import Avatar from "@/components/Avatar.tsx";
 import { cn } from "@/components/ui/lib/utils.ts";
 import { getNumberMemory } from "@/utils/memory.ts";
+import { refreshSubscription } from "@/store/subscription.ts";
+import { refreshQuota } from "@/store/quota.ts";
+import { AppDispatch } from "@/store";
 
 type Operation = {
   target: ConversationInstance | null;
@@ -329,11 +332,25 @@ function SidebarConversationList({
 
 function SidebarMenu() {
   const username = useSelector(selectUsername);
+  const dispatch: AppDispatch = useDispatch();
+  const updateQuota = useCallback(() => {
+    dispatch(refreshQuota()); // 调用 refreshQuota 更新配额
+  }, [dispatch]);
+  const handleRefreshSubscription = async () => {
+    if (!auth) {
+      return;
+    }
+    await refreshSubscription(dispatch);
+  };
   return (
     <div className={`sidebar-menu`}>
       <Separator orientation={`horizontal`} className={`mb-2`} />
       <MenuBar className={`menu-bar`}>
-        <Button variant={`ghost`} className={`sidebar-wrapper`}>
+        <Button variant={`ghost`} className={`sidebar-wrapper`}
+                onClick={() => {
+                  updateQuota();
+                  handleRefreshSubscription();
+                }}>
           <Avatar username={username} />
           <span className={`username`}>{username}</span>
           <MoreHorizontal className={`h-4 w-4`} />

diff --git a/app/src/dialogs/QuotaDialog.tsx b/app/src/dialogs/QuotaDialog.tsx
@@ -98,10 +98,7 @@ function QuotaDialog() {
   const dispatch = useDispatch();
   useEffectAsync(async () => {
     if (!auth) return;
-    const task = setInterval(() => refreshQuota(dispatch), 5000);
-    await refreshQuota(dispatch);
-
-    return () => clearInterval(task);
+    await refreshQuota();
   }, [auth]);
 
   return (
@@ -322,7 +319,7 @@ function QuotaDialog() {
                               }),
                             });
                             setRedeem("");
-                            await refreshQuota(dispatch);
+                            await refreshQuota();
                           } else {
                             toast({
                               title: t("buy.exchange-failed"),

diff --git a/app/src/dialogs/SubscriptionDialog.tsx b/app/src/dialogs/SubscriptionDialog.tsx
@@ -115,10 +115,7 @@ function SubscriptionDialog() {
   const dispatch = useDispatch();
   useEffectAsync(async () => {
     if (!auth) return;
-    const task = setInterval(() => refreshSubscription(dispatch), 10000);
     await refreshSubscription(dispatch);
-
-    return () => clearInterval(task);
   }, [auth]);
 
   return (

diff --git a/app/src/store/quota.ts b/app/src/store/quota.ts
@@ -1,5 +1,5 @@
-import { createSlice } from "@reduxjs/toolkit";
-import { AppDispatch, RootState } from "./index.ts";
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { RootState } from "./index.ts";
 import { getQuota } from "@/api/quota.ts";
 
 export const quotaSlice = createSlice({
@@ -49,7 +49,10 @@ export const quotaValueSelector = (state: RootState): number =>
   state.quota.quota;
 export const quotaSelector = (state: RootState): number => state.quota.quota;
 
-export const refreshQuota = async (dispatch: AppDispatch) => {
-  const quota = await getQuota();
-  dispatch(setQuota(quota));
-};
+export const refreshQuota = createAsyncThunk(
+  'quota/refreshQuota',
+  async (_, { dispatch }) => {
+    const quota = await getQuota();
+    dispatch(setQuota(quota));
+  }
+);