WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

auto selecting currency if user has only one wallet

Browse Source
This commit was merged in pull request #687.
This commit is contained in:
victorAnumudu
2024-04-01 16:20:58 +01:00
parent f032ed21b5
commit 4b7c3beb53
5 changed files with 152 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx
+38 -19
View File
@@ -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
src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+4 -1
View File
@@ -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 || "",
src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx
+32 -15
View File
@@ -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
src/components/dashboardLoader/DashboardMediaPage.jsx
+58
View File
@@ -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>
</>
);
}
src/views/ManageActiveJobs.jsx
+20 -7
View File
@@ -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>
)
}