From 73a60a0c8192bb86a70fbe638c2f3b5dddb9747a Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Fri, 8 Mar 2024 21:18:52 +0800
Subject: [PATCH] fix(costcenter):fix rerender when select date
---
.../src/components/billing/InOutTabPanel.tsx | 6 +--
.../components/billing/RechargeTabPanel.tsx | 9 +++--
.../components/billing/selectDateRange.tsx | 40 ++++++++-----------
.../providers/costcenter/src/pages/_app.tsx | 10 -----
.../costcenter/src/pages/billing/index.tsx | 15 +------
5 files changed, 27 insertions(+), 53 deletions(-)
diff --git a/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx b/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx
index 429250eefe5..a122becc260 100644
--- a/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx
+++ b/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx
@@ -1,5 +1,5 @@
import useOverviewStore from '@/stores/overview';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
import { BillingData, BillingSpec, BillingType } from '@/types';
import { useQuery } from '@tanstack/react-query';
import { formatISO } from 'date-fns';
@@ -53,7 +53,7 @@ export default function InOutTabPanel({ namespace }: { namespace: string }) {
onSuccess(data) {
const totalPage = data.data.status.pageLength;
if (totalPage === 0) {
- // 搜索时的bug
+ // search reset
setTotalPage(1);
setTotalItem(1);
} else {
@@ -80,7 +80,7 @@ export default function InOutTabPanel({ namespace }: { namespace: string }) {
{t('Transaction Time')}
-
+ {}
diff --git a/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx b/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx
index 5bc5eb544a5..4bd8cfc6a1d 100644
--- a/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx
+++ b/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx
@@ -27,8 +27,7 @@ import Amount from '@/components/billing/AmountTableHeader';
import SearchBox from '@/components/billing/SearchBox';
export default function RechargeTabPanel() {
- const startTime = useOverviewStore((state) => state.startTime);
- const endTime = useOverviewStore((state) => state.endTime);
+ const { startTime, endTime } = useOverviewStore();
const { data, isFetching, isSuccess } = useQuery(
['billing', 'in', { startTime, endTime }],
() => {
@@ -44,7 +43,10 @@ export default function RechargeTabPanel() {
}
);
const { t } = useTranslation();
- const tableResult = data?.data?.payment || [];
+ const tableResult = useMemo(() => {
+ if (data?.data?.payment) return data.data.payment;
+ else return [];
+ }, [data?.data?.payment]);
const currency = useEnvStore((s) => s.currency);
const columns = useMemo(() => {
const columnHelper = createColumnHelper();
@@ -112,6 +114,7 @@ export default function RechargeTabPanel() {
columns,
getCoreRowModel: getCoreRowModel()
});
+
useEffect(() => {
table.resetPageIndex(true);
}, [startTime, endTime]);
diff --git a/frontend/providers/costcenter/src/components/billing/selectDateRange.tsx b/frontend/providers/costcenter/src/components/billing/selectDateRange.tsx
index 34b19cdbc9a..cd3b7f4e1a1 100644
--- a/frontend/providers/costcenter/src/components/billing/selectDateRange.tsx
+++ b/frontend/providers/costcenter/src/components/billing/selectDateRange.tsx
@@ -11,14 +11,13 @@ import {
Box
} from '@chakra-ui/react';
import { format, parse, isValid, isAfter, isBefore, endOfDay, startOfDay, addDays } from 'date-fns';
-import { useState, ChangeEventHandler } from 'react';
+import { useState, ChangeEventHandler, useCallback, useEffect } from 'react';
import { DateRange, SelectRangeEventHandler, DayPicker } from 'react-day-picker';
+import { useShallow } from 'zustand/react/shallow';
+import { subscribeWithSelector } from 'zustand/middleware';
export default function SelectRange({ isDisabled }: { isDisabled: boolean | undefined }) {
- let { startTime, endTime } = useOverviewStore();
- const setStartTime = useOverviewStore((state) => state.setStartTime);
- const setEndTime = useOverviewStore((state) => state.setEndTime);
-
+ const { setStartTime, setEndTime, startTime, endTime } = useOverviewStore();
const initState = { from: startTime, to: endTime };
const [selectedRange, setSelectedRange] = useState(initState);
const [fromValue, setFromValue] = useState(format(initState.from, 'y-MM-dd'));
@@ -68,9 +67,9 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
if (range) {
let { from, to } = range;
if (inputState === 0) {
- // 输入from
+ // from
if (from === selectedRange?.from) {
- // 组件动了to
+ // when 'to' is changed
from = to;
} else {
to = from;
@@ -94,7 +93,7 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
setToValue(from ? format(from, 'y-MM-dd') : '');
}
} else {
- // 选了第一个日期，组件默认的行为是取消选择
+ // default is cancel
if (fromValue && selectedRange?.from) {
setToValue(fromValue);
setSelectedRange({
@@ -111,10 +110,10 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
if (selectedRange?.to) {
if (from) {
if (!to) {
- // 证明直接重合
+ // proof 'to' = 'from'
to = from;
} else if (from === selectedRange?.from) {
- // 组件动了to
+ // when 'to' is changed
from = to;
to = selectedRange.to;
}
@@ -130,16 +129,15 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
}
};
const handleRangeSelectTo: SelectRangeEventHandler = (range: DateRange | undefined) => {
- console.log(range, selectedRange);
if (range) {
let { from, to } = range;
if (selectedRange?.from) {
if (to) {
if (!from) {
- // 证明直接重合
+ // proof 'to' = 'from'
from = to;
} else if (to === selectedRange?.to) {
- // 组件动了from
+ // when 'from' is changed
to = from;
from = selectedRange.from;
}
@@ -153,7 +151,7 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
}
}
} else {
- // 选了第一个日期，组件默认的行为是取消选择
+ // default is cancelgit
if (fromValue && selectedRange?.from) {
setToValue(fromValue);
setSelectedRange({
@@ -187,10 +185,7 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
value={fromValue}
minW="90px"
onChange={handleFromChange}
- onBlur={() => {
- selectedRange?.from && setStartTime(startOfDay(selectedRange.from));
- console.log(selectedRange?.from);
- }}
+ onBlur={onClose}
/>
@@ -199,7 +194,7 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
mode="range"
selected={selectedRange}
onSelect={handleRangeSelectFrom}
- defaultMonth={startTime}
+ defaultMonth={initState.from}
styles={{
day: {
borderRadius: 'unset',
@@ -221,10 +216,7 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
flex={1}
minW="90px"
onChange={handleToChange}
- onBlur={() => {
- selectedRange?.to && setEndTime(endOfDay(selectedRange.to));
- console.log(selectedRange?.to);
- }}
+ onBlur={onClose}
/>
@@ -233,7 +225,7 @@ export default function SelectRange({ isDisabled }: { isDisabled: boolean | unde
mode="range"
selected={selectedRange}
onSelect={handleRangeSelectTo}
- defaultMonth={endTime}
+ defaultMonth={initState.to}
styles={{
day: {
borderRadius: 'unset',
diff --git a/frontend/providers/costcenter/src/pages/_app.tsx b/frontend/providers/costcenter/src/pages/_app.tsx
index ec08b1e38f0..5a54c349b21 100644
--- a/frontend/providers/costcenter/src/pages/_app.tsx
+++ b/frontend/providers/costcenter/src/pages/_app.tsx
@@ -41,17 +41,7 @@ const App = ({ Component, pageProps }: AppProps) => {
const router = useRouter();
useEffect(() => {
const changeI18n = (data: { currentLanguage: string }) => {
- // setCookie('NEXT_LOCALE', data.currentLanguage, {
- // expires: 30,
- // sameSite: 'None',
- // secure: true
- // });
- console.log(data);
router.replace(router.basePath, router.asPath, { locale: data.currentLanguage });
- // router.replace(router.asPath,router.asPath, {
- // locale: data.currentLanguage
- // })
- // i18n?.changeLanguage(data.currentLanguage);
};
(async () => {
diff --git a/frontend/providers/costcenter/src/pages/billing/index.tsx b/frontend/providers/costcenter/src/pages/billing/index.tsx
index 6a4b7305d53..e98e5a47bc4 100644
--- a/frontend/providers/costcenter/src/pages/billing/index.tsx
+++ b/frontend/providers/costcenter/src/pages/billing/index.tsx
@@ -1,16 +1,5 @@
-import {
- Box,
- Flex,
- Heading,
- Img,
- Tab,
- TabList,
- TabPanel,
- TabPanels,
- Tabs,
- Text
-} from '@chakra-ui/react';
-import { useEffect, useRef, useState } from 'react';
+import { Flex, Heading, Img, Tab, TabList, TabPanels, Tabs } from '@chakra-ui/react';
+import { useState } from 'react';
import receipt_icon from '@/assert/receipt_long_black.svg';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';