From 918575d8028561becab319eabb63ef0e2ceb4fd5 Mon Sep 17 00:00:00 2001 From: "CHIEFSOFT\\ameye" Date: Mon, 29 May 2023 18:23:57 -0400 Subject: [PATCH] Family member task layout --- src/components/FamilyAcc/FamilyTasks.jsx | 128 ++++++++++++++++++++--- src/components/History/HistoryTable.jsx | 12 --- src/components/History/index.jsx | 4 +- 3 files changed, 114 insertions(+), 30 deletions(-) diff --git a/src/components/FamilyAcc/FamilyTasks.jsx b/src/components/FamilyAcc/FamilyTasks.jsx index 93d03a4..2f246fb 100644 --- a/src/components/FamilyAcc/FamilyTasks.jsx +++ b/src/components/FamilyAcc/FamilyTasks.jsx @@ -1,31 +1,127 @@ import React, { useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; -import LoadingSpinner from "../Spinners/LoadingSpinner"; -import { useNavigate, useLocation, Link } from "react-router-dom"; +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 FamilyTasks({ 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) + } -export default function FamilyTasks({ className, loader }) { return (
-
- {loader ? ( -
- -
- ) : ( - - - - + {data.length && +
+
Yes This are my tasks
+ + + + + + + { + currentTask.map((item,index)=>( + + + + + + + )) + } +
All ProductValueUSDStatus
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ +
- )} -
+ + {/* PAGINATION BUTTON */} + = data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */} +
+ } ); } diff --git a/src/components/History/HistoryTable.jsx b/src/components/History/HistoryTable.jsx index efde971..835d7de 100644 --- a/src/components/History/HistoryTable.jsx +++ b/src/components/History/HistoryTable.jsx @@ -51,8 +51,6 @@ export default function HistoryTable({ className }) { Value USD 24H% - Bits - Time Status @@ -165,16 +163,6 @@ export default function HistoryTable({ className }) { -24.75 (11.5%) - - - 343 - - - - - 2 Hours 1 min 30s - -