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

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'

src/features/authorization/components/AuthenticationSteps/EnterPasswordForm.tsx

@@ -53,11 +53,8 @@ export const EnterPasswordForm = ({
     useApi(sendSmsOtp);
   const { loading: emailResendLoading, execute: emailResendCall } =
     useApi(sendEmailOtp);
-  const {
+  const { loading: loginWithPassLoading, execute: loginWithPassCall } =
-    data: loginWithPassResult,
+    useApi(loginWithPassword);
-    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) {
+      if (res.success) {
-        onLoggedIn(loginWithPassResult.userId);
+        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',
         });
       }

src/features/authorization/components/AuthenticationSteps/GoogleAuthentication.tsx

@@ -20,11 +20,8 @@ export const GoogleAuthentication = ({
   onGoogleAuthenticated,
 }: GoogleAuthenticationProps) => {
   const { t } = useTranslation('authentication');
-  const {
+  const { loading: loginWithGoogleLoading, execute: loginWithGoogleCall } =
-    data: loginWithGoogleResult,
+    useApi(loginOrSignUpWithGoogle);
-    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) {
+          if (res.success) {
-            onGoogleAuthenticated(loginWithGoogleResult.userId);
+            onGoogleAuthenticated(res.userId);
           } else {
             toast({
               message: t('loginForm.googleAuthenticationFailed'),

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 {
+  const { loading: userStatusLoading, execute: execUserStatus } = useApi(
-    data: userStatus,
+    getUserStatusByPhoneNumberOrEmail,
-    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) {
+      if (res.success) {
-        onLoginRegisterSubmit(loginRegisterValue, userStatus.userStatus);
+        onLoginRegisterSubmit(loginRegisterValue, res.userStatus);
       } else {
-        toast({ message: userStatus.message, severity: 'error' });
+        toast({ message: res.message, severity: 'error' });
       }
     } else {
       inputRef.current?.focus();

src/features/authorization/components/AuthenticationSteps/OtpVerifyForm.tsx

@@ -47,11 +47,8 @@ export function OtpVerifyForm({
     useApi(sendSmsOtp);
   const { loading: emailResendLoading, execute: emailResendCall } =
     useApi(sendEmailOtp);
-  const {
+  const { loading: loginSignUpLoading, execute: loginSignUpCall } =
-    data: loginSignUpResult,
+    useApi(loginOrSignUpWithOtp);
-    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) {
+      if (res.registeredWithOutPhoneNumber) {
-        onVerifyPhoneNumber(loginSignUpResult.userId);
+        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',
       });
     }

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 {
+  const { loading: confirmSmsOtpLoading, execute: confirmSmsOtpCall } =
-    data: confirmSmsOtpResult,
+    useApi(confirmSmsOtp);
-    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:
+          message: res.message ?? t('verify.theVerificationCodeIsIncorrect'),
-            confirmSmsOtpResult.message ??
-            t('verify.theVerificationCodeIsIncorrect'),
           severity: 'error',
         });
       }

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 {
+  const { loading: resetPasswordLoading, execute: resetPasswordCall } =
-    data: resetPasswordData,
+    useApi(resetPassword);
-    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',
         });
       }

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',
         });
       }

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',
         });
       }

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',

src/theme/colors.ts

@@ -5,8 +5,8 @@ export const PALETTE: Palette = {
   primary: {
     light: {
       main: blue.A400,
-      dark: blue[700],
+      dark: blue.A700,
-      light: blue[100],
+      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