labring · zzjin · Mar 8, 2024 · Mar 8, 2024
diff --git 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 }) {
           <Text fontSize={'12px'} mr={'12px'} width={['60px', '60px', 'auto', 'auto']}>
             {t('Transaction Time')}
           </Text>
-          <SelectRange isDisabled={isFetching}></SelectRange>
+          {<SelectRange isDisabled={isFetching}></SelectRange>}
         </Flex>
         <SearchBox isDisabled={isFetching} setOrderID={setOrderID} />
       </Flex>

diff --git 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<RechargeBillingItem>();
@@ -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
@@ -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<DateRange | undefined>(initState);
   const [fromValue, setFromValue] = useState<string>(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}
             />
           </Button>
         </PopoverTrigger>
@@ -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}
             />
           </Button>
         </PopoverTrigger>
@@ -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
@@ -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
@@ -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';