import React, { Suspense, useCallback, useEffect, useMemo, useState, } from "react"; import { Link, useOutletContext } from "react-router-dom"; import usersService from "../../services/UsersService"; import Icons from "../Helpers/Icons"; import InputCom from "../Helpers/Inputs/InputCom"; import ModalCom from "../Helpers/ModalCom"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import FamilyTable from "./FamilyTable"; import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb"; export default function FamilyAcc() { const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD // State to store the selected year and month const [selectedYear, setSelectedYear] = useState(""); const [selectedMonth, setSelectedMonth] = useState(""); // const [familyList, setFamilyList] = useState({}); // const [loader, setLoader] = useState(false); const [popUp, setPopUp] = useState(false); // const [listReload, setListReload] = useState(false); const [msgErr, setMsgErr] = useState(""); const [formData, setFormData] = useState({ first_name: "", last_name: "", }); const apiCall = useMemo(() => new usersService(), []); const popUpHandler = () => { setPopUp((prev) => !prev); }; // Handle year selection const handleYearChange = (e) => { setSelectedYear(e.target.value); }; // Handle month selection const handleMonthChange = (e) => { setSelectedMonth(e.target.value); }; const handleInputChange = (event) => { const { name, value } = event?.target; setFormData((prevFormData) => ({ ...prevFormData, [name]: value })); }; // use the useEffect hook to clear the selected month if the year changes (to ensure consistency) useEffect(() => { if (selectedYear === "" && selectedMonth !== "") { setSelectedMonth(""); } }, [selectedYear]); const addMember = async () => { const { first_name, last_name } = formData; setLoader(true); try { if (first_name !== "" && last_name !== "") { const reqData = { firstname: first_name, lastname: last_name, year: +selectedYear, month: +selectedMonth, }; const res = await apiCall.addFamily(reqData); const { data } = res; if (data?.internal_return > 0 && data?.status === "OK") { setLoader(false); setListReload((prev) => !prev); popUpHandler(); } else { setLoader(false); setMsgErr("Sorry, something went wrong"); } } else { setLoader(false); setMsgErr("Please fill in the fields"); } } catch (error) { setLoader(false); setMsgErr("An error occurred"); throw new Error(error); } finally { setTimeout(() => { setMsgErr(null); }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)); setFormData({ first_name: "", last_name: "", }); setSelectedMonth(""); setSelectedYear(""); } }; // const memberList = useCallback(async () => { // setLoader(true); // try { // const res = await apiCall.familyListings(); // const { data } = res; // if (data?.internal_return >= 0 && data?.status === "OK") { // const { result_list, session_image_server } = data; // setFamilyList({ result_list, session_image_server }); // sessionStorage.setItem("family_list", JSON.stringify(result_list)) // setLoader(false); // } else { // return; // } // } catch (error) { // setLoader(false); // throw new Error(error); // } // }, [apiCall]); // useEffect(() => { // let checkMemberList = true; // if (checkMemberList) { // memberList(); // } // return () => { // checkMemberList = false; // }; // }, [listReload, memberList]); return ( {/**/}
{/* heading */}

{/* Family Accounts */}
{familyList?.result_list?.length < process.env.REACT_APP_MAX_FAMILY_MEMBERS && !loader && ( )}

Activities
}>
{popUp && ( )} ); } const FamilyForm = ({ value: { first_name, last_name }, ageValue, inputHandler, selectedMonth, selectedYear, monthHandler, yearHandler, msgErr, loader, onClick, popUpHandler, }) => { return (

Add Members

{/* Age dropdown */}
{msgErr && (
{msgErr}
)}
); }; const CloseIcon = () => ( ); function YearMonthDropdowns({ selectedMonth, selectedYear, handleMonthChange, handleYearChange, }) { // Get the current year const currentYear = new Date().getFullYear(); // Generate an array of years from the current year to (currentYear - 19) const years = Array.from({ length: 17 }, (_, index) => currentYear - index); // Array of month names const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; return (
); }