From 2ff6ed777fcacffd60ccffc9c6756759278f743c Mon Sep 17 00:00:00 2001 From: Ebube Date: Thu, 7 Mar 2024 23:44:30 +0100 Subject: [PATCH] Fixed bug of tasks and chores page --- src/components/FamilyAcc/FamilyActivities.jsx | 2 +- src/components/FamilyAcc/FamilyTableNew.jsx | 544 +++++++++--------- .../FamilyAcc/Tabs/FamilyNewTasks.jsx | 168 ++++++ .../FamilyAcc/Tabs/FamilyNewWaitlist.jsx | 7 +- src/components/FamilyAcc/Tabs/FamilyTasks.jsx | 2 +- src/components/FamilyAcc/index.jsx | 6 +- src/components/FamilyPopup/SuggestTask.jsx | 37 +- 7 files changed, 474 insertions(+), 292 deletions(-) create mode 100644 src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx diff --git a/src/components/FamilyAcc/FamilyActivities.jsx b/src/components/FamilyAcc/FamilyActivities.jsx index 6ad02ce..0cbfa89 100644 --- a/src/components/FamilyAcc/FamilyActivities.jsx +++ b/src/components/FamilyAcc/FamilyActivities.jsx @@ -23,7 +23,7 @@ export default function FamilyActivities() { Tasks & Chores - + import("./Tabs/FamilyNewWaitlist")); - const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks")); - const FamilyPending = lazy(() => import("./Tabs/FamilyPending")); - - export default function FamilyTableNew({ - className, - accountDetails, - listReload, - loader, - }) { - // Initial state for family details - const initialDetailState = { - loading: false, - data: null, - }; +import React, { Suspense, lazy, useEffect, useMemo, useState } from "react"; +import { apiConst } from "../../lib/apiConst"; +import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout"; + +// Lazy Imports for components +const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist")); +const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks")); +const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending")); + +export default function FamilyTableNew({ + className, + accountDetails, + listReload, + loader, +}) { + // Initial state for family details + const initialDetailState = { + loading: false, + data: null, + }; // console.log('accountDetails',accountDetails) - // State for family details, tasks, waitlist, and pending - const [details, setDetails] = useState({ + // State for family details, tasks, waitlist, and pending + const [details, setDetails] = useState({ + familyDetails: { ...initialDetailState }, + familyTasks: { ...initialDetailState }, + familyWaitList: { ...initialDetailState }, + familyPending: { ...initialDetailState }, + }); + + // Function to reset family details, tasks, waitlist, and pending + const resetDetails = () => { + setDetails({ familyDetails: { ...initialDetailState }, familyTasks: { ...initialDetailState }, familyWaitList: { ...initialDetailState }, familyPending: { ...initialDetailState }, }); - - // Function to reset family details, tasks, waitlist, and pending - const resetDetails = () => { - setDetails({ - familyDetails: { ...initialDetailState }, - familyTasks: { ...initialDetailState }, - familyWaitList: { ...initialDetailState }, - familyPending: { ...initialDetailState }, - }); - }; - - const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page - - // State for family task data - const [familyTask, setFamilyTask] = useState({ loading: false, data: [] }); - - // State for active task - const [activeTask, setActiveTask] = useState({ id: 0, data: {} }); - - // State for error messages - const [errMsg, setErrMsg] = useState(""); - - // State for family task popout - const [familyTaskPopout, setFamilyTaskPopout] = useState(false); - - // Create an instance of the usersService class - const apiCall = useMemo(() => new usersService(), []); - - // Function to handle toggling the family task popout - const familyPopUpHandler = () => { - setFamilyTaskPopout((prev) => !prev); - }; - - // Array of tab names - const tabs = [ - { id: 1, name: "Tasks" }, - { id: 2, name: "Waiting" }, - { id: 3, name: "Pending" }, - ]; - - // State for the currently selected tab - const [tab, setTab] = useState(tabs[0].name); - - // Function to handle tab changes - const tabHandler = (value) => { - setTab(value); - }; - - // Object that maps tab names to their corresponding components - const tabComponents = { - Tasks: ( - // - - ), - Waiting: ( - - ), - Pending: ( - - ), - }; + }; + + const [updatePage, setUpdatePage] = useState(false); // State to determine when to update the page + + // State for family task data + const [familyTask, setFamilyTask] = useState({ loading: false, data: [] }); + + // State for active task + const [activeTask, setActiveTask] = useState({ id: 0, data: {} }); + + // State for error messages + const [errMsg, setErrMsg] = useState(""); + + // State for family task popout + const [familyTaskPopout, setFamilyTaskPopout] = useState(false); + + // Create an instance of the usersService class + const apiCall = useMemo(() => new usersService(), []); + + // Function to handle toggling the family task popout + const familyPopUpHandler = () => { + setFamilyTaskPopout((prev) => !prev); + }; + + // Array of tab names + const tabs = [ + { id: 1, name: "Tasks" }, + { id: 2, name: "Waiting" }, + { id: 3, name: "Pending" }, + ]; + + // State for the currently selected tab + const [tab, setTab] = useState(tabs[0].name); + + // Function to handle tab changes + const tabHandler = (value) => { + setTab(value); + }; + + // Object that maps tab names to their corresponding components + const tabComponents = { + Tasks: ( + + // + ), + Waiting: ( + + ), + Pending: ( + + ), + }; + + const defaultTabComponent = tabComponents.Tasks; + + // Selected tab component based on the current 'tab' + const selectedTabComponent = tabComponents[tab] || defaultTabComponent; + + // Effect to manage family details and related data + useEffect(() => { + const manageFamily = async () => { + try { + resetDetails(); + + setDetails({ + familyTasks: { loading: true }, + familyWaitList: { loading: true }, + familyPending: { loading: true }, + }); - const defaultTabComponent = tabComponents.Tasks; - - // Selected tab component based on the current 'tab' - const selectedTabComponent = tabComponents[tab] || defaultTabComponent; - - // Effect to manage family details and related data - useEffect(() => { - const manageFamily = async () => { - try { - resetDetails(); - - setDetails({ - familyDetails: { loading: true }, - familyTasks: { loading: true }, - familyWaitList: { loading: true }, - familyPending: { loading: true }, - }); - // const { family_uid } = accountDetails; // const reqData = { family_uid }; - - const [familyWaitRes, familyPending] = - await Promise.all([ - // apiCall.ManageFamily(reqData), - // apiCall.ManageTasks(reqData), - apiCall.ManageFamilyNewWaitlist(), - apiCall.ManageFamilyPending(), - ]); - + + const [familyTasksData, restOfFamilyData] = await Promise.all([ + apiCall.getMyActiveTaskList(), + apiCall.ManageFamilyNewWaitlist(), + ]); + + console.log("Task me",familyTasksData) + + let tasksData = familyTasksData?.data?.result_list; + let familyData = restOfFamilyData?.data?.result_list; + // const familyData = familyRes.data; // const tasksData = tasksRes.data; - const familyWaitData = familyWaitRes.data; - const familyPendingData = familyPending.data; - - // Function to check for errors in data - const checkDataError = (data) => data?.internal_return < 0; - - if ( - // checkDataError(familyData) || - // checkDataError(tasksData) || - checkDataError(familyWaitData) || - checkDataError(familyPendingData) - ) { - return; - } - - setDetails({ - // familyDetails: { loading: false, data: familyData }, - // familyTasks: { loading: false, data: tasksData }, - familyWaitList: { loading: false, data: familyWaitData }, - familyPending: { loading: false, data: familyPendingData }, - }); - } catch (error) { - resetDetails(); - setErrMsg("An error occurred"); - throw new Error(error); - } - }; - - // Invoke the manageFamily function when the component mounts - manageFamily(); - }, [updatePage]); - - // Effect to manage family tasks - useEffect(() => { - let checkFamilyTask = true; - const reqData = { - limit: 30, - offset: 0, - job_type: "FAMILY", - action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER, - }; - - if (checkFamilyTask) { - setFamilyTask({ loading: true }); - apiCall - .getMyJobList(reqData) - .then((res) => { - setFamilyTask({ loading: false, data: res?.data?.result_list }); - if (res?.data?.result_list?.length) { - setActiveTask((prev) => ({ - ...prev, - data: res?.data?.result_list[0], - })); - } - }) - .catch((err) => { - setFamilyTask({ loading: false, data: [] }); - console.log("Error", err); - }); - } - - // Cleanup function to prevent memory leaks - return () => { - checkFamilyTask = false; - }; - }, []); - console.log("God please>> ", details.familyWaitList) - - return ( -
-
- - -
- } - > -
-
-
-
-
    - {tabs.map(({ name, id }) => ( -
  • tabHandler(name)} - className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${ - tab === name - ? "text-purple border-r" - : "text-thin-light-gray" - }`} - key={id} - > -

    {name}

    -
    • - ))} -
- -
- -
-
- } + let familyWaitingData = familyData.filter( + (item) => item.status_text === "Waiting" + ); + let familyPendingData = familyData.filter( + (item) => item.status_text !== "Waiting" + ); + + console.log({ + Waitings: familyWaitingData, + Pending: familyPendingData, + Tasks: tasksData + }); + + // Function to check for errors in data + const checkDataError = (data) => data?.internal_return < 0; + + if ( + checkDataError(tasksData) || + checkDataError(familyWaitingData) || + checkDataError(familyPendingData) + ) { + return; + } + + setDetails({ + familyTasks: { loading: false, data: tasksData }, + familyWaitList: { loading: false, data: familyWaitingData }, + familyPending: { loading: false, data: familyPendingData }, + }); + } catch (error) { + resetDetails(); + setErrMsg("An error occurred"); + throw new Error(error); + } + }; + + // Invoke the manageFamily function when the component mounts + manageFamily(); + }, [updatePage]); + + // Effect to manage family tasks + useEffect(() => { + let checkFamilyTask = true; + const reqData = { + limit: 30, + offset: 0, + job_type: "FAMILY", + action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER, + }; + + if (checkFamilyTask) { + setFamilyTask({ loading: true }); + apiCall + .getMyJobList(reqData) + .then((res) => { + setFamilyTask({ loading: false, data: res?.data?.result_list }); + if (res?.data?.result_list?.length) { + setActiveTask((prev) => ({ + ...prev, + data: res?.data?.result_list[0], + })); + } + }) + .catch((err) => { + setFamilyTask({ loading: false, data: [] }); + console.log("Error", err); + }); + } + + // Cleanup function to prevent memory leaks + return () => { + checkFamilyTask = false; + }; + }, []); + + console.log("God please>> ", details.familyWaitList); + + return ( +
+
+ + +
+ } + > +
+
+
+
+
    + {tabs.map(({ name, id }) => ( +
  • tabHandler(name)} + className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${ + tab === name + ? "text-purple border-r" + : "text-thin-light-gray" + }`} + key={id} > - {selectedTabComponent} - -
+

{name}

+ + ))} + + +
+ +
+
+ } + > + {selectedTabComponent} +
- -
- - {familyTaskPopout && ( - - )} +
+
- ); - } - \ No newline at end of file + + {familyTaskPopout && ( + + )} +
+ ); +} diff --git a/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx b/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx new file mode 100644 index 0000000..338e73b --- /dev/null +++ b/src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx @@ -0,0 +1,168 @@ +import React, { useMemo, useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import Icons from "../../Helpers/Icons"; +import { PriceFormatter } from "../../Helpers/PriceFormatter"; +import { handlePagingFunc } from "../../Pagination/HandlePagination"; +import PaginatedList from "../../Pagination/PaginatedList"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; + +export default function FamilyNewTasks({ + familyData = [], + className, + loader, + accountDetails, +}) { + let navigate = useNavigate(); + let { pathname } = useLocation(); + + // ... + const filteredFamilyData = useMemo( + () => + familyData?.result_list?.filter( + (data) => data?.family_uid === accountDetails?.family_uid + ), + [familyData, accountDetails] + ); + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentTasks = familyData?.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); + + console.log("This is bad", familyData); + return ( +
+ {loader ? ( +
+ +
+ ) : ( + <> + {familyData.length && ( +
+ + + { + <> + {familyData.length > 0 ? ( + currentTasks.map((value, index) => { + // find due date + const dueDate = value?.delivery_date.split(" ")[0]; + // the price + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + let image = `${ + familyData.session_image_server + }${localStorage.getItem("session_token")}/job/${ + value.job_uid + }`; + return ( + + + + + + ); + }) + ) : ( + + + + )} + + } + +
+
+
+ data +
+
+

+ {value.title} +

+
+ + Price:{" "} + + {thePrice} + + + + Duration:{" "} + + {" "} + {value.timeline_days} day(s) + + + + Due Date:{" "} + + {" "} + {dueDate} + + +
+
+
+ 		+ +
+ No Family Task +
+ {/* PAGINATION BUTTON */} + = + familyData?.result_list.length + ? true + : false + } + data={familyData?.result_list} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ )} + + )} +
+ ); +} diff --git a/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx index 7f9536d..8d928e4 100644 --- a/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx +++ b/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx @@ -20,7 +20,7 @@ const FamilyNewWaitlist = ({ const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE); const indexOfFirstItem = currentPage; const indexOfLastItem = currentPage + itemsPerPage; - const currentTask = familyData?.result_list?.slice( + const currentTask = familyData?.slice( indexOfFirstItem, indexOfLastItem ); @@ -43,6 +43,8 @@ const FamilyNewWaitlist = ({ setContinueTaskPopup({ show: false, data: {} }); }; + console.log("Check this >>",currentTask) + return (
-
- +
+ Activities diff --git a/src/components/FamilyPopup/SuggestTask.jsx b/src/components/FamilyPopup/SuggestTask.jsx index bd0b2ac..2c48115 100644 --- a/src/components/FamilyPopup/SuggestTask.jsx +++ b/src/components/FamilyPopup/SuggestTask.jsx @@ -1,10 +1,10 @@ +import { Form, Formik } from "formik"; import { useState } from "react"; import { useLocation } from "react-router-dom"; -import ModalCom from "../Helpers/ModalCom"; -import { Form, Formik } from "formik"; -import InputCom from "../Helpers/Inputs/InputCom"; import usersService from "../../services/UsersService"; import Icons from "../Helpers/Icons"; +import InputCom from "../Helpers/Inputs/InputCom"; +import ModalCom from "../Helpers/ModalCom"; const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg"); const SuggestTask = ({ details, onClose, situation, continuePopupData }) => { @@ -51,7 +51,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => { }; const handleParentSuggestion = (values) => { - if (suggestedNextStep == "Send Task") { + if (suggestedNextStep === "Send Task") { let firstName = state?.firstname; let family_uid = state?.family_uid; continuePopupData({ ...details, firstName, family_uid }); @@ -59,6 +59,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => { onClose(); }; + console.log(pathname) + return (
@@ -122,12 +124,16 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
{ id="description" rows="5" className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${ - pathname === "/manage-family" + pathname === + "/manage-family" ? "px-2 h-[110px]" : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]" }`} @@ -177,7 +184,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
{/* Radio buttons for family */} - {pathname === "/manage-family" ? ( + {pathname === + "/manage-family" ? (
Parent suggested next step @@ -212,9 +220,9 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => { id={`parent-suggested-${idx}`} name="parent-suggested" className={`ml-1 ${ - title == "Not Now" + title === "Not Now" ? "text-red-500" - : title == "Duplicate" + : title === "Duplicate" ? "text-purple" : "text-black" } font-semibold`} @@ -243,19 +251,20 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => { disabled={props.isSubmitting} className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center" > - {pathname !== "/manage-family" ? ( + {pathname !== + "/manage-family" ? ( <> {submitTask.loading ? "Submitting Task" - : submitTask.state == "success" + : submitTask.state === "success" ? "Task Submitted" - : submitTask.state == "bad" + : submitTask.state === "bad" ? "An Error Occurred" : "Send to Parents"} ) : ( <> - {suggestedNextStep == "Send Task" ? ( + {suggestedNextStep === "Send Task" ? ( <> Continue