diff --git a/src/components/MyActiveJobs/ActiveJobMessage.jsx b/src/components/MyActiveJobs/ActiveJobMessage.jsx new file mode 100644 index 0000000..8717098 --- /dev/null +++ b/src/components/MyActiveJobs/ActiveJobMessage.jsx @@ -0,0 +1,1137 @@ +import React, { useState } from "react"; +import dataImage1 from "../../assets/images/data-table-user-1.png"; +import dataImage2 from "../../assets/images/data-table-user-2.png"; +import dataImage3 from "../../assets/images/data-table-user-3.png"; +import dataImage4 from "../../assets/images/data-table-user-4.png"; +import SelectBox from "../Helpers/SelectBox"; + +import PaginatedList from "../Pagination/PaginatedList"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; + +export default function ActiveJobMessage({ className }) { + const filterCategories = ["All Categories", "Explore", "Featured"]; + const [selectedCategory, setCategory] = useState(filterCategories[0]); + + let data = ['1', '2', '3', '4', '5', '6'] // to be replaced later by result from API CALL + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentTask = data.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e,setCurrentPage) + } + + return ( +
+ {/*
*/} + {/*
*/} + {/*

*/} + {/* Products History*/} + {/*

*/} + {/*
*/} + {/* */} + {/*
*/} + {data.length && +
+ + + {selectedCategory === "All Categories" ? ( + currentTask.map((item,index)=>( + + + + )) + ) : selectedCategory === "Explore" ? ( + currentTask.map((item,index)=>( + + + + )) + ) : ( + currentTask.map((item,index)=>( + + + + )) + )} + + {/* {selectedCategory === "All Categories" ? ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) : selectedCategory === "Explore" ? ( + <> + + + + + + + + + + + + + + + + + + + + ) : ( + <> + + + + + + + + + + + + + + + + + + + + )} */} + +
+
+
+

+ Mullican Joy +

+ + Owned by Xoeyam + +
+
+
+
+
+

+ Mullican Joy +

+ + Owned by Xoeyam + +
+
+
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+ + {/* PAGINATION BUTTON */} + = data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */} +
+ } +
+ ); +} diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx index fffb912..9ad4890 100644 --- a/src/components/MyActiveJobs/ActiveJobs.jsx +++ b/src/components/MyActiveJobs/ActiveJobs.jsx @@ -3,6 +3,7 @@ import { useSelector } from "react-redux"; import ModalCom from "../Helpers/ModalCom"; import Layout from "../Partials/Layout"; import { useLocation, useNavigate } from "react-router-dom"; +import ActiveJobMessage from "./ActiveJobMessage"; function ActiveJobs() { let { userDetails } = useSelector((state) => state.userDetails); @@ -120,6 +121,7 @@ function ActiveJobs() { Send + {/* end of Buttons Sections */} @@ -138,11 +140,7 @@ function ActiveJobs() {

Message

-