From 4b7c3beb53f33a21efb757ed64a084e182dbb9fd Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 1 Apr 2024 16:20:58 +0100
Subject: [PATCH] auto selecting currency if user has only one wallet

---
 .../FamilyPopout/AssignMediaTask.jsx          | 57 ++++++++++++------
 .../FamilyPopout/AssignTaskPopout.jsx         |  5 +-
 .../FamilyAcc/FamilyPopout/forms/NewTasks.jsx | 47 ++++++++++-----
 .../dashboardLoader/DashboardMediaPage.jsx    | 58 +++++++++++++++++++
 src/views/ManageActiveJobs.jsx                | 27 ++++++---
 5 files changed, 152 insertions(+), 42 deletions(-)
 create mode 100644 src/components/dashboardLoader/DashboardMediaPage.jsx

diff --git a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
index 3344c48..9b7fd88 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
@@ -49,10 +49,14 @@ export default function AssignMediaTask({
     family_uid
 }) {
 
+    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+    const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
   // For form initial values
     const initialValues = {
         // initial values for formik
-        currency: "",
+        currency: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
         amount: "",
         job_description: "",
         timeline_days: "",
@@ -62,9 +66,7 @@ export default function AssignMediaTask({
     };
 
 
-  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
 //   let imageSrc = (localStorage.getItem("session_token")
 //   ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
@@ -144,7 +146,7 @@ export default function AssignMediaTask({
                                                 {/* Price */}
                                                 <div className="field w-full">
                                                     <label htmlFor="price" className="job-label flex gap-1">
-                                                        Price
+                                                        Reward
                                                         <span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
                                                     </label>
                                                     <InputCom
@@ -165,7 +167,7 @@ export default function AssignMediaTask({
                                                 <div className="field w-full">
                                                     <label
                                                     htmlFor="currency"
-                                                    className="job-label flex gap-1"
+                                                    className="job-label flex gap-1 invisible"
                                                     >
                                                     Currency
                                                     {props.errors.currency && props.touched.currency && <span className="text-base text-red-500">*</span>}
@@ -174,8 +176,9 @@ export default function AssignMediaTask({
                                                     id="currency"
                                                     name="currency"
                                                     value={props.values.currency}
-                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${props.errors.currency && props.touched.currency && 'border border-red-500'}`}
                                                     onChange={props.handleChange}
+                                                    disabled={walletDetails.data.length == 1}
                                                     >
                                                     {walletDetails?.loading ? (
                                                         <option className="text-slate-500 text-[13.975px]" value="">
@@ -183,18 +186,34 @@ export default function AssignMediaTask({
                                                         </option>
                                                     ) : walletDetails.data.length ? (
                                                         <>
-                                                        <option className="text-slate-500 text-[13.975px]" value="">
-                                                            Select
-                                                        </option>
-                                                        {walletDetails.data?.map((item, index) => (
-                                                            <option
-                                                            key={index}
-                                                            className="text-slate-500 text-lg"
-                                                            value={item?.country}
-                                                            >
-                                                            {item?.code}
-                                                            </option>
-                                                        ))}
+                                                            {walletDetails.data.length == 1 ?
+                                                            <>
+                                                            {walletDetails.data?.map((item, index) => (
+                                                                <option
+                                                                key={index}
+                                                                className="text-slate-500 text-lg"
+                                                                value={item?.country}
+                                                                >
+                                                                {item?.code}
+                                                                </option>
+                                                            ))}
+                                                            </>
+                                                            :
+                                                            <>
+                                                                <option className="text-slate-500 text-[13.975px]" value="">
+                                                                    Select
+                                                                </option>
+                                                                {walletDetails.data?.map((item, index) => (
+                                                                    <option
+                                                                    key={index}
+                                                                    className="text-slate-500 text-lg"
+                                                                    value={item?.country}
+                                                                    >
+                                                                    {item?.code}
+                                                                    </option>
+                                                                ))}
+                                                            </>
+                                                            }
                                                         </>
                                                     ) : (
                                                         <option className="text-slate-500 text-lg" value="">
@@ -223,7 +242,7 @@ export default function AssignMediaTask({
                                                     {publicArray.length && (
                                                         <>
                                                         <option className="text-slate-500 text-[13.975px]" value="">
-                                                            Duration
+                                                            Select
                                                         </option>
                                                         {publicArray.map(({ name, duration }, idx) => (
                                                             <option
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index 013b3f0..ecc489b 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -26,6 +26,9 @@ const AssignTaskPopout = ({
 }) => {
   const {parentAssignJobToKid} = SocketValues()
 
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+
   const apiCall = new usersService();
 
   let { pathname, state } = useLocation();
@@ -86,7 +89,7 @@ const AssignTaskPopout = ({
   const [formState, setFormState] = useState({
     // Initialize form state with desired fields
     banner: details?.banner || "default.jpg",
-    country: details?.country || "",
+    country: details?.country ? details?.country : walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
     price: details?.price || "",
     title: details?.title || "",
     description: details?.description || "",
diff --git a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
index 21a1746..fe7481c 100644
--- a/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
@@ -102,7 +102,7 @@ export default function NewTasks({ formState, setFormState }) {
                 htmlFor="Job Delivery Details"
                 className='job-label'
               >
-                Job Delivery Details
+                Delivery Detail
                 {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
               </label>
               <textarea
@@ -144,7 +144,7 @@ export default function NewTasks({ formState, setFormState }) {
             <div className="field w-full">
               <label
                 htmlFor="country"
-                className="job-label"
+                className="job-label invisible"
               >
                 Currency
                 {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
@@ -155,6 +155,7 @@ export default function NewTasks({ formState, setFormState }) {
                 value={formState.country}
                 className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                 onChange={handleInputChange}
+                disabled={walletDetails.data.length == 1}
                 // onBlur={props.handleBlur}
               >
                 {walletDetails?.loading ? (
@@ -163,18 +164,34 @@ export default function NewTasks({ formState, setFormState }) {
                   </option>
                 ) : walletDetails.data.length ? (
                   <>
-                    <option className="text-slate-500 text-[13.975px]" value="">
-                      Select
-                    </option>
-                    {walletDetails.data?.map((item, index) => (
-                      <option
-                        key={index}
-                        className="text-slate-500 text-lg"
-                        value={item?.country}
-                      >
-                        {item?.code}
-                      </option>
-                    ))}
+                      {walletDetails.data.length == 1 ?
+                      <>
+                      {walletDetails.data?.map((item, index) => (
+                          <option
+                          key={index}
+                          className="text-slate-500 text-lg"
+                          value={item?.country}
+                          >
+                          {item?.code}
+                          </option>
+                      ))}
+                      </>
+                      :
+                      <>
+                          <option className="text-slate-500 text-[13.975px]" value="">
+                              Select
+                          </option>
+                          {walletDetails.data?.map((item, index) => (
+                              <option
+                              key={index}
+                              className="text-slate-500 text-lg"
+                              value={item?.country}
+                              >
+                              {item?.code}
+                              </option>
+                          ))}
+                      </>
+                      }
                   </>
                 ) : (
                   <option className="text-slate-500 text-lg" value="">
@@ -205,7 +222,7 @@ export default function NewTasks({ formState, setFormState }) {
               {publicArray.length && (
                 <>
                   <option className="text-slate-500 text-[13.975px]" value="">
-                    Duration
+                    Select
                   </option>
                   {publicArray.map(({ name, duration }, idx) => (
                     <option
diff --git a/src/components/dashboardLoader/DashboardMediaPage.jsx b/src/components/dashboardLoader/DashboardMediaPage.jsx
new file mode 100644
index 0000000..c658235
--- /dev/null
+++ b/src/components/dashboardLoader/DashboardMediaPage.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import useToggle from "../../hooks/useToggle";
+import { drawerToggle } from "../../store/drawer";
+import { useSelector } from "react-redux";
+import MobileSidebar from "../Partials/MobileSideBar";
+
+
+export default function DashboardMediaPage({ children }) {
+
+  const { drawer } = useSelector((state) => state.drawer);
+  const [MobileSideBar, setMobileSidebar] = useToggle(false);
+
+  return (
+    <>
+      <div className="nft-main-wrapper-layout w-full mx-auto">
+        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+
+          {/* end sidebar */}
+          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
+            {/* header */}
+            <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 bg-slate-300 animate-pulse duration-100">
+            </div>
+            {/* container */}
+            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+              <div className="w-full h-full bg-slate-200 animate-pulse duration-300">
+                <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+                    <div className="w-full p-10 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
+                        <div className="mb-4 w-full min-h-[500px] bg-slate-200 animate-pulse duration-100"></div>
+
+                        <div className="w-full p-4 h-20 bg-slate-300 animate-pulse duration-200 dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2"></div>
+                    </div>
+
+                    <div className="p-10 w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+                        {/* TEXTAREA SECTION */}
+                        <div className="w-full h-40 mb-3">
+                            <div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-100"></div>
+                        </div>
+                        {/* END OF TEXTAREA */}
+
+                        {/* MESSAGE SECTION */}
+                        <div className="w-full h-40">
+                            <div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-300"></div>
+                        </div>
+                        {/* END OF MESSAGE */}
+                    </div>
+                </div>
+              </div>
+
+              {/* <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
+                <RightSideBar myJobList={userJobList} />
+              </div> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/views/ManageActiveJobs.jsx b/src/views/ManageActiveJobs.jsx
index 8776f31..50cc22b 100644
--- a/src/views/ManageActiveJobs.jsx
+++ b/src/views/ManageActiveJobs.jsx
@@ -1,9 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { lazy, Suspense, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import ActiveJobs from "../components/MyActiveJobs/ActiveJobs";
-import ActiveJobsMedia from "../components/MyActiveJobs/ActiveJobsMedia";
+// import ActiveJobsMedia from "../components/MyActiveJobs/ActiveJobsMedia";
 import usersService from "../services/UsersService";
 import { useSelector } from "react-redux";
+import LoadingSpinner from "../components/Spinners/LoadingSpinner";
+
+const ActiveJobsMedia = lazy(() => import("../components/MyActiveJobs/ActiveJobsMedia"));
 
 /**
  * This code defines a React functional component called `ManageActiveJobs`.
@@ -65,11 +68,13 @@ function ManageActiveJobs() {
   return (
     <>
     {details.job_type == 'MEDIA' ?
-    <ActiveJobsMedia
-      details={state}
-      activeJobMesList={activeJobMesList}
-      reloadActiveJobList={setActiveJobMesListReload}
-    />
+    <Suspense fallback={<Fallback />}>
+      <ActiveJobsMedia
+        details={state}
+        activeJobMesList={activeJobMesList}
+        reloadActiveJobList={setActiveJobMesListReload}
+      />
+    </Suspense>
     : details.job_type == 'TASK' ?
     <ActiveJobs 
       details={state}
@@ -84,3 +89,11 @@ function ManageActiveJobs() {
 }
 
 export default ManageActiveJobs;
+
+let Fallback = () => {
+  return (
+    <div className="w-full flex justify-center items-center">
+      <LoadingSpinner size='20' color='skyblue' height='h-screen' />
+    </div>
+  )
+}