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, }; // console.log('accountDetails',accountDetails) // 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); let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS // State for profile image const [profileImg, setProfileImg] = useState(accountDetails.image ? accountDetails.image : 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) => { setUploadStatus({loading: false, status: false, message:''}) let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS let uploadedFile = e.target.files[0] //UPLOADED FILE const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase(); if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`; setUploadStatus({loading: false, status: false, message:msg}) return setTimeout(()=>{ profileImgInput.current.value = '' // clear the input setUploadStatus({loading: false, status: false, message:''}) },5000) } if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'}) return setTimeout(()=>{ profileImgInput.current.value = '' // clear the input setUploadStatus({loading: false, status: false, message:''}) },5000) } if (e.target.value !== "") { const imgReader = new FileReader(); imgReader.onload = (event) => { let base64Img = imgReader.result.split(",")[1]; let reqData = { // PAYLOAD FOR API CALL family_uid: accountDetails?.family_uid, file_name: uploadedFile?.name, file_size: uploadedFile?.size, file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(), file_data: base64Img, msg_type: 'FILE', action: 11305 } setUploadStatus({loading: true, status: false, message:'Loading...'}) apiCall.sendFiles(reqData).then(res=>{ if(res.status != 200 || res.data.internal_return < 0){ return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'}) } setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'}) setProfileImg(event.target.result); }).catch(error=>{ setUploadStatus({loading: false, status: false, message: 'Network error, try again'}) }).finally(()=>{ setTimeout(()=>{ setUploadStatus({loading: false, status: false, message: ''}) },5000) }) }; imgReader.readAsDataURL(e.target.files[0]); } }; // 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 && ( )} ); }