import React, { Suspense, lazy, useEffect, useMemo, useRef, useState, } from "react"; import { useReactToPrint } from "react-to-print"; import profile from "../../assets/images/icons/family.svg"; import localImgLoad from "../../lib/localImgLoad"; import usersService from "../../services/UsersService"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout"; import FamilyWallet from "./Tabs/FamilyWallet"; // Lazy Imports for components const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist")); const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount")); const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile")); const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks")); const ProfileInfo = lazy(() => import("./Tabs/ProfileInfo")); const FamilyPending = lazy(() => import("./Tabs/FamilyPending")); export default function FamilyManageTabs({ className, accountDetails, listReload, loader, }) { // Initial state for family details const initialDetailState = { loading: false, data: null, }; // 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 }, }); }; 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); // State for profile image const [profileImg, setProfileImg] = useState(profile); // Ref for profile image input const profileImgInput = useRef(null); // 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); }; // Function to trigger a click on the hidden profile image input const browseProfileImg = () => { profileImgInput.current.click(); }; /** * Handles the change event of the profile image input field. * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does. * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result. */ const profileImgChangeHandler = (e) => { const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB const file = e.target.files[0]; if (file && file.size > MAX_FILE_SIZE) { alert("File size exceeds the limit."); return; } if (file) { const imgReader = new FileReader(); imgReader.onload = () => { const imageDataUrl = imgReader.result; // Set the profile image setProfileImg(imageDataUrl); }; imgReader.readAsDataURL(file); } }; // Ref for the account section const accountRef = useRef(); // React-to-Print hook for handling printing const useHandlePrint = useReactToPrint({ content: () => accountRef.current, }); // 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: ( ), Account: ( ), Profile: , wallet: , }; // Default tab component const defaultTabComponent = ( ); // 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 [familyRes, tasksRes, familyWaitRes, familyPending] = await Promise.all([ apiCall.ManageFamily(reqData), apiCall.ManageTasks(reqData), apiCall.ManageFamilyWaitlist(), apiCall.ManageFamilyPending(), ]); 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: 13005, }; 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; }; }, []); 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}

    • ))}
} > {selectedTabComponent}
{familyTaskPopout && ( )} ); }