Add Job Bug fixed

src/Routers.jsx

@@ -57,6 +57,7 @@ export default function Routers() {
         {/* guest routes */}
         <Route exact path="/login" element={<LoginPage />} />
         <Route exact path="/eoffer" element={<LoginPage />} />
+        <Route exact path="/invite" element={<LoginPage />} />
 
         <Route exact path="/signup" element={<SignupPage />} />
         <Route exact path="/login/auth" element={<AuthRedirect />} />

src/components/AddJob/AddJob.jsx

@@ -11,7 +11,7 @@ const validationSchema = Yup.object().shape({
   country: Yup.string()
     .min(1, "Minimum 3 characters")
     .max(25, "Maximum 25 characters")
-    .required("Country is required"),
+    .required("Currency is required"),
   price: Yup.string()
     .typeError("Invalid number")
     .min(1, "Price must be greater than 0")
@@ -46,12 +46,6 @@ function AddJob({ popUpHandler, categories }) {
   const { walletDetails } = useSelector((state) => state.walletDetails);
   let dispatch = useDispatch();
 
-  let [currency, setCurrency] = useState({
-    loading: true,
-    status: false,
-    data: null,
-  }); // To Hold the array of currency getUserCurrency returns
-
   let initialValues = {
     // initial values for formik
     country: "",
@@ -69,29 +63,8 @@ function AddJob({ popUpHandler, categories }) {
     message: "",
   }); // Holds state when submit button is pressed
 
-  // FUNCTION TO GET Currency
-  const getUserCurrency = () => {
-    setCurrency((prev) => ({ ...prev, loading: true }));
-    ApiCall.getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setCurrency({ loading: false, status: true, data: [] });
-          return;
-        }
-
-        setCurrency({
-          loading: false,
-          status: true,
-          data: res.data.result_list,
-        });
-      })
-      .catch((err) => {
-        setCurrency({ loading: false, status: false, data: [] });
-      });
-  };
-
-  const getWalletDetail = (country) => {
-    const walletChecker = walletDetails.result_list.find(
+  const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+    const walletChecker = walletDetails?.data.find(
       (item) => item.country === country
     );
     return walletChecker ? walletChecker.amount : 0;
@@ -108,7 +81,8 @@ function AddJob({ popUpHandler, categories }) {
       category: values.category?.join("@"),
     };
 
-    const walletAmount = getWalletDetail(reqData.country);
+    const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
+
     if (reqData.price > walletAmount) {
       setRequestStatus({
         loading: false,
@@ -159,10 +133,6 @@ function AddJob({ popUpHandler, categories }) {
     }
   };
 
-  useEffect(() => {
-    getUserCurrency();
-  }, []);
-
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -197,16 +167,16 @@ function AddJob({ popUpHandler, categories }) {
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
-                        {currency.loading ? (
+                        {walletDetails.loading ? (
                           <option className="text-slate-500 text-lg" value="">
                             Loading...
                           </option>
-                        ) : currency.data.length ? (
+                        ) : walletDetails.data.length ? (
                           <>
                             <option className="text-slate-500 text-lg" value="">
                               Select a currency
                             </option>
-                            {currency.data?.map((item, index) => (
+                            {walletDetails.data?.map((item, index) => (
                               <option
                                 key={index}
                                 className="text-slate-500 text-lg"
@@ -384,6 +354,7 @@ function AddJob({ popUpHandler, categories }) {
                       <option value="">Select Duration</option>
                       {publicArray.map(({ name, duration }, idx) => (
                         <option
+                          key={idx}
                           className="text-slate-500 text-lg"
                           value={duration}
                         >

src/components/MyCoupons/CouponPopup.jsx

@@ -26,7 +26,8 @@ const CouponPopup = ({ popUpHandler, data }) => {
         setStatusMsg({ error: "An error occurred" });
       else setStatusMsg({ success: res.data?.status_text });
 
-      dispatch(tableReload({ type: "COUPONTABLE" }));
+      // dispatch(tableReload({ type: "COUPONTABLE" }));
+      dispatch(tableReload({ type: "WALLETTABLE" }));
       setTimeout(() => {
         popUpHandler();
         setLoader(false);

src/components/MyCoupons/MyCoupons.jsx

@@ -7,7 +7,7 @@ import { useSelector } from "react-redux";
 
 export default function MyCoupons() {
   const apiCall = useMemo(() => new usersService(), []);
-  const {couponTable} = useSelector(state => state.tableReload)
+  const {couponTable, walletTable} = useSelector(state => state.tableReload)
   let [couponHistory, setCouponHistory] = useState({
     // FOR COUPON HISTORY
     loading: true,
@@ -38,7 +38,7 @@ export default function MyCoupons() {
 
   useEffect(() => {
     getCouponHistory();
-  }, [couponTable]);
+  }, [couponTable, walletTable]);
 
   return (
     <>

src/components/MyWallet/Wallet.jsx

@@ -5,34 +5,17 @@ import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));
 
+
 const WalletRoutes = () => {
   const apiCall = new usersService();
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
-  const [walletList, setWalletList] = useState({
-    loading: true,
-    data: [],
-    reload: false,
-  });
+
   const [paymentHistory, setPaymentHistory] = useState({
     loading: true,
     data: [],
   });
 
-  const getWalletList = () => {
-    apiCall
-      .getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setWalletList({ loading: false, data: [] });
-        } else {
-          setWalletList({ loading: false, data: res.data?.result_list });
-        }
-      })
-      .catch(() => {
-        setWalletList({ loading: false, data: [] });
-      });
-  };
-
   const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
@@ -49,21 +32,13 @@ const WalletRoutes = () => {
   };
 
   useEffect(() => {
-    // const fetchData = async () => {
-    //   await Promise.all([getWalletList(), getPaymentHistory()]);
-    // };
-
-    // if (walletList.loading) {
-    //   fetchData();
-    // }
-    getWalletList();
     getPaymentHistory();
   }, [walletTable]);
 
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-        <WalletBox wallet={walletList} payment={paymentHistory} />
+        <WalletBox wallet={walletDetails} payment={paymentHistory} />
       </Suspense>
     </Layout>
   );

src/components/MyWallet/WalletBox.jsx

@@ -13,7 +13,7 @@ export default function WalletBox({ wallet, payment }) {
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="lg:w-full h-full mb-10 lg:mb-0">
+                <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletHeader.jsx

@@ -41,8 +41,8 @@ export default function WalletHeader(props) {
           <div className="content px-7 pb-7">
             <ul>
               {props.myWalletList &&
-                props.myWalletList?.result_list?.length > 0 &&
-                props.myWalletList.result_list.map((value, index) => 
+                props.myWalletList?.length > 0 &&
+                props.myWalletList.map((value, index) => 
                 {
                   let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
                   return(

src/components/Partials/Header.jsx

@@ -15,7 +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 { updateWalletDetails } from "../../store/walletDetails";
 import TimeDifference from "../Helpers/TimeDifference";
 
 const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
@@ -34,20 +34,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const navigate = useNavigate();
 
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
-
-  const getMyWalletList = async () => {
-    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");
-    }
-  };
-  useEffect(() => {
-    getMyWalletList();
-  }, [walletTable]);
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
   const handlerBalance = () => {
     setbalanceValue.toggle();
@@ -242,7 +229,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
-              myWalletList={myWalletList}
+              myWalletList={walletDetails.data}
               handlerBalance={handlerBalance}
               balanceDropdown={balanceDropdown}
               addMoneyHandler={addMoneyHandler}

src/components/Resources/index.jsx

@@ -158,13 +158,18 @@ export default function Resources(props) {
     return (
       <ul className="lg:flex lg:space-x-14 space-x-8">
         {tabCategories?.length > 0 &&
-          tabCategories?.map((tabValue, idx) => (
-            <TabItem
-              key={tabValue.id}
-              tabValue={tabValue}
-              isActive={tab === tabValue.name || (idx === 0 && tab === "")}
-            />
-          ))}
+          tabCategories?.map((tabValue, idx) => {
+            if(tabValue.enabled){
+              return (
+                <TabItem
+                  key={tabValue.id}
+                  tabValue={tabValue}
+                  isActive={tab === tabValue.name || (idx === 0 && tab === "")}
+                />
+              )
+            }
+          }
+          )}
       </ul>
     );
   };

src/middleware/AuthRoute.jsx

@@ -10,6 +10,7 @@ import { updateUserDetails } from "../store/UserDetails";
 import { updateJobs } from "../store/jobLists";
 import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
+import { updateWalletDetails } from "../store/walletDetails";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -19,7 +20,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable } = useSelector((state) => state.tableReload);
+  const { jobListTable, walletTable } = useSelector((state) => state.tableReload);
 
   const {
     userDetails: { username, uid, session },
@@ -177,6 +178,21 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMyJobList();
   }, [jobListTable]);
 
+  useEffect(() => {
+    const getMyWalletList = async () => {
+      dispatch(updateWalletDetails({ loading: true, data:[] }));
+      try {
+        const res = await apiCall.getUserWallets();
+        console.log("wallet - >", res.data);
+        dispatch(updateWalletDetails({ loading: false, data:res.data?.result_list }));
+      } catch (error) {
+        dispatch(updateWalletDetails({ loading: false, data:[] }));
+        console.log("Error getting mode");
+      }
+    };
+    getMyWalletList();
+  }, [walletTable]);
+
   useEffect(() => {
     // Getting market data
     const getMarketActiveJobList = async () => {
@@ -211,7 +227,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       .getRecentActivitiedData()
       .then((res) => {
         //   debugger;
-        if (res.data?.internal_return < 0) {
+        if (res?.data?.internal_return < 0) {
           return;
         }
         dispatch(recentActivitiesData(res.data));

src/store/walletDetails.js

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