fix: dashboard api calls, multi profile fetch

src/features/profile/components/userInformation/phoneNumber/PhoneEditForm.tsx

@@ -12,7 +12,8 @@ import { CountDownTimer } from '@/components/CountDownTimer';
 import { CountryCodeSelector } from '../../CountryCodeSelector';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PhoneEditFormProps } from '@/features/profile/types/settingsType';
-import { useState } from 'react';
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export default function PhoneEditForm({
   phoneNumber,
@@ -23,63 +24,51 @@ export default function PhoneEditForm({
   setVerificationCode,
   isVerified,
   isVerifying,
+  isSendingCode,
   buttonState,
   setButtonState,
   handleSendCode,
   handleVerifyClick,
-  error,
-  inputError,
   handleBlur,
-  textFieldRef,
-  inputRef,
   phones,
-  t,
+  phoneNumberError,
+  verificationCodeError,
 }: PhoneEditFormProps) {
-  const isValidPhoneNumber = (phone: string) => {
-    const digitsOnly = phone.replace(/\D/g, '');
-    return digitsOnly.length >= 8 && digitsOnly.length <= 15;
-  };
+  const { t } = useTranslation('setting');
 
-  const [isSending, setIsSending] = useState(false);
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <>
-      <Box sx={{ width: '100%' }}>
-        <Box sx={{ mb: 2, mx: 6 }}>
-          <Typography variant="h6">
-            {t('settingForm.editPhoneNumber')}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
-            {t('settingForm.verb')}
-          </Typography>
-        </Box>
+    <Box sx={{ px: { sm: 4, xs: 2 }, my: 4 }}>
+      <Box sx={{ mb: 4 }}>
+        <Typography variant="h6">{t('settingForm.editPhoneNumber')}</Typography>
+        <Typography variant="body2" color="text.secondary">
+          {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)})
+          {t('settingForm.verb')}
+        </Typography>
       </Box>
-
       <Box
         sx={{
           display: 'flex',
-          flexWrap: 'nowrap',
           gap: 2,
           alignItems: 'center',
-          mx: 6,
           flexDirection: { xs: 'column', sm: 'row' },
-          mb: 1,
         }}
       >
         <TextField
+          fullWidth
           name="phoneNumber"
           label={t('settingForm.newPhoneNumber')}
           type="tel"
           value={phoneNumber}
           ref={textFieldRef}
           inputRef={inputRef}
-          onBlur={handleBlur}
-          error={inputError}
-          helperText={inputError ? error : ''}
+          onBlur={() => handleBlur('phoneNumber')}
+          error={!!phoneNumberError}
+          helperText={phoneNumberError}
           onChange={(e) => setPhoneNumber(e.target.value)}
           placeholder="09123456789"
-          sx={{ width: { xs: '100%', sm: 474 } }}
           InputProps={{
             endAdornment:
               buttonState === 'counting' ? (
@@ -127,26 +116,14 @@ export default function PhoneEditForm({
         ) : (
           <Button
             variant="text"
-            onClick={async () => {
-              if (isValidPhoneNumber(phoneNumber)) {
-                setIsSending(true);
-                try {
-                  await handleSendCode();
-                } finally {
-                  setIsSending(false);
-                }
-              }
-            }}
+            loading={isSendingCode}
+            onClick={handleSendCode}
             sx={{
-              whiteSpace: 'nowrap',
               color: 'primary.main',
-              textTransform: 'none',
-              width: { xs: '100%', sm: 210 },
+              width: { xs: '100%', sm: 208 },
             }}
           >
-            {isSending ? (
-              <CircularProgress size={20} />
-            ) : buttonState === 'counting' ? (
+            {buttonState === 'counting' ? (
               <CountDownTimer
                 initialSeconds={60}
                 onComplete={() => setButtonState('default')}
@@ -157,28 +134,29 @@ export default function PhoneEditForm({
           </Button>
         )}
       </Box>
-
+      {/* buttonState === 'counting' && !isVerified && */}
       {buttonState === 'counting' && !isVerified && (
         <Box
           sx={{
             display: 'flex',
-            flexWrap: 'nowrap',
             gap: 2,
             alignItems: 'center',
-            mx: 6,
             flexDirection: { xs: 'column', sm: 'row' },
             mb: 1,
           }}
         >
           <TextField
+            fullWidth
             name="verificationCode"
             label={t('settingForm.verificationCode')}
             type="tel"
             value={verificationCode}
+            error={!!verificationCodeError}
+            helperText={verificationCodeError}
+            onBlur={() => handleBlur('verificationCode')}
             onChange={(e) =>
               setVerificationCode(e.target.value.replace(/\D/g, ''))
             }
-            sx={{ width: { xs: '100%', sm: 474 } }}
             placeholder={t('settingForm.verificationCode')}
           />
 
@@ -187,9 +165,8 @@ export default function PhoneEditForm({
             onClick={handleVerifyClick}
             disabled={isVerifying || verificationCode.length === 0}
             sx={{
-              width: { xs: '100%', sm: 210 },
               bgcolor: 'primary.main',
-              textTransform: 'none',
+              width: { xs: '100%', sm: 200 },
             }}
           >
             {isVerifying ? (
@@ -200,6 +177,6 @@ export default function PhoneEditForm({
           </Button>
         </Box>
       )}
-    </>
+    </Box>
   );
 }