perf: 时区设置一次

src/views/Conversations/Online/LocalTimeClock.jsx

@@ -2,44 +2,47 @@ import { useEffect, useState } from 'react';
 import { Typography, Select } from 'antd';
 import ct from 'countries-and-timezones';
 
-const LocalTimeClock = ({ region, ...props }) => {
+const LocalTimeClock = ({ region, timezone, ...props }) => {
   const [countryTimezones, setCountryTimezones] = useState([]);
-  useEffect(() => {
-    const _countryTimezones = Object.values(ct.getTimezonesForCountry(region || 'CN')).map((tz) => {
-      const date = new Date();
-      const options = { timeZone: tz.name, timeZoneName: 'short' };
-      const shortName = date.toLocaleTimeString('en-US', options).split(' ')[2];
-      return { ...tz, fullName: `${tz.name} (${shortName})`, shortName };
-    });
-    // console.log(_countryTimezones);
-    setCountryTimezones(_countryTimezones);
+  const [timezoneP, setTimezoneP] = useState(timezone);
+  const [customerDateTime, setCustomerDateTime] = useState();
+  console.log(timezone, timezoneP);
 
+  useEffect(() => {
+    if (timezone) {
+      setTimezoneP(timezone);
+    } else {
+      const _countryTimezones = Object.values(ct.getTimezonesForCountry(region || 'CN')).map((tz) => {
+        const date = new Date();
+        const options = { timeZone: tz.name, timeZoneName: 'short' };
+        const shortName = date.toLocaleTimeString('en-US', options).split(' ')[2];
+        return { ...tz, fullName: `${tz.name} (${shortName})`, shortName };
+      });
+      // console.log(_countryTimezones);
+      setCountryTimezones(_countryTimezones);
+      setTimezoneP(_countryTimezones[0].name);
+    }
     return () => {};
-  }, [region]);
-
-
-  const [timezone, setTimezone] = useState(countryTimezones?.[0]?.name || ''); // countryTimezones?.[0]?.name || ''
-
-  const [customerDateTime, setCustomerDateTime] = useState();
+  }, [region, timezone]);
 
   useEffect(() => {
     const interval = setInterval(() => {
       // const date = new Date();
       const options = {
-        timeZone: timezone,
+        timeZone: timezoneP,
         timeZoneName: 'short',
         hour12: false,
-        month: 'numeric',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
       };
       // const formatter = new Intl.DateTimeFormat('en-US', options);
       // setCustomerDateTime(formatter.format(date));
       setCustomerDateTime(new Date().toLocaleTimeString('cn-ZH', options));
     }, 1000);
     return () => clearInterval(interval);
-  }, [timezone]);
+  }, [timezoneP]);
 
   return region ? (
     <>
@@ -52,7 +55,7 @@ const LocalTimeClock = ({ region, ...props }) => {
           dropdownStyle={{ width: 250 }}
           variant='borderless'
           onSelect={(value) => {
-            setTimezone(value);
+            setTimezoneP(value);
             // setOrderPropValue(currentOrder, 'orderlabel', value)
             //   .then(() => {
             //     message.success('设置成功')
@@ -66,13 +69,13 @@ const LocalTimeClock = ({ region, ...props }) => {
             //     })
             //   })
           }}
-          value={timezone}
+          value={timezoneP}
           options={countryTimezones}
           fieldNames={{ label: 'fullName', value: 'name' }}
         />
       ) : (
         <>
-          <Typography.Text>{timezone}</Typography.Text>
+          {/* <Typography.Text>{timezoneP}</Typography.Text> */}
         </>
       )}
       <Typography.Text>⏰{customerDateTime}</Typography.Text>

src/views/Conversations/Online/MessagesHeader.jsx

@@ -43,7 +43,7 @@ const MessagesHeader = () => {
                   <>
                   <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
                   {/* todo: regionCode */}
-                  <LocalTimeClock region={'US'} />
+                  <LocalTimeClock region={'US'} timezone={'America/New_York'} />
                   </>
                 ) : (
                   <Typography.Text strong type='danger'>