An Optimized version

src/components/AddJob/AddJob.jsx

@@ -1,6 +1,6 @@
 import { Field, Form, Formik } from "formik";
 import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import * as Yup from "yup";
 import usersService from "../../services/UsersService";
 import { tableReload } from "../../store/TableReloads";
@@ -43,7 +43,7 @@ const validationSchema = Yup.object().shape({
 
 function AddJob({ popUpHandler, categories }) {
   const ApiCall = new usersService();
-
+  const { walletDetails } = useSelector((state) => state.walletDetails);
   let dispatch = useDispatch();
 
   let [currency, setCurrency] = useState({
@@ -90,9 +90,15 @@ function AddJob({ popUpHandler, categories }) {
       });
   };
 
-  // FUNCTION TO HANDLE ADD JOB FORM
-  const handleAddJob = (values, helpers) => {
-    let reqData = {
+  const getWalletDetail = (country) => {
+    const walletChecker = walletDetails.result_list.find(
+      (item) => item.country === country
+    );
+    return walletChecker ? walletChecker.amount : 0;
+  };
+
+  const handleAddJob = async (values, helpers) => {
+    const reqData = {
       country: values?.country,
       price: Number(values.price) * 100,
       title: values?.title,
@@ -102,20 +108,34 @@ function AddJob({ popUpHandler, categories }) {
       category: values.category?.join("@"),
     };
 
+    const walletAmount = getWalletDetail(reqData.country);
+    if (reqData.price > walletAmount) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Insufficient Balance",
+      });
+
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 1500);
+      return;
+    }
+
     setRequestStatus({ loading: true, status: false, message: "" });
-    ApiCall.jobManagerCreateJob(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 1) {
-          setRequestStatus({
-            loading: false,
-            status: false,
-            message: "Could not complete your request at the moment",
-          });
-          setTimeout(() => {
-            popUpHandler();
-          }, 1500);
-          return;
-        }
+
+    try {
+      const res = await ApiCall.jobManagerCreateJob(reqData);
+      if (res.data.internal_return < 1) {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Could not complete your request at the moment",
+        });
+        setTimeout(() => {
+          popUpHandler();
+        }, 1500);
+      } else {
         setRequestStatus({
           loading: false,
           status: true,
@@ -125,19 +145,18 @@ function AddJob({ popUpHandler, categories }) {
           dispatch(tableReload({ type: "JOBTABLE" }));
           popUpHandler();
         }, 1000);
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "Opps! something went wrong. Try Again",
-        });
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
+      }
+    } catch (err) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Oops! Something went wrong. Try Again",
       });
