chore: optimization of code

src/features/profile/components/userInformation/PhoneNumber.tsx

@@ -1,11 +1,11 @@
-import { useState, type ChangeEvent } from 'react';
-import { Box, Typography, Button, TextField, IconButton } from '@mui/material';
-import { Edit, Refresh, TickCircle } from 'iconsax-react';
+import { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CardContainer } from '@/components/CardContainer';
-import { CountDownTimer } from '@/components/CountDownTimer';
-import { Toast } from '@/components/Toast';
+import parsePhoneNumberFromString from 'libphonenumber-js';
 import { PageWrapper } from '../PageWrapper';
+import { CardContainer } from '@/components/CardContainer';
+import PhoneDisplay from './phoneNumber/PhoneDisplay';
+import PhoneEditForm from './phoneNumber/PhoneEditForm';
+import PhoneActionButtons from './phoneNumber/PhoneActionButtons';
 
 export function PhoneNumber() {
   const { t } = useTranslation('profileSetting');
@@ -18,10 +18,32 @@ export function PhoneNumber() {
   );
   const [isVerifying, setIsVerifying] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
-
   const [phones, setPhone] = useState([
     { phone: '09123456789', time: '۱ ماه پیش', withCode: '+989123456789' },
   ]);
+  const [countryCode, setCountryCode] = useState('+98');
+  const textFieldRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string>();
+  const [touched, setTouched] = useState<boolean>(false);
+  const inputError: boolean = touched && !!error;
+
+  const isPhoneValid = (code: string, phone: string) => {
+    const phoneNum = parsePhoneNumberFromString(code + phone);
+    return phoneNum && phoneNum.isValid();
+  };
+
+  const handleBlur = () => {
+    setTouched(true);
+    if (!phoneNumber) {
+      setError(t('settingForm.thisFieldIsRequired'));
+    }
+    if (!isPhoneValid(countryCode, phoneNumber)) {
+      setError(t('settingForm.phoneNumberIsInvalid'));
+    } else {
+      setError(undefined);
+    }
+  };
 
   const toggleEdit = () => {
     setIsEditing((prev) => {
@@ -37,16 +59,6 @@ export function PhoneNumber() {
     });
   };
 
-  const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.replace(/\D/g, '');
-    setPhoneNumber(value);
-  };
-
-  const handleVerificationCodeChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.replace(/\D/g, '');
-    setVerificationCode(value);
-  };
-
   const handleSendCode = () => {
     if (!phoneNumber) return;
     setButtonState('counting');
@@ -79,209 +91,39 @@ export function PhoneNumber() {
         subtitle={t('settingForm.descriptionPhoneNumber')}
         highlighted={isEditing}
         action={
-          <Box sx={{ display: 'flex', gap: 1 }}>
-            {isEditing && (
-              <Button
-                variant="text"
-                onClick={toggleEdit}
-                size="large"
-                sx={{
-                  color: 'primary.main',
-                  textTransform: 'none',
-                  width: '43px',
-                }}
-              >
-                {t('settingForm.rejectButton')}
-              </Button>
-            )}
-            <Button
-              onClick={toggleEdit}
-              size="large"
-              variant="outlined"
-              sx={{
-                textTransform: 'none',
-                border: '1px solid',
-                borderColor: 'primary.main',
-                borderRadius: '4px',
-                bgcolor: isEditing ? 'primary.main' : 'background.paper',
-                color: isEditing ? 'primary.contrastText' : 'primary.main',
-                width: { xs: '100%', sm: isEditing ? '85px' : '161px' },
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {isEditing
-                ? t('settingForm.saveButton')
-                : t('settingForm.editPhoneNumber')}
-            </Button>
-          </Box>
+          <PhoneActionButtons
+            isEditing={isEditing}
+            toggleEdit={toggleEdit}
+            t={t}
+          />
         }
       >
         {isEditing ? (
-          <Box sx={{ px: { xs: 2, sm: 4 }, bgcolor: 'background.paper' }}>
-            <Box sx={{ mb: 2 }}>
-              <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: 'wrap',
-                gap: 2,
-                alignItems: 'center',
-              }}
-            >
-              <TextField
-                name="phoneNumber"
-                label={t('settingForm.newPhoneNumber')}
-                type="tel"
-                value={phoneNumber}
-                onChange={handlePhoneNumberChange}
-                sx={{ flex: '1 1 240px', minWidth: 0 }}
-                placeholder="09123456789"
-                inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
-                InputProps={{
-                  endAdornment:
-                    buttonState === 'counting' ? (
-                      <IconButton
-                        size="small"
-                        onClick={() => {
-                          setButtonState('default');
-                          setPhoneNumber('');
-                        }}
-                        sx={{ mr: 1 }}
-                      >
-                        <Edit size="24" color="#64B5F6" />
-                      </IconButton>
-                    ) : null,
-                }}
-              />
-
-              {isVerified ? (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <TickCircle
-                    size="24"
-                    style={{ color: '#43A047' }}
-                    variant="Bold"
-                  />
-                  <Typography sx={{ color: 'success.main' }}>
-                    {t('settingForm.successButton')}
-                  </Typography>
-                </Box>
-              ) : (
-                <Button
-                  variant="text"
-                  onClick={handleSendCode}
-                  disabled={
-                    buttonState === 'counting' || phoneNumber.length === 0
-                  }
-                  sx={{
-                    textTransform: 'none',
-                    minWidth: { xs: '100%', sm: 170 },
-                    color: 'primary.main',
-                    height: 56,
-                  }}
-                >
-                  {buttonState === 'counting' ? (
-                    <CountDownTimer
-                      initialSeconds={60}
-                      onComplete={() => setButtonState('default')}
-                    />
-                  ) : (
-                    t('settingForm.verificationCodeButton')
-                  )}
-                </Button>
-              )}
-            </Box>
-
-            {buttonState === 'counting' && !isVerified && (
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: 2,
-                  mt: 2,
-                  alignItems: 'center',
-                }}
-              >
-                <TextField
-                  name="verificationCode"
-                  label={t('settingForm.verificationCode')}
-                  type="tel"
-                  value={verificationCode}
-                  onChange={handleVerificationCodeChange}
-                  sx={{ flex: '1 1 240px', minWidth: 0 }}
-                  placeholder={t('settingForm.verificationCode')}
-                  inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
-                />
-
-                <Button
-                  variant="contained"
-                  onClick={handleVerifyClick}
-                  disabled={isVerifying || verificationCode.length === 0}
-                  sx={{
-                    textTransform: 'none',
-                    minWidth: { xs: '100%', sm: 170 },
-                    bgcolor: 'primary.main',
-                    height: 56,
-                  }}
-                >
-                  {isVerifying ? (
-                    <Box
-                      component="span"
-                      sx={{
-                        display: 'flex',
-                        animation: 'spin 1s linear infinite',
-                        '@keyframes spin': {
-                          '0%': { transform: 'rotate(0deg)' },
-                          '100%': { transform: 'rotate(360deg)' },
-                        },
-                      }}
-                    >
-                      <Refresh size="20" color="white" />
-                    </Box>
-                  ) : (
-                    t('settingForm.checkCode')
-                  )}
-                </Button>
-              </Box>
-            )}
-
-            <Toast
-              color="success"
-              open={showToast}
-              onClose={() => setShowToast(false)}
-            >
-              {t('settingForm.successfulChangePhone')}
-            </Toast>
-          </Box>
+          <PhoneEditForm
+            phoneNumber={phoneNumber}
+            setPhoneNumber={setPhoneNumber}
+            countryCode={countryCode}
+            setCountryCode={setCountryCode}
+            verificationCode={verificationCode}
+            setVerificationCode={setVerificationCode}
+            isVerified={isVerified}
+            isVerifying={isVerifying}
+            buttonState={buttonState}
+            setButtonState={setButtonState}
+            handleSendCode={handleSendCode}
+            handleVerifyClick={handleVerifyClick}
+            error={error}
+            inputError={inputError}
+            handleBlur={handleBlur}
+            textFieldRef={textFieldRef as React.RefObject<HTMLDivElement>}
+            inputRef={inputRef as React.RefObject<HTMLInputElement>}
+            phones={phones}
+            showToast={showToast}
+            setShowToast={setShowToast}
+            t={t}
+          />
         ) : (
-          <Box sx={{ px: { xs: 2, sm: 4 } }}>
-            {phones.map((item, index) => (
-              <Box
-                key={index}
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'center',
-                  py: 2,
-                  width: '100%',
-                }}
-              >
-                <Typography variant="h6" color="text.primary">
-                  {item.phone}
-                </Typography>
-                <Typography variant="caption" color="text.secondary">
-                  {item.time}
-                </Typography>
-              </Box>
-            ))}
-          </Box>
+          <PhoneDisplay phones={phones} />
         )}
       </CardContainer>
     </PageWrapper>