fix: update useApi to return api resualt as promise in addition to set in data

2025-08-16 13:43:55 +03:30
parent f61b9ee14b
commit bbe47780e4
11 changed files with 59 additions and 97 deletions
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -1,21 +0,0 @@
-# Node.js with React
-# Build a Node.js project that uses React.
-# Add steps that analyze code, save build artifacts, deploy, and more:
-# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
-
-trigger:
-  - develop
-
-pool:
-  vmImage: ubuntu-latest
-
-steps:
-  - task: NodeTool@0
-    inputs:
-      versionSpec: '20.x'
-    displayName: 'Install Node.js'
-
-  - script: |
-      npm install
-      npm run build
-    displayName: 'npm install and build'
--- a/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx
+++ b/src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx
@@ -53,11 +53,8 @@ export const EnterPasswordForm = ({
    useApi(sendSmsOtp);
  const { loading: emailResendLoading, execute: emailResendCall } =
    useApi(sendEmailOtp);
-  const {
-    data: loginWithPassResult,
-    loading: loginWithPassLoading,
-    execute: loginWithPassCall,
-  } = useApi(loginWithPassword);
+  const { loading: loginWithPassLoading, execute: loginWithPassCall } =
+    useApi(loginWithPassword);

  const handleBlur = () => {
    setInputTouched(true);
@@ -74,12 +71,12 @@ export const EnterPasswordForm = ({
        password: passValue,
        returnUrl: authReturnUrl,
      };
-      await loginWithPassCall(apiRequest);
+      const res = await loginWithPassCall(apiRequest);

-      if (!loginWithPassResult) return;
+      if (!res) return;

-      if (loginWithPassResult.success) {
-        onLoggedIn(loginWithPassResult.userId);
+      if (res.success) {
+        onLoggedIn(res.userId);

        toast({
          message: t('verify.youHaveSuccessfullyLoggedIn'),
@@ -87,7 +84,7 @@ export const EnterPasswordForm = ({
        });
      } else {
        toast({
-          message: loginWithPassResult.message,
+          message: res.message,
          severity: 'error',
        });
      }
--- a/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx
+++ b/src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx
@@ -20,11 +20,8 @@ export const GoogleAuthentication = ({
  onGoogleAuthenticated,
 }: GoogleAuthenticationProps) => {
  const { t } = useTranslation('authentication');
-  const {
-    data: loginWithGoogleResult,
-    loading: loginWithGoogleLoading,
-    execute: loginWithGoogleCall,
-  } = useApi(loginOrSignUpWithGoogle);
+  const { loading: loginWithGoogleLoading, execute: loginWithGoogleCall } =
+    useApi(loginOrSignUpWithGoogle);
  const toast = useToast();
  const clientRef = useRef<any>(null);

@@ -42,15 +39,15 @@ export const GoogleAuthentication = ({
        ux_mode: 'popup',
        response_type: 'id_token',
        callback: async (resp: GoogleCodeClientResponse) => {
-          await loginWithGoogleCall({
+          const res = await loginWithGoogleCall({
            idToken: resp.id_token,
            returnUrl: authReturnUrl,
          });

-          if (!loginWithGoogleResult) return;
+          if (!res) return;

-          if (loginWithGoogleResult.success) {
-            onGoogleAuthenticated(loginWithGoogleResult.userId);
+          if (res.success) {
+            onGoogleAuthenticated(res.userId);
          } else {
            toast({
              message: t('loginForm.googleAuthenticationFailed'),
--- a/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx
+++ b/src/features/authorization/components/AuthenticationSteps/LoginRegiserForm.tsx
@@ -44,11 +44,9 @@ export function LoginRegisterForm({
  const [touched, setTouched] = useState<boolean>(false);
  const inputError: boolean = touched && !!error;
  const toast = useToast();
-  const {
-    data: userStatus,
-    loading: userStatusLoading,
-    execute: execUserStatus,
-  } = useApi(getUserStatusByPhoneNumberOrEmail);
+  const { loading: userStatusLoading, execute: execUserStatus } = useApi(
+    getUserStatusByPhoneNumberOrEmail,
+  );

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;
@@ -93,20 +91,20 @@ export function LoginRegisterForm({

  const handleSubmit = async () => {
    if (validateInput(loginRegisterValue, authType, false)) {
-      await execUserStatus({
+      const res = await execUserStatus({
        phoneNumber:
          authType === 'phone' ? countryCode + loginRegisterValue : undefined,
        email: authType === 'email' ? loginRegisterValue : undefined,
      });

-      if (!userStatus) {
+      if (!res) {
        return;
      }

-      if (userStatus.success) {
-        onLoginRegisterSubmit(loginRegisterValue, userStatus.userStatus);
+      if (res.success) {
+        onLoginRegisterSubmit(loginRegisterValue, res.userStatus);
      } else {
-        toast({ message: userStatus.message, severity: 'error' });
+        toast({ message: res.message, severity: 'error' });
      }
    } else {
      inputRef.current?.focus();
--- a/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx
+++ b/src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx
@@ -47,11 +47,8 @@ export function OtpVerifyForm({
    useApi(sendSmsOtp);
  const { loading: emailResendLoading, execute: emailResendCall } =
    useApi(sendEmailOtp);
-  const {
-    data: loginSignUpResult,
-    loading: loginSignUpLoading,
-    execute: loginSignUpCall,
-  } = useApi(loginOrSignUpWithOtp);
+  const { loading: loginSignUpLoading, execute: loginSignUpCall } =
+    useApi(loginOrSignUpWithOtp);

  useEffect(() => {
    let interval: NodeJS.Timeout;
@@ -100,19 +97,19 @@ export function OtpVerifyForm({
      email: authType === 'email' ? value : undefined,
      returnUrl: authReturnUrl,
    };
-    await loginSignUpCall(loginRequest);
+    const res = await loginSignUpCall(loginRequest);

-    if (!loginSignUpResult) {
+    if (!res) {
      return;
    }

-    if (loginSignUpResult && loginSignUpResult.success) {
+    if (res.success) {
      setIsStatusSuccess(true);

-      if (loginSignUpResult.registeredWithOutPhoneNumber) {
-        onVerifyPhoneNumber(loginSignUpResult.userId);
+      if (res.registeredWithOutPhoneNumber) {
+        onVerifyPhoneNumber(res.userId);
      } else {
-        onOTPVerified(loginSignUpResult.userId);
+        onOTPVerified(res.userId);
      }

      toast({
@@ -126,7 +123,7 @@ export function OtpVerifyForm({
      setIsStatusSuccess(false);

      toast({
-        message: loginSignUpResult.message,
+        message: res.message,
        severity: 'error',
      });
    }
--- a/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx
+++ b/src/features/authorization/components/AuthenticationSteps/VerifyPhoneNumber.tsx
@@ -32,11 +32,8 @@ export function VerifyPhoneNumber({
  const toast = useToast();
  const { loading: smsResendLoading, execute: smsResendCall } =
    useApi(sendSmsOtp);
-  const {
-    data: confirmSmsOtpResult,
-    loading: confirmSmsOtpLoading,
-    execute: confirmSmsOtpCall,
-  } = useApi(confirmSmsOtp);
+  const { loading: confirmSmsOtpLoading, execute: confirmSmsOtpCall } =
+    useApi(confirmSmsOtp);

  useEffect(() => {
    let interval: NodeJS.Timeout;
@@ -74,11 +71,11 @@ export function VerifyPhoneNumber({
        otpCode: otpCode,
        phoneNumber: countryCode + value,
      };
-      await confirmSmsOtpCall(confirmSmsOtpRequest);
+      const res = await confirmSmsOtpCall(confirmSmsOtpRequest);

-      if (!confirmSmsOtpResult) return;
+      if (!res) return;

-      if (confirmSmsOtpResult.success) {
+      if (res.success) {
        setIsStatusSuccess(true);
        toast({
          message: t('verify.youHaveSuccessfullyLoggedIn'),
@@ -88,9 +85,7 @@ export function VerifyPhoneNumber({
      } else {
        setIsStatusSuccess(false);
        toast({
-          message:
-            confirmSmsOtpResult.message ??
-            t('verify.theVerificationCodeIsIncorrect'),
+          message: res.message ?? t('verify.theVerificationCodeIsIncorrect'),
          severity: 'error',
        });
      }
--- a/src/features/authorization/components/ForgetPassword/ChangePassword.tsx
+++ b/src/features/authorization/components/ForgetPassword/ChangePassword.tsx
@@ -48,11 +48,8 @@ export const ChangePassword = ({
  const inputRef = useRef<HTMLInputElement>(null);
  const confirmInputRef = useRef<HTMLInputElement>(null);
  const toast = useToast();
-  const {
-    data: resetPasswordData,
-    loading: resetPasswordLoading,
-    execute: resetPasswordCall,
-  } = useApi(resetPassword);
+  const { loading: resetPasswordLoading, execute: resetPasswordCall } =
+    useApi(resetPassword);

  const passwordValidationRules = [
    { title: t('forgetPassword.includingANumber'), validator: containsNumber },
@@ -90,11 +87,11 @@ export const ChangePassword = ({
        confirmNewPassword: confirmPassValue,
      };

-      await resetPasswordCall(apiRequest);
+      const res = await resetPasswordCall(apiRequest);

-      if (!resetPasswordData) return;
+      if (!res) return;

-      if (resetPasswordData.success) {
+      if (res.success) {
        onPasswordChanged();
        toast({
          message: t('forgetPassword.passwordChangedSuccessfully'),
@@ -102,7 +99,7 @@ export const ChangePassword = ({
        });
      } else {
        toast({
-          message: resetPasswordData.message,
+          message: res.message,
          severity: 'error',
        });
      }
--- a/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx
+++ b/src/features/authorization/components/ForgetPassword/ForgetPasswordOtp.tsx
@@ -44,7 +44,6 @@ export function ForgetPasswordOtp({
    execute: sendForgetPassCodeCall,
  } = useApi(sendForgetPassCode);
  const {
-    data: confirmForgetPassCodeData,
    loading: confirmForgetPassCodeLoading,
    execute: confirmForgetPassCodeCall,
  } = useApi(confirmForgetPassCode);
@@ -96,17 +95,17 @@ export function ForgetPasswordOtp({
        code: otpCode,
      };

-      confirmForgetPassCodeCall(apiRequest);
+      const res = await confirmForgetPassCodeCall(apiRequest);

-      if (!confirmForgetPassCodeData) return;
+      if (!res) return;

-      if (confirmForgetPassCodeData.success) {
+      if (res.success) {
        setIsStatusSuccess(true);
        onOTPVerified(otpCode);
      } else {
        setIsStatusSuccess(false);
        toast({
-          message: confirmForgetPassCodeData.message,
+          message: res.message,
          severity: 'error',
        });
      }
--- a/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx
+++ b/src/features/authorization/components/ForgetPassword/ForgettedPasswordInfo.tsx
@@ -40,7 +40,6 @@ export function ForgettedPasswordInfo({
  const inputError: boolean = touched && !!error;
  const toast = useToast();
  const {
-    data: sendForgetPassCodeData,
    loading: sendForgetPassCodeLoading,
    execute: sendForgetPassCodeCall,
  } = useApi(sendForgetPassCode);
@@ -91,13 +90,13 @@ export function ForgettedPasswordInfo({
            ? countryCode + forgettedPasswordInfo
            : undefined,
      };
-      sendForgetPassCodeCall(sendCodeRequest);
+      const res = await sendForgetPassCodeCall(sendCodeRequest);

-      if (!sendForgetPassCodeData) return;
+      if (!res) return;

-      if (!sendForgetPassCodeData.success) {
+      if (!res.success) {
        toast({
-          message: sendForgetPassCodeData.message,
+          message: res.message,
          severity: 'error',
        });
      }
--- a/src/hooks/useApi.ts
+++ b/src/hooks/useApi.ts
@@ -31,14 +31,16 @@ export function useApi<T, P extends any[]>(
        const response = await apiFunction(...args);

        setData(response.data);
+        return response.data;
      } catch (err: unknown) {
-        const axisoError: AxiosError = err as AxiosError;
+        const axiosError: AxiosError = err as AxiosError;
+        console.log(axiosError);

-        if (axisoError.response?.status === 401) {
+        if (axiosError.response?.status === 401) {
          navigate('/login');
        }

-        if (axisoError.response?.status === 500) {
+        if (axiosError.response?.status === 500) {
          toast({
            message: t('messages.serverError'),
            severity: 'error',
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -5,8 +5,8 @@ export const PALETTE: Palette = {
  primary: {
    light: {
      main: blue.A400,
-      dark: blue[700],
-      light: blue[100],
+      dark: blue.A700,
+      light: blue.A100,
      contrastText: '#FFFFFF',
    },
    dark: {
@@ -108,9 +108,11 @@ export const PALETTE: Palette = {
  background: {
    light: {
      default: grey[100],
+      paper: '#FFFFFF',
    },
    dark: {
      default: '#121212',
+      paper: grey[900],
    },
  },
  // Text colors