adjusted cookie to check for login type before components mounts

src/components/AuthPages/AuthLayout.jsx

@@ -4,12 +4,12 @@ import { Link } from "react-router-dom";
 export default function LoginLayout({ slogan, children }) {
   return (
     <div className={`layout-wrapper login`}>
-      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:p-20`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:px-20 sm:py-5`}>
         <div className="w-full h-full">
           <div className="flex-1 flex justify-center items-center">
             {children && children}
           </div>
-          <div className="flex-1 flex justify-center items-center p-10">
+          <div className="flex-1 flex justify-center items-center px-10 pt-10">
             <div className="flex items-center">
             <a
                   href="https://www.wrenchboard.com/about-us"
@@ -37,7 +37,7 @@ export default function LoginLayout({ slogan, children }) {
                 </a>
             </div>
           </div>
-          <div className="flex-1 flex justify-center items-center p-10">
+          <div className="flex-1 flex justify-center items-center px-10 py-1">
             <p className="text-black text-[15px] px-2 font-medium flex items-center">
              <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
               <Link to="/" className="text-[#009ef7] ml-1">

src/components/AuthPages/Login/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
@@ -17,10 +17,7 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
   const dispatch = useDispatch();
 
-  let [loginType, setLoginType] = useState({ full: true, family: false });
+  let [loginType, setLoginType] = useState('');
-  const [selectedLoginType, setSelectedLoginType] = useState(
-    document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
-  );
 
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
@@ -36,11 +33,12 @@ export default function Login() {
 
   //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
   const handleLoginType = ({ target: { name } }) => {
-    if (name == "full") {
+    setLoginType(name);
-      setLoginType({ [name]: true, family: false });
+    let currentDate = new Date();
-    } else if ((name = "family")) {
+    let expirationDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
-      setLoginType({ [name]: false, family: true });
+    // Convert the expiration date to the appropriate format
-    }
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
   };
 
   // email
@@ -71,7 +69,7 @@ export default function Login() {
       return;
     }
 
-    if (name == "loginfull") {
+    if (name == "full") {
       // Post Data Info for normal Login
       postData = {
         username: email,
@@ -80,11 +78,7 @@ export default function Login() {
         login_mode: 1100,
         action: 11025,
       };
-
+    } else if (name == "family") {
-      // Clear the loginType cookie if the user switches to loginfull
-      document.cookie =
-        "loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
-    } else if (name == "loginfamily") {
       // Post Data Info for family Login
       postData = {
         username: email,
@@ -93,8 +87,6 @@ export default function Login() {
         login_mode: 1105,
         action: 11025,
       };
-      // Set the loginType cookie to remember the user's selection
-      document.cookie = "loginType=family; expires=Session; path=/;";
     } else {
       setLoginLoading(false);
       setMsgError("Invalid Login Type. Consider refreshing the page");
@@ -146,22 +138,36 @@ export default function Login() {
   });
 
   // In order to update the selected login type whenever the component renders
-  useEffect(() => {
+  // useEffect(() => {
-    setSelectedLoginType(
+  //   document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
-      document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
+
-    );
+        // Set the loginType cookie to remember the user's selection
-  }, []);
+      // document.cookie = "loginType=family; expires=Session; path=/;";
+
+            // Clear the loginType cookie if the user switches to loginfull
+      // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // }, []);
+
+  useLayoutEffect(()=>{ // checks the cookie in order to set the login type before components mounts
+    if(document.cookie.includes("loginType=family")){
+      setLoginType('family')
+    }else if(document.cookie.includes("loginType=full")){
+      setLoginType('full')
+    }else{
+      setLoginType('full')
+    }
+  },[])
 
   useEffect(() => {
     setMail("");
     setPassword("");
-  }, [loginType.full, loginType.family]);
+  }, [loginType]);
 
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
+          <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -192,7 +198,7 @@ export default function Login() {
                 <button
                   name="full"
                   className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
-                    loginType.full && "border-r-2 h-[45px]"
+                    loginType=='full' && "border-r-2 h-[45px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -201,7 +207,7 @@ export default function Login() {
                 <button
                   name="family"
                   className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
-                    loginType.family && "border-l-2 h-[45px]"
+                    loginType=='family' && "border-l-2 h-[45px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -213,7 +219,7 @@ export default function Login() {
 
               {/* for login component */}
               {
-                loginType.full ? (
+                loginType == 'full' ? (
                   //user login component
                   <div className="p-2 input-area border-2 border-[#4687ba]">
                     <div className="input-item mb-5">
@@ -222,7 +228,7 @@ export default function Login() {
                         fieldClass="sm:px-6 px-2"
                         value={email}
                         inputHandler={handleEmail}
-                        placeholder="support@mermsemr.com"
+                        placeholder="Your Email"
                         label="Email"
                         name="email"
                         type="email"
@@ -264,7 +270,7 @@ export default function Login() {
                     <div className="signin-area mb-3.5">
                       <div className="flex justify-center">
                         <button
-                          name="loginfull"
+                          name="full"
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
@@ -310,7 +316,7 @@ export default function Login() {
                         fieldClass="px-6"
                         value={email}
                         inputHandler={handleEmail}
-                        placeholder="support@mermsemr.com"
+                        placeholder="Account ID"
                         label="Username"
                         name="email"
                         type="email"
@@ -352,7 +358,7 @@ export default function Login() {
                     <div className="signin-area mb-1.5">
                       <div className="flex justify-center">
                         <button
-                          name="loginfamily"
+                          name="family"
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"

src/components/Cards/FamilyMarketCard.jsx

@@ -1,16 +1,16 @@
-import React, { useState } from "react";
+import { useState } from "react";
-import { getTimeAgo } from "../../lib";
 import SuggestTask from "../FamilyPopup/SuggestTask";
 
 export default function FamilyMarketCard({ className, datas, hidden = false }) {
   // debugger;
   const [popUp, setPopUp] = useState(false);
-
   const popUpHandler = () => {
     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 (
     <>
@@ -26,7 +26,8 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
               className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
               onClick={popUpHandler}
               style={{
-                background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
+                // background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
+                background: `url(${selectedImage}) center / contain no-repeat`,
               }}
             >
               <div className="product-two-options flex justify-between mb-5 relative">
@@ -39,7 +40,7 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
               {hidden && <div className="flex justify-center"></div>}
             </div>
           </div>
-          <div className="details-area mt-12">
+          <div className="details-area mt-12 flex justify-between items-center gap-2">
             {/* title */}
             <button onClick={popUpHandler}>
               <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
@@ -47,17 +48,18 @@ export default function FamilyMarketCard({ className, datas, hidden = false }) {
               </h1>
             </button>
             <div className="flex justify-between">
-              <div className="flex items-center space-x-2">
+              {/* <div className="flex items-center space-x-2">
                 <p className="italic text-gray-400">
                   {getTimeAgo(datas?.added)}
                 </p>
-              </div>
+              </div> */}
               <div>
                 <button
                   type="button"
+                  onClick={popUpHandler}
                   className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                 >
-                  Send
+                  View
                 </button>
               </div>
             </div>
@@ -65,7 +67,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) {
@@ -80,7 +81,8 @@ const SuggestTask = ({ details, onClose, situation }) => {
                     <div
                       className="w-full h-[236px] p-6 bg-gray-400 rounded-xl overflow-hidden"
                       style={{
-                        background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
+                        // background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
+                        background: `url(${selectedImage}) center / contain no-repeat`,
                       }}
                     ></div>
                   </div>
@@ -96,6 +98,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
                         inputBg="bg-slate-100"
                         type="text"
                         name="title"
+                        disable={details?.title}
                         value={props.values.title}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
@@ -144,14 +147,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/components/MyPendingJobs/ParentWaiting.jsx

@@ -18,10 +18,16 @@ export default function ParentWaiting({ className }) {
   return (
     <>
       <div className={`overview-section w-full ${className || ""}`}>
-        <div className="mb-3">
+        <div className="w-full mb-3 flex justify-between items-center gap-1">
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+          <h1 className="text-26 font-bold text-dark-gray dark:text-white">
             Waiting for Parent to Get Started...
           </h1>
+          <Link
+            to='/familymarket'
+            className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          >
+            More Task
+          </Link>
         </div>
         {/* <div className="overview-section-wrapper py-2 min-h-[450px] lg:flex lg:space-x-2 flex-1 lg:gap-8"> */}
         <div className="overview-section-wrapper py-2 min-h-[400px] lg:grid grid-cols-2 gap-4">

src/components/MyPendingJobs/ParentWaitingTable.jsx

@@ -85,12 +85,17 @@ export default function ParentWaitingTable() {
                     :
                     familySuggestList && familySuggestList.length != 0?
                     <ul>
-                        {currentList.map((item)=>(
+                        {currentList.map((item)=>{
+                              //   Image
+                                let Image = require(`../../assets/images/family/${
+                                    item.banner || "default.jpg"
+                                }`);
+                            return (
                             <li key={item.uid} className="content-item py-2 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple">
                                 <div className="w-full flex justify-between items-center">
                                     <div className="account-name flex space-x-4 items-center">
                                         <div className="icon w-14 h-14 flex justify-center items-center">
-                                            <img src={transaction1} alt="" className="" />
+                                            <img src={Image} alt="" className="" />
                                         </div>
                                         <div className="">
                                             <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
@@ -111,7 +116,8 @@ export default function ParentWaitingTable() {
                                     </div>
                                 </div>
                             </li>
-                        ))}
+                            )
+                        })}
                     </ul>
                     :
                     <p className="w-full flex items-center justify-center text-xl text-dark-gray dark:text-white">No List Found!</p>

src/components/MyTasks/MyJobTable.jsx

@@ -153,13 +153,13 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
               <div
                 className={
                   !accountType &&
-                  "bg-black opacity-30 h-[17rem] p-5 rounded-md -translate-x-20"
+                  "bg-[#f0f8ff] h-[17rem] p-5 rounded-md -translate-x-20"
                 }
               >
                 <button
                   className={`${
                     !accountType
-                      ? "w-[130px] h-20 bg-[#19a706] text-lg font-semibold rounded-md py-2 px-4"
+                      ? "w-[150px] h-20 bg-[#22b14c] text-lg font-semibold rounded-md py-2 px-4"
                       : "w-[115px] h-11 btn-gradient rounded-full"
                   } flex justify-center items-center text-base text-white`}
                   onClick={navigateMarket}
@@ -169,7 +169,7 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
                   ) : accountType ? (
                     "Find Task"
                   ) : (
-                    "Ask Parent For New Task"
+                    "Suggest tasks to your parent"
                   )}
                 </button>
               </div>

src/components/MyTasks/index.jsx

@@ -5,6 +5,7 @@ import CommonHead from "../UserHeader/CommonHead";
 // import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
 import MyOffersTable from "./MyOffersTable";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 export default function MyTasks({
   MyActiveOffersList,
@@ -15,6 +16,8 @@ export default function MyTasks({
     (state) => state?.userDetails
   );
 
+  const navigate = useNavigate()
+
   const [selectTab, setValue] = useState("today");
   const filterHandler = (value) => {
     setValue(value);
@@ -34,7 +37,7 @@ export default function MyTasks({
         <div className="notification-wrapper w-full">
           {/* heading */}
           <div className="sm:flex justify-between items-center mb-6">
-            <div className="mb-5 sm:mb-0">
+            <div className="w-full mb-5 sm:mb-0 flex justify-between items-center gap-1">
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
                 <span
                   className={`${selectTab === "today" ? "block" : "hidden"}`}
@@ -42,6 +45,17 @@ export default function MyTasks({
                   My Tasks
                 </span>
               </h1>
+              {ActiveJobList?.data?.length > 0 && userDetails.account_type == 'FAMILY' &&
+                <button
+                  type="button"
+                  onClick={() => {
+                    navigate("/familymarket");
+                  }}
+                  className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                >
+                  More Task
+                </button>
+              }
             </div>
             <div className="slider-btns flex space-x-4">
               <div

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();
+    const fetchData = async () => {
-    getMyActiveOffersList();
+      await Promise.all([getMyActiveJobList(), getMyActiveOffersList()]);
+    };
+
+    fetchData();
   }, [myTaskTable]);
 
   //debugger;