diff --git a/src/components/FamilyAcc/FamilyManage.jsx b/src/components/FamilyAcc/FamilyManage.jsx index d8af7c7..1dc08ee 100644 --- a/src/components/FamilyAcc/FamilyManage.jsx +++ b/src/components/FamilyAcc/FamilyManage.jsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import Layout from "../Partials/Layout"; -import FamilyManageTabs from "./FamilyManageTabs"; +import FamilyManageTabs from "./Tabs/FamilyManageTabs"; import { useLocation } from "react-router-dom"; export default function FamilyManage() { diff --git a/src/components/FamilyAcc/FamilyTasks.jsx b/src/components/FamilyAcc/FamilyTasks.jsx deleted file mode 100644 index 2f246fb..0000000 --- a/src/components/FamilyAcc/FamilyTasks.jsx +++ /dev/null @@ -1,127 +0,0 @@ -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 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) - } - - return ( -
- {data.length && -
- - - - - - - - - { - 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/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx similarity index 83% rename from src/components/FamilyAcc/FamilyManageTabs.jsx rename to src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx index 93ad312..a8f409f 100644 --- a/src/components/FamilyAcc/FamilyManageTabs.jsx +++ b/src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx @@ -1,18 +1,18 @@ import React, { + Suspense, + forwardRef, useCallback, useEffect, useMemo, useRef, useState, - forwardRef, - Suspense, } from "react"; -import LoadingSpinner from "../Spinners/LoadingSpinner"; -import profile from "../../assets/images/profile-info-profile.png"; -import usersService from "../../services/UsersService"; -import FamilyTasks from "./FamilyTasks"; import QRCode from "react-qr-code"; import { useReactToPrint } from "react-to-print"; +import usersService from "../../../services/UsersService"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import profile from "../../../assets/images/profile-info-profile.png"; +import FamilyTasks from "./FamilyTasks"; export default function FamilyManageTabs({ className, @@ -20,7 +20,16 @@ export default function FamilyManageTabs({ listReload, loader, }) { - const [familyDetails, setFamilyDetails] = useState(null); + const [details, setDetails] = useState({ + familyDetails: { + loading: false, + data: null, + }, + familyTasks: { + loading: false, + data: null, + }, + }); const [errMsg, setErrMsg] = useState(""); // List of tabs const tabs = [ @@ -57,26 +66,46 @@ export default function FamilyManageTabs({ imgReader.readAsDataURL(e.target.files[0]); } }; + // Api call const apiCall = useMemo(() => new usersService(), []); // function for manage family - const familyManageHandler = useCallback(async () => { + const manageFamily = useCallback(async () => { try { + setDetails({ + familyDetails: { loading: true }, + familyTasks: { loading: true }, + }); let { family_uid } = accountDetails; let reqData = { family_uid }; - let res = await apiCall.ManageFamily(reqData); - let { data } = await res; - if (data?.internal_return < 0) return; - setFamilyDetails(data); + + const familyRes = await apiCall.ManageFamily(reqData); + const familyData = familyRes.data; + + const tasksRes = await apiCall.ManageTasks(reqData); + const tasksData = tasksRes.data; + + // checking the internal return + if (familyData?.internal_return < 0 || tasksData?.internal_return < 0) + return; + + setDetails({ + familyDetails: { loading: false, data: familyData }, + familyTasks: { loading: false, data: tasksData }, + }); } catch (error) { + setDetails({ + familyDetails: { loading: false }, + familyTasks: { loading: false }, + }); setErrMsg("An error occurred"); throw new Error(error); } }, [apiCall, accountDetails]); useEffect(() => { - familyManageHandler(); - }, [tab]); + manageFamily(); + }, [tab, manageFamily]); const accountRef = useRef(); // to handle printing @@ -132,16 +161,21 @@ export default function FamilyManageTabs({
{name === "Tasks" && ( - + )} {name === "Account" && ( )} @@ -220,7 +254,7 @@ function ProfileInfo({ ); } -const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => { +const Account = forwardRef(({ familyData, myRef, handlePrint }, ref) => { return (
{

Username:{" "} - {familyDetails?.username - ? familyDetails?.username - : "please wait..."} + {familyData?.username ? familyData?.username : "please wait..."}

Pin:{" "} - {familyDetails?.pin ? familyDetails?.pin : "please wait..."} + {familyData?.pin ? familyData?.pin : "please wait..."}

diff --git a/src/components/FamilyAcc/Tabs/FamilyTasks.jsx b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx new file mode 100644 index 0000000..010e74a --- /dev/null +++ b/src/components/FamilyAcc/Tabs/FamilyTasks.jsx @@ -0,0 +1,137 @@ +import React, { useState } from "react"; +import dataImage2 from "../../../assets/images/data-table-user-2.png"; + +import { handlePagingFunc } from "../../Pagination/HandlePagination"; +import PaginatedList from "../../Pagination/PaginatedList"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; + +export default function FamilyTasks({ familyData, className, loader }) { + 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 = familyData?.result_list.slice( + indexOfFirstItem, + indexOfLastItem + ); + + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + return ( +
+ {loader ? ( +
+ +
+ ) : ( + <> + {" "} + {familyData && familyData?.result_list && ( +
+ + + { + <> + {familyData && + familyData?.result_list && + familyData.result_list.length > 0 && + currentTask.map((value, index) => ( + + + + + + ))} + + } + +
+
+
+ data +
+
+

+ {value.title} +

+
{value.description}
+ + Price:{" "} + + {value.price * 0.01} + + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Expire:{" "} + + {" "} + {value.expire} + + + + Send to:{" "} + + {" "} + {value.job_to} + + +
+
+ 		+ +
+ {/* PAGINATION BUTTON */} + = + familyData?.result_list.length + ? true + : false + } + data={familyData?.result_list} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ )} + + )} +
+ ); +} diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 42061c6..75ebb2f 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -212,6 +212,20 @@ class usersService { return this.postAuxEnd("/familymanage", postData); } + // Family Tasks + ManageTasks(reqData) { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + limit: 30, + offset: 0, + action: 13008, + ...reqData + }; + return this.postAuxEnd("/jobmanageractive", postData); + } + // Task for the person doing the job getMyActiveTaskList() { var postData = {