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

.

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-18 22:46:42 +01:00
parent 2341d2a17d
commit a9d982386c
3 changed files with 118 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyJobs/MyJobTable.jsx
+111 -76
View File
@@ -19,6 +19,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
userDetails: { country },
} = useSelector((state) => state?.userDetails);
const { jobListTable } = useSelector((state) => state.tableReload);
const userApi = useMemo(() => new usersService(), []);
// Get Country Api
@@ -45,8 +47,40 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
getCountryList();
}, [getCountryList]);
const [jobCategories, setJobCategories] = useState({
loading: false,
data: null,
});
useEffect(() => {
const getMyJobList = async () => {
setJobCategories({ loading: true, data: null });
try {
const res = await userApi.getActiveJobList();
setJobCategories({ loading: false, data: res.data?.categories });
} catch (error) {
setJobCategories({ loading: true, data: null });
throw new Error(error);
}
};
getMyJobList();
}, [jobListTable]);
// Creating All cart..
let _jobCategories = useMemo(
() => ({ All: "All", ...jobCategories.data }),
[jobCategories]
);
console.log("Checking getJobData", _jobCategories);
const [selectedCategory, setCategory] = useState(_jobCategories.All);
// Convert to array in order to map
const mappedArray = Object.entries(_jobCategories).map(([key, value]) => {
return { key, value };
});
const filterCategories = ["All Categories", "Explore", "Featured"];
const [selectedCategory, setCategory] = useState(filterCategories[0]);
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -110,85 +144,86 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
value?.currency_code,
value?.currency
);
return(
<tr
key={index}
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
>
<td className="py-9">
<div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
<div className="flex space-x-2 items-center job-items w-full">
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
<img
src={dataImage2}
alt="data"
className="w-full h-full"
/>
return (
<tr
key={index}
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
>
<td className="py-9">
<div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
<div className="flex space-x-2 items-center job-items w-full">
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
<img
src={dataImage2}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col flex-[0.9]">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
{value.title}
</h1>
<div>{value.description}</div>
<span className="text-sm text-thin-light-gray">
Price:{" "}
<span className="text-purple">
{thePrice}
</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration:{" "}
<span className="text-purple">
{" "}
{value.timeline_days} day(s)
</span>
</span>
</div>
</div>
<div className="flex flex-col flex-[0.9]">
<h1 className="font-bold text-xl text-dark-gray dark:text-white">
{value.title}
</h1>
<div>{value.description}</div>
<span className="text-sm text-thin-light-gray">
Price:{" "}
<span className="text-purple">
{thePrice}
</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration:{" "}
<span className="text-purple">
{" "}
{value.timeline_days} day(s)
</span>
</span>
<div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
<button
type="button"
className="p-2 w-[60px] h-11"
onClick={() => {
setDeleteJobPopout({
show: true,
data: value,
});
}}
>
[Delete]
</button>
<span>|</span>
<button
type="button"
className="p-2 w-[40px] h-11"
onClick={() => {
setEditJob({
show: true,
data: value,
});
}}
>
Edit
</button>
</div>
</div>
</td>
<div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
<button
type="button"
className="p-2 w-[60px] h-11"
onClick={() => {
setDeleteJobPopout({
show: true,
data: value,
});
}}
>
[Delete]
</button>
<span>|</span>
<button
type="button"
className="p-2 w-[40px] h-11"
onClick={() => {
setEditJob({
show: true,
data: value,
});
}}
>
Edit
</button>
</div>
</div>
</td>
<td className="text-right py-9 px-2">
<button
type="button"
onClick={() => {
setJobPopout({ show: true, data: value });
}}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</td>
</tr>
)})
<td className="text-right py-9 px-2">
<button
type="button"
onClick={() => {
setJobPopout({ show: true, data: value });
}}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</td>
</tr>
);
})
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">No Jobs Avaliable!</td>
src/components/MyJobs/index.jsx
+3
View File
@@ -11,6 +11,9 @@ export default function MyJobs(props) {
setPopUp((prev) => !prev);
};
console.log("Checking getJobData props", props)
return (
<Layout>
<CommonHead commonHeadData={props.commonHeadData} />
src/views/MyJobsPage.jsx
+4 -1
View File
@@ -1,9 +1,12 @@
import MyJobs from "../components/MyJobs";
import { useEffect, useState } from "react";
import MyJobs from "../components/MyJobs";
import { useSelector } from "react-redux";
export default function MyJobsPage() {
let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
const { userJobList } = useSelector((state) => state.userJobList);
return (
<>
<MyJobs