+    } finally {
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
   };
 
   useEffect(() => {
@@ -164,7 +183,11 @@ function AddJob({ popUpHandler, categories }) {
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
                       >
                         Currency
-                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
+                        {props.errors.country && props.touched.country && (
+                          <span className="text-[12px] text-red-500">
+                            {props.errors.country}
+                          </span>
+                        )}
                       </label>
                       <select
                         id="country"
@@ -214,7 +237,11 @@ function AddJob({ popUpHandler, categories }) {
                         value={props.values.price}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
-                        error={props.errors.price && props.touched.price && props.errors.price}
+                        error={
+                          props.errors.price &&
+                          props.touched.price &&
+                          props.errors.price
+                        }
                       />
                     </div>
                   </div>
@@ -231,7 +258,11 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      error={props.errors.title && props.touched.title && props.errors.title}
+                      error={
+                        props.errors.title &&
+                        props.touched.title &&
+                        props.errors.title
+                      }
                     />
                   </div>
 
@@ -247,7 +278,11 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      error={props.errors.description && props.touched.description && props.errors.description}
+                      error={
+                        props.errors.description &&
+                        props.touched.description &&
+                        props.errors.description
+                      }
                     />
                   </div>
 
@@ -259,7 +294,12 @@ function AddJob({ popUpHandler, categories }) {
                         className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
                       >
                         Job Delivery Details
-                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
+                        {props.errors.job_detail &&
+                          props.touched.job_detail && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.job_detail}
+                            </span>
+                          )}
                       </label>
                       <textarea
                         id="Job Delivery Details"
@@ -286,19 +326,28 @@ function AddJob({ popUpHandler, categories }) {
                         role="group"
                         aria-labelledby="checked-group"
                       >
-                        {Object?.entries(categories).map(([key, value]) => (
-                          <label
-                            key={key}
-                            className="flex gap-1 w-full items-center"
-                          >
-                            <Field
-                              type="checkbox"
-                              name="category"
-                              value={key}
-                            />
-                            <span className="text-[13.975px]">{value}</span>
+                        {categories ? (
+                          <>
+                            {Object?.entries(categories).map(([key, value]) => (
+                              <label
+                                key={key}
+                                className="flex gap-1 w-full items-center"
+                              >
+                                <Field
+                                  type="checkbox"
+                                  name="category"
+                                  value={key}
+                                />
+                                <span className="text-[13.975px]">{value}</span>
+                              </label>
+                            ))}
+                          </>
+                        ) : (
+                          <label className="flex gap-1 w-full items-center">
+                            <Field type="checkbox" name="category" />
+                            <span className="text-[13.975px]">null</span>
                           </label>
-                        ))}
+                        )}
                         <span className="h-5 text-sm italic text-[#cf3917]">
                           {props.errors.category &&
                             props.touched.category &&

src/components/AuthPages/AuthRedirect/Redirect.jsx

@@ -1,26 +1,26 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
+import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import usersService from "../../../services/UsersService";
+import { updateUserDetails } from "../../../store/UserDetails";
 import AuthLayout from "../AuthLayout";
 
 function Redirect() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const userApi = new usersService();
-    const dispatch = useDispatch()
+  const location = useLocation();
+  const navigate = useNavigate();
+  const userApi = new usersService();
+  const dispatch = useDispatch();
 
-    const queryParams = new URLSearchParams(location?.search);
-    const codeResponse = queryParams.get("code");
+  const queryParams = new URLSearchParams(location?.search);
+  const codeResponse = queryParams.get("code");
 
-    useEffect(()=>{
-      if(!codeResponse){
-        navigate('/login', {state: {error: true}})
-        return
-      }
-      console.log(codeResponse);
-      /*
+  useEffect(() => {
+    if (!codeResponse) {
+      navigate("/login", { state: { error: true } });
+      return;
+    }
+    console.log(codeResponse);
+    /*
       POST /token HTTP/1.1
       Host: oauth2.googleapis.com
       Content-Type: application/x-www-form-urlencoded
@@ -31,34 +31,40 @@ function Redirect() {
       redirect_uri=https%3A//oauth2.example.com/code&
       grant_type=authorization_code
       */
-      var reqData = {
-        auth_type: "GOOGLE",
-        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      };
-      userApi
-        .authStart(reqData)
-        .then((res) => {
-          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-            localStorage.setItem("member_id", `${res.data.member_id}`);
-            localStorage.setItem("uid", `${res.data.uid}`);
-            localStorage.setItem("session_token", `${res.data.session}`);
-            dispatch(updateUserDetails({...res.data}));
-            navigate('/', {replace: true})
-            return
-          }
-          navigate('/login', {state: {error: true}})
-        })
-        .catch((error) => {
-          navigate('/login', {state: {error: true}})
-          console.log(error);
-        });
-    },[])
+    var reqData = {
+      auth_type: "GOOGLE",
+      code: codeResponse,
+      redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    };
+    userApi
+      .authStart(reqData)
+      .then((res) => {
+        if (
+          res.status == 200 &&
+          res.data.internal_return >= 0 &&
+          res.data.member_id &&
+          res.data.uid &&
+          res.data.session
+        ) {
+          localStorage.setItem("member_id", `${res.data.member_id}`);
+          localStorage.setItem("uid", `${res.data.uid}`);
+          localStorage.setItem("session_token", `${res.data.session}`);
+          dispatch(updateUserDetails({ ...res.data }));
+          navigate("/", { replace: true });
+          return;
+        }
+        navigate("/login", { state: { error: true } });
+      })
+      .catch((error) => {
+        navigate("/login", { state: { error: true } });
+        console.log(error);
+      });
+  }, []);
   return (
     <AuthLayout>
-    <div className='min-h-[70vh]'>Redirecting ... </div>
-  </AuthLayout>
-  )
+      <div className="min-h-[70vh]">Redirecting ... </div>
+    </AuthLayout>
+  );
 }
 
-export default Redirect
+export default Redirect;

src/components/MyWallet/Wallet.jsx

@@ -1,11 +1,4 @@
-import React, {
-  Suspense,
-  lazy,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { Suspense, lazy, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
@@ -38,7 +31,7 @@ const WalletRoutes = () => {
       .catch(() => {
         setWalletList({ loading: false, data: [] });
       });
-  }
+  };
 
   const getPaymentHistory = () => {
     apiCall
@@ -53,7 +46,7 @@ const WalletRoutes = () => {
       .catch(() => {
         setPaymentHistory({ loading: false, data: [] });
       });
-  }
+  };
 
   useEffect(() => {
     // const fetchData = async () => {
@@ -63,8 +56,8 @@ const WalletRoutes = () => {
     // if (walletList.loading) {
     //   fetchData();
     // }
-    getWalletList()
-    getPaymentHistory()
+    getWalletList();
+    getPaymentHistory();
   }, [walletTable]);
 
   return (

src/components/Partials/Header.jsx

@@ -15,6 +15,7 @@ import WalletHeader from "../MyWallet/WalletHeader";
 import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
 import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
+import { viewWalletDetails } from "../../store/walletDetails";
 import TimeDifference from "../Helpers/TimeDifference";
 
 const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
@@ -38,6 +39,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     try {
       const res = await api.getUserWallets(null);
       console.log("wallet - > ", res.data);
+      dispatch(viewWalletDetails({ ...res.data }));
       setMyWalletList(res.data);
     } catch (error) {
       console.log("Error getting mode");
@@ -104,7 +106,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   let userEmail = email?.split("@")[0];
   const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;
 
-
   return (
     <>
       <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">

src/store/UserDetails.js

@@ -1,15 +1,15 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
-  userDetails: {}
+  userDetails: {},
 };
 
 export const userSlice = createSlice({
   name: "userDetails",
   initialState,
   reducers: {
-    updateUserDetails: (state,action) => {
-      state.userDetails = {...action.payload}
+    updateUserDetails: (state, action) => {
+      state.userDetails = { ...action.payload };
     },
   },
 });
@@ -17,4 +17,4 @@ export const userSlice = createSlice({
 // Action creators are generated for each case reducer function
 export const { updateUserDetails } = userSlice.actions;
 
-export default userSlice.reducer;
+export default userSlice.reducer;

src/store/store.js

@@ -7,6 +7,7 @@ import userDetailReducer from "./UserDetails";
 import jobReducer from "./jobLists";
 import notificationsReducer from "./notifications";
 import userJobListReducer from "./userJobList";
+import walletDetails from "./walletDetails";
 
 export default configureStore({
   reducer: {
@@ -17,5 +18,6 @@ export default configureStore({
     userJobList: userJobListReducer,
     commonHeadBanner: commonHeadBannerReducer,
     notifications: notificationsReducer,
+    walletDetails: walletDetails
   },
 });

src/store/walletDetails.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  walletDetails: {},
+};
+
+export const walletSlice = createSlice({
+  name: "walletDetails",
+  initialState,
+  reducers: {
+    viewWalletDetails: (state, action) => {
+      state.walletDetails = { ...action.payload };
+    },
+  },
+});
+
+export const { viewWalletDetails } = walletSlice.actions;
+export default walletSlice.reducer;