consumed family wallet API

docker-compose.yml

@@ -21,9 +21,10 @@ services:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
       - apigate.lotus.g1.wrenchboard.com:10.10.33.15
+      - apigate.nebula.g1.wrenchboard.com:10.10.33.15
       - apigate.orion.g1.wrenchboard.com:10.10.33.15
-      # #- backend.wrenchboard.api.live:172.31.4.27
-      # #- backend.wrenchboard.api.test:10.20.30.27
+      - socket-dev.wrenchboard.com:10.10.33.15
+      - socket.wrenchboard.com:10.10.33.15
       - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:

src/components/Contexts/SocketIOContext.js

@@ -30,11 +30,21 @@ export default function SocketIOContextProvider({children}) {
         }
     };
 
+    const marketUpdate = (message, room) => {
+        if(message && room){
+            socket.emit("marketjob_addded", { message, room });
+        }
+    };
+
     useEffect(() => {
         socket.on("receive_message", (data) => {
             // setSocketMsgReceived(data.message);
             dispatch(tableReload({type:'CHATMESSAGELIST'}))
         });
+        socket.on("received_refreshmarket_jobs", (data) => {
+            // setSocketMsgReceived(data.message);
+            dispatch(tableReload({type:'MARKETTABLELIST'}))
+        });
     }, [socket]);
 
     let values = {
@@ -43,6 +53,7 @@ export default function SocketIOContextProvider({children}) {
         joinRoom,
         setSocketMsgReceived,
         socketMsgReceived,
+        marketUpdate,
         // room,
         // setRoom,
         // message,

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -186,9 +186,7 @@ const AssignTaskPopout = React.memo(
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
         });
-    };
-
-    console.log(details);
+    };  
 
     return (
       <>
@@ -196,9 +194,13 @@ const AssignTaskPopout = React.memo(
           <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
-                <>
-                  Assign task to{" "}
-                  {pathname === "/acc-family/activities" ? (
+                {details ? (
+                  ` Assign ${details?.firstname}'s Task`
+                ) : familyDetailsData ? (
+                  ` Assign ${familyDetailsData.firstname}'s Task`
+                ) : (
+                  <div className="flex items-center">
+                    Assign task to{" "}
                     <div className="w-[270px] h-[40px] ml-2">
                       <select
                         name=""
@@ -213,10 +215,8 @@ const AssignTaskPopout = React.memo(
                         {familyList}
                       </select>
                     </div>
-                  ) : (
-                    <>{familyDetailsData?.firstname || details?.firstName}</>
-                  )}
-                </>
+                  </div>
+                )}
               </h1>
               <button
                 type="button"
@@ -443,9 +443,11 @@ const AssignTaskPopout = React.memo(
                           onClick={assignFamilyTask}
                           className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
                         >
-                          {`Assign to ${
-                            familyDetailsData?.firstname || details?.firstName
-                          }`}
+                          {details
+                            ? `Assign task to ${details?.firstname}`
+                            : familyDetailsData
+                            ? `Assign task to ${familyDetailsData.firstname}`
+                            : "Assign"}
                         </button>
                       )}
                     </div>

src/components/FamilyPopup/SuggestTask.jsx

@@ -86,7 +86,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-          <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {isManageFamilyPage
               ? `${state?.firstname}'s Suggested Task`
               : isActivitiesPage

src/components/MyWallet/FamilyWalletBox.jsx

@@ -2,7 +2,7 @@ import { useSelector } from "react-redux";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 import WalletItemCardFamily from "./WalletItemCardFamily";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import SearchCom from "../Helpers/SearchCom";
 import { localImgLoad } from "../../lib";
@@ -13,17 +13,17 @@ import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
  * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
  */
 export default function FamilyWalletBox({ wallet, payment }) {
-  const { loading, data } = wallet;
+  // const { loading, data } = wallet;
   
-  const { userDetails } = useSelector((state) => state.userDetails);
-  const accountType = userDetails?.account_type === "FAMILY";
+  // const { userDetails } = useSelector((state) => state.userDetails);
+  // const accountType = userDetails?.account_type === "FAMILY";
   
-  const [selectedWallet, setSelectedWallet] = useState(data[0])
+  const [selectedWallet, setSelectedWallet] = useState('')
 
-  const [activeWalletBtn, setActiveWalletBtn] = useState(data[0].code)
+  const [activeWalletBtn, setActiveWalletBtn] = useState('')
   
   const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
-    const currentWalletSelected = data?.filter((item) => item.code == name);
+    const currentWalletSelected = wallet?.data?.filter((item) => item.code == name);
     setSelectedWallet(currentWalletSelected[0])
     setActiveWalletBtn(name)
     // console.log(name, currentWalletSelected)
@@ -33,63 +33,70 @@ export default function FamilyWalletBox({ wallet, payment }) {
   ? `${selectedWallet?.code.toLowerCase()}.svg`
   : "default.png";
 
+  useEffect(()=>{
+    setSelectedWallet(wallet.data[0])
+    setActiveWalletBtn(wallet?.data[0]?.code)
+  },[wallet])
 
   return (
     <div className="w-full">
-      <div className="my-wallet-wrapper w-full mb-10">
-        <div className="main-wrapper w-full">
-            {loading ? 
-              <div className="w-full h-full flex items-center justify-center bg-white">
-                <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
-              </div>
-
-            : data.length > 0 ?
-                <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
-                  <div className="w-full mb-4 sm:mb-0">
-                    <div className="wal-selection text-black dark:text-white flex items-center gap-2">
-                      {data.length > 1 && data.map(item =>(
-                        <button 
-                          className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
-                          key={item?.wallet_uid} 
-                          name={item?.code}
-                          onClick={handleChangeWallet}
-                        >
-                          {item?.description}
-                        </button>
-                      ))}
-                    </div>
-                    <div className="p-5 rounded-2xl bg-white-opacity min-h-[240px]"
-                        style={{
-                          background: `url(${background}) 0% 0% / cover no-repeat`,
-                        }}
-                      >
-                      {/* image */}
-                      <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[120px] max-h-min md:max-h-[120px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-                        <img
-                          src={localImgLoad(`images/currency/${image}`)}
-                          className="w-full h-full"
-                          alt="currency-icon"
-                        />
-                      </div>
-                      <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
-                      <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
-                        {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
-                  <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
-                  </div>
+      <div className="my-wallet-wrapper w-full">
+        <div className="main-wrapper w-full mb-10">
+          <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
+            <div className="w-full mb-4 sm:mb-0 rounded-2xl bg-white dark:bg-dark-white overflow-hidden">
+              {wallet?.loading ? 
+                <div className="w-full h-full flex items-center justify-center bg-white">
+                  <LoadingSpinner size="16" color="sky-blue" height='min-h-[240px]' />
                 </div>
-            :
-            <div className="w-full h-32 flex justify-center items-center rounded-2xl bg-white">
-              <p>No Wallet Record Found</p>
+                : wallet?.data.length > 0 ?
+                <>
+                {wallet?.data?.length > 1 && 
+                  <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
+                    {wallet?.data?.map(item =>(
+                      <button 
+                        className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
+                        key={item?.wallet_uid} 
+                        name={item?.code}
+                        onClick={handleChangeWallet}
+                      >
+                        {item?.description}
+                      </button>
+                    ))}
+                  </div>
+                  }
+                  <div className="p-5 bg-white-opacity min-h-[240px]"
+                      style={{
+                        background: `url(${background}) 0% 0% / cover no-repeat`,
+                      }}
+                    >
+                    {/* image */}
+                    <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+                      <img
+                        src={localImgLoad(`images/currency/${image}`)}
+                        className="w-full h-full"
+                        alt="currency-icon"
+                      />
+                    </div>
+                    <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
+                    <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
+                      {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
+                    </p>
+                  </div>
+                </>
+                :
+                <div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">
+                  <p>No Wallet Record Found</p>
+                </div>
+              }
             </div>
-            }
+              <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
+                <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
+              </div>
+          </div>
+        </div>
+        <div className="w-full">
+          <FamilyWalletRedeemOptions />
         </div>
-      </div>
-      <div className="w-full">
-        <FamilyWalletRedeemOptions />
       </div>
     </div>
   );

src/components/MyWallet/FamilyWalletCon.jsx

@@ -6,9 +6,9 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
 
-const FamilyWallet = () => {
+const FamilyWalletCon = () => {
   const apiCall = new usersService();
-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+  // const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
 
   const [paymentHistory, setPaymentHistory] = useState({
@@ -16,6 +16,20 @@ const FamilyWallet = () => {
     data: [],
   });
 
+  const [familyWalletBal, setFamilyWalletBal] = useState({
+    loading: true,
+    data: []
+  });
+
+  const getFamilyWalletBal = () => {
+    setFamilyWalletBal({loading:true, data: []})
+    apiCall.getFamilyWallet({family_uid: localStorage.getItem("uid")}).then(res => {
+      setFamilyWalletBal({loading:false, data: res?.data?.result_list})
+    }).catch(error => {
+      setFamilyWalletBal({loading:false, data: []})
+    })
+  };
+
   const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
@@ -24,6 +38,7 @@ const FamilyWallet = () => {
           setPaymentHistory({ loading: false, data: [] });
         } else {
           setPaymentHistory({ loading: false, data: res.data?.result_list });
+          // console.log('Hist', res.data?.result_list)
         }
       })
       .catch(() => {
@@ -33,6 +48,7 @@ const FamilyWallet = () => {
 
   useEffect(() => {
     getPaymentHistory();
+    getFamilyWalletBal()
   }, [walletTable]);
 
   return (
@@ -48,9 +64,13 @@ const FamilyWallet = () => {
             }
         />
       </div>
-      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
+      <Suspense fallback={
+        <div className="bg-white rounded-2xl">
+          <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
+        </div>
+      }>
         <FamilyWalletBox
-          wallet={walletDetails}
+          wallet={familyWalletBal}
           payment={paymentHistory}
         />
       </Suspense>
@@ -58,4 +78,4 @@ const FamilyWallet = () => {
   );
 };
 
-export default FamilyWallet;
+export default FamilyWalletCon;

src/components/MyWallet/FamilyWalletRedeemOptions.jsx

@@ -45,7 +45,7 @@ export default function FamilyWalletRedeemOptions() {
             <div className='mt-5 w-full h-[20rem] rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white flex justify-center items-center'>
                 <LoadingSpinner size='10' color='sky-blue' height='h-[30rem]' />
             </div>
-            : Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
+            : familyWalletRedeemOptList?.data && Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ?
                 Object.keys(filteredRedeemData?.data)?.length ?
                     <div className="mt-5 grid sm:grid-cols-2 lg:grid-cols-3 xxl:grid-cols-4 gap-4">
                         { Object.keys(filteredRedeemData?.data)?.map((item)=>{

src/components/jobPopout/JobListPopout.jsx

@@ -8,6 +8,7 @@ import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import { SocketValues } from "../Contexts/SocketIOContext";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -29,6 +30,9 @@ function JobListPopout({
   openWallet,
   setWalletItem,
 }) {
+
+  let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
   const [selectedTab, setSelectedTab] = useState("public");
   const tabs = ["public", "individual", "group"];
 
@@ -201,7 +205,9 @@ function JobListPopout({
           setRequestStatus({ message: "", status: false });
         }, 3000);
       }
-      dispatch(tableReload({ type: "JOBTABLE" }));
+      marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists
+      dispatch(tableReload({ type: "JOBTABLE" }));  // reloads my job page
+      dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page
       setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true });
       setTimeout(() => {
         setLoader({ jobFields: false });
@@ -224,6 +230,12 @@ function JobListPopout({
     members: [],
   });
 
+  const DetailsSection = ({ label, value }) => (
+    <div className="my-3 md:flex">
+      <Detail label={label} value={value} />
+    </div>
+  );
+
   // FUNCTION TO POPULATE USER GROUP LIST
   useEffect(() => {
     // setGroupList({loading: true, groups: [], members: []})
@@ -250,12 +262,6 @@ function JobListPopout({
       });
   }, []);
 
-  const DetailsSection = ({ label, value }) => (
-    <div className="my-3 md:flex">
-      <Detail label={label} value={value} />
-    </div>
-  );
-
   const DetailsComponent = () => {
     const detailsArray = [
       { label: "Description", value: details.description },

src/middleware/AuthRoute.jsx

@@ -14,8 +14,12 @@ import { updateWalletDetails } from "../store/walletDetails";
 import { familyBannersList } from "../store/FamilyBannerList";
 import { familyResources } from "../store/FamilyResources";
 import {familyWalletRedeemOptList} from '../store/FamilyWalletRedeemOpt'
+import { SocketValues } from "../components/Contexts/SocketIOContext";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
+
+  let {joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
   const apiCall = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
@@ -23,7 +27,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable, familyBannersListTable } = useSelector(
+  const { jobListTable, marketTableList, walletTable, familyBannersListTable } = useSelector(
     (state) => state.tableReload
   );
 
@@ -189,6 +193,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [jobListTable, isLogin.status]);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     const getMyWalletList = async () => {
       dispatch(updateWalletDetails({ loading: true, data: [] }));
       try {
@@ -203,7 +210,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMyWalletList();
-  }, [walletTable]);
+  }, [walletTable, isLogin.status]);
 
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
@@ -219,7 +226,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch, jobListTable, isLogin.status]);
+  }, [apiCall, dispatch, marketTableList, isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
@@ -241,6 +248,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     apiCall
       .getRecentActivitiedData()
       .then((res) => {
@@ -253,7 +263,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       .catch((error) => {
         console.log("ERROR ", error);
       });
-  }, []);
+  }, [isLogin.status]);
 
 
   //FUNCTION TO GET FAMILY BANNERS
@@ -309,6 +319,10 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     familyWalletRedeemOptions()
   }, [isLogin.status]);
 
+  useEffect(()=>{ // sends an event to the socket to enable user join a room to be able to receive update when jobs enters the market
+      joinRoom('full-markets-jobs')
+  },[isLogin.status])
+
 
   // RENDER PAGE
   return isLogin.loading && !loggedIn ? (

src/store/TableReloads.js

@@ -10,6 +10,7 @@ const initialState = {
   uploadsTable: false,
   familyBannersListTable: false,
   chatMessageList: false,
+  marketTableList: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -45,6 +46,9 @@ export const tableReloadSlice = createSlice({
         case "CHATMESSAGELIST":
           state.chatMessageList = !state.chatMessageList;
           return;
+        case "MARKETTABLELIST":
+          state.marketTableList = !state.marketTableList;
+          return;
         default:
           return state;
       }

src/views/FamilyWalletPage.jsx

@@ -1,5 +1,5 @@
-import FamilyWallet from "../components/MyWallet/FamilyWallet";
+import FamilyWalletCon from "../components/MyWallet/FamilyWalletCon";
 
 export default function FamilyWalletPage() {
-  return <FamilyWallet />;
+  return <FamilyWalletCon />;
 }