src/components/Cards/FamilyMarketCard.jsx

@@ -1,8 +1,38 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { getTimeAgo } from "../../lib";
+import { toast } from "react-toastify";
 import SuggestTask from "../FamilyPopup/SuggestTask";
+import usersService from "../../services/UsersService";
 
 export default function FamilyMarketCard({ className, datas, hidden = false }) {
+  const [submitTask, setSubmitTask] = useState({
+    loading: false,
+    msg: "",
+    state: "",
+  });
+
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleSubmit = async () => {
+    try {
+      setSubmitTask({ loading: true });
+      const reqData = {
+        title: datas?.title,
+        description: datas?.description,
+      };
+      const res = await apiCall.sendFamilySuggestedTasks(reqData);
+      if (res.internal_return < 0) {
+        setSubmitTask({ loading: false, msg: res.status, state: "bad" });
+        return;
+      }
+      setSubmitTask({ loading: false, msg: res.status, state: "success" });
+      toast.success("Task has been sent!");
+    } catch (error) {
+      setSubmitTask({ loading: false, msg: error, state: "bad" });
+      throw new Error("Error Occurred", error);
+    }
+  };
+
   // debugger;
   const [popUp, setPopUp] = useState(false);
 
@@ -10,7 +40,9 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
     setPopUp((prev) => !prev);
   };
   //   Image
-  let selectedImage = require(`../../assets/images/family/${datas.banner || "default.jpg"}`);
+  let selectedImage = require(`../../assets/images/family/${
+    datas.banner || "default.jpg"
+  }`);
 
   return (
     <>
@@ -55,9 +87,16 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
               <div>
                 <button
                   type="button"
+                  onClick={handleSubmit}
                   className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                 >
-                  Send
+                  {submitTask.loading
+                    ? "..."
+                    : submitTask.state == "success"
+                    ? "Sent!"
+                    : submitTask.state == "bad"
+                    ? "Failed"
+                    : "Send"}
                 </button>
               </div>
             </div>
@@ -65,7 +104,11 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
         </div>
       </div>
       {popUp && (
-        <SuggestTask onClose={popUpHandler} situation={popUp} details={{...datas, selectedImage}} />
+        <SuggestTask
+          onClose={popUpHandler}
+          situation={popUp}
+          details={{ ...datas, selectedImage }}
+        />
       )}
     </>
   );

src/components/FamilyPopup/SuggestTask.jsx

@@ -21,6 +21,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
   const apiCall = new usersService();
 
   const handleSubmit = async (values) => {
+    if(!values.title && !values.description) return;
     try {
       setSubmitTask({ loading: true });
       const reqData = { ...values };
@@ -29,8 +30,8 @@ const SuggestTask = ({ details, onClose, situation }) => {
         setSubmitTask({ loading: false, msg: res.status, state: "bad" });
         return;
       }
+      setSubmitTask({ loading: false, msg: res.status, state: "success" });
       setTimeout(() => {
-        setSubmitTask({ loading: false, msg: res.status, state: "success" });
         onClose();
       }, 2000);
     } catch (error) {
@@ -144,14 +145,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
                       <span className="text-gradient"> Cancel</span>
                     </button>
 
-                    {/* {requestStatus.loading ? (
-                      <LoadingSpinner size="8" color="sky-blue" />
-                    ) : ( */}
                     <button
                       type="submit"
                       disabled={props.isSubmitting}
                       className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-                      // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                     >
                       {submitTask.loading
                         ? "Submitting Task"

src/components/Home/index.jsx

@@ -10,6 +10,7 @@ export default function Home(props) {
   console.log("PROPS IN HOME->", props);
 
   let [nextDueTask, setNextDueTask] = useState({});
+  const [MyOffersList, setMyOffersList] = useState([]);
 
   const userApi = new usersService();
 
@@ -32,15 +33,32 @@ export default function Home(props) {
       });
   };
 
+  const getMyOffersList = async () => {
+    try {
+      const res = await userApi.getOffersList();
+      setMyOffersList(res.data?.result_list);
+    } catch (error) {
+      console.log("Error getting offers", error);
+    }
+  };
+
   useEffect(() => {
-    getHomeDate();
+    const fetchData = async () => {
+      await Promise.all([getHomeDate(), getMyOffersList()]);
+    };
+
+    fetchData();
   }, []);
 
   return (
     <Layout>
       <div className="home-page-wrapper">
         {userDetails && userDetails?.account_type == "FAMILY" ? (
-          <FamilyDash account={userDetails} commonHeadData={props.bannerList} />
+          <FamilyDash
+            account={userDetails}
+            commonHeadData={props.bannerList}
+            familyOffers={MyOffersList}
+          />
         ) : userDetails && userDetails?.account_type == "FULL" ? (
           <FullAccountDash
             nextDueTask={nextDueTask}

src/views/MyTaskPage.jsx

@@ -8,7 +8,7 @@ import { useSelector } from "react-redux";
 export default function MyTaskPage() {
   const { myTaskTable } = useSelector((state) => state.tableReload);
 
-  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
+  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
   const [MyActiveJobList, setMyActiveJobList] = useState({
     loading: true,
@@ -43,8 +43,11 @@ export default function MyTaskPage() {
     }
   };
   useEffect(() => {
-    getMyActiveJobList();
-    getMyActiveOffersList();
+    const fetchData = async () => {
+      await Promise.all([getMyActiveJobList(), getMyActiveOffersList()]);
+    };
+
+    fetchData();
   }, [myTaskTable]);
 
   //debugger;