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"; import { apiConst } from "../../lib/apiConst"; import { useSelector } from "react-redux"; // 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, }) { const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS // Initial state for family details const initialDetailState = { loading: false, data: [], }; // State for family details, tasks, waitlist, and pending let [familyDetails, setFamilyDetails] = useState({loading: false, data: {}}) let [familyTasks, setFamilyTasks] = useState({...initialDetailState}) let [familyWaitList, setFamilyWaitList] = useState({...initialDetailState}) let [familyPending, setFamilyPending] = useState({...initialDetailState}) const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page // State for list of created jobs by FULL USER const [jobList, setJobList] = useState({ loading: false, data: [] }); // State for active/selected job const [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // State for family task popout const [assignTaskPopout, setAssignTaskPopout] = 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 familyAssignPopUpHandler = () => { setAssignTaskPopout((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: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER } 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 useEffect(() => { const manageFamily = async () => { setFamilyDetails({loading:true, data: {}}) try { const { family_uid } = accountDetails; const reqData = { family_uid }; const response = await apiCall.ManageFamily(reqData) if(response.status != 200 || !response?.data){ return setFamilyDetails({loading:false, data: {}}) } setFamilyDetails({loading:false, data: response?.data}) } catch (error) { throw new Error(error); setFamilyDetails({loading:false, data: {}}) } }; // Invoke the manageFamily function when the component mounts manageFamily(); }, []); // Effect to manage active family task details useEffect(() => { const manageTasks = async () => { setFamilyTasks({loading:true, data: []}) try { const { family_uid } = accountDetails; const reqData = { family_uid }; const response = await apiCall.ManageTasks(reqData) if(response.status != 200 || !response?.data){ return setFamilyTasks({loading:false, data: []}) } setFamilyTasks({loading:false, data: response?.data}) } catch (error) { throw new Error(error); setFamilyTasks({loading:false, data: []}) } }; // Invoke the manageFamily function when the component mounts manageTasks(); }, [updatePage, parentFamilyTaskList]); // Effect to manage family wait task details useEffect(() => { const manageFamilyWaitlist = async () => { setFamilyWaitList({loading:true, data: []}) try { const response = await apiCall.ManageFamilyWaitlist() if(response.status != 200 || !response?.data){ return setFamilyWaitList({loading:false, data: []}) } setFamilyWaitList({loading:false, data: response?.data}) } catch (error) { throw new Error(error); setFamilyWaitList({loading:false, data: []}) } }; // Invoke the manageFamily function when the component mounts manageFamilyWaitlist(); }, [updatePage]); // Effect to manage family pending task details useEffect(() => { const manageFamilyPending = async () => { setFamilyPending({loading:true, data: []}) try { const response = await apiCall.ManageFamilyPending() if(response.status != 200 || !response?.data){ return setFamilyPending({loading:false, data: []}) } setFamilyPending({loading:false, data: response?.data}) } catch (error) { throw new Error(error); setFamilyPending({loading:false, data: []}) } }; // Invoke the manageFamily function when the component mounts manageFamilyPending(); }, [updatePage, pendingListTable]); // Effect to get all parent job list useEffect(() => { const reqData = { limit: 30, offset: 0, job_type: "FAMILY", action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER, }; setJobList({ loading: true }); apiCall .getMyJobList(reqData) .then((res) => { setJobList({ loading: false, data: res?.data?.result_list }); if (res?.data?.result_list?.length) { setActiveTask((prev) => ({ ...prev, data: res?.data?.result_list[0], })); } }) .catch((err) => { setJobList({ loading: false, data: [] }); console.log("Error", err); }); }, []); 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}
{assignTaskPopout && ( )} ); }