add family tab populated with family list

This commit was merged in pull request #752.
This commit is contained in:
victorAnumudu
2024-07-16 12:11:52 +01:00
parent c14d8b0659
commit 5b9c564f96
10 changed files with 719 additions and 47 deletions
+35 -32
View File
@@ -5,7 +5,7 @@ import React, {
useMemo,
useState,
} from "react";
import { Link } from "react-router-dom";
import { Link, useOutletContext } from "react-router-dom";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
import InputCom from "../Helpers/Inputs/InputCom";
@@ -16,13 +16,16 @@ 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 [familyList, setFamilyList] = useState({});
// const [loader, setLoader] = useState(false);
const [popUp, setPopUp] = useState(false);
const [listReload, setListReload] = useState(false);
// const [listReload, setListReload] = useState(false);
const [msgErr, setMsgErr] = useState("");
const [formData, setFormData] = useState({
first_name: "",
@@ -101,34 +104,34 @@ export default function FamilyAcc() {
}
};
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]);
// 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]);
// useEffect(() => {
// let checkMemberList = true;
// if (checkMemberList) {
// memberList();
// }
// return () => {
// checkMemberList = false;
// };
// }, [listReload, memberList]);
return (
<Layout>
@@ -177,7 +180,7 @@ export default function FamilyAcc() {
</span>
</Link>
<Link
to={`/familysettings`}
to={`/acc-family/familysettings`}
state={{ imageServer: familyList?.session_image_server }}
className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white"
>