import React, {
Suspense,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
import { Link } from "react-router-dom";
import usersService from "../../services/UsersService";
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";
export default function FamilyAcc() {
// 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 reqData = {
limit: 20,
offset: 0,
action: 22010,
};
const res = await apiCall.familyListings(reqData);
const { data } = res;
if (data?.internal_return >= 0 && data?.status === "OK") {
const { result_list, session_image_server } = data;
setFamilyList({ result_list, session_image_server });
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 && (
Add
)}
}>
{popUp && (
)}
);
}
const FamilyForm = ({
value: { first_name, last_name },
ageValue,
inputHandler,
selectedMonth,
selectedYear,
monthHandler,
yearHandler,
msgErr,
loader,
onClick,
popUpHandler,
}) => {
return (
);
};
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 (
Select a Year
{years.map((year) => (
{year}
))}
Select a Month
{months.map((month, index) => (
{month}
))}
);
}