diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 0626588..3ff903d 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -1,76 +1,89 @@ import React, { useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; -export default function FamilyTable({ className, familyList }) { +export default function FamilyTable({ className, familyList, loader }) { const filterCategories = ["All Categories", "Explore", "Featured"]; console.log(familyList) const [selectedCategory, setCategory] = useState(filterCategories[0]); return (
- - +
+ - - - - + + + + - {familyList?.length > 0 && - familyList?.map(({firstname, lastname, age,added}, idx) => ( - - - - - - + {loader ? ( +
+ ) : ( + <> + {familyList?.length > 0 ? ( + familyList?.map(({ firstname, lastname, age }, idx) => ( + - Manage - - - - ))} - {familyList?.length <= 0 && ( -
- Nothing to see here -
+ + + + + + )) + ) : ( + + + + )} + )}
NameLast LoginNo of TasksNameLast LoginNo of TasksStatus
-
-
- data -
-
-

- {`${firstname} ${lastname} (${age})`} -

- - Added {` ${added}`} - -
-
- 		-
- - 10-10-2019 - -
- 		-
- - 100 - -
- 		-
+
+
+ data +
+
+

+ {`${firstname} ${lastname} (${age})`} +

+ + Added{" "} + 10-10-2029 + +
+
+ 		+
+ + 10-10-2019 + +
+ 		+
+ + 100 + +
+ 		+ +
+ No Family Accounts Found! +
diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx index 5cfa8bb..1df59c2 100644 --- a/src/components/FamilyAcc/index.jsx +++ b/src/components/FamilyAcc/index.jsx @@ -11,6 +11,8 @@ export default function FamilyAcc() { const [familyList, setFamilyList] = useState([]); const [isOpen, setIsOpen] = useState(false); 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: "", @@ -19,6 +21,10 @@ export default function FamilyAcc() { const apiCall = useMemo(() => new SiteService(), []); + const popUpHandler = () => { + setPopUp(!popUp); + }; + // tab handler const filterHandler = (value) => { setValue(value); @@ -62,6 +68,7 @@ export default function FamilyAcc() { const { data } = res; if (data?.internal_return > 0 && data?.status == "OK") { setLoader(false); + setListReload((prev) => !prev); setIsOpen(false); } else { setLoader(false); @@ -79,35 +86,42 @@ export default function FamilyAcc() { setTimeout(() => { setMsgErr(null); }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)); + setFormData({ + first_name: "", + last_name: "", + }); } }; - useEffect(() => { - // member listing - const memberList = async () => { - try { - let reqData = { - member_id: localStorage.getItem("member_id"), - uid: localStorage.getItem("uid"), - sessionid: localStorage.getItem("session_token"), - limit: 20, - offset: 0, - action: 22010, - }; + // member listing + const memberList = useCallback(async () => { + setLoader(true); + try { + let reqData = { + member_id: localStorage.getItem("member_id"), + uid: localStorage.getItem("uid"), + sessionid: localStorage.getItem("session_token"), + limit: 20, + offset: 1, + action: 22010, + }; - let res = await apiCall.familyListings(reqData); - const { data } = res; - if (data?.internal_return >= 0 && data?.status == "OK") { - let { result_list } = data; - setFamilyList(result_list); - } else return; - } catch (error) { - throw new Error(error); - } - }; + let res = await apiCall.familyListings(reqData); + const { data } = res; + if (data?.internal_return >= 0 && data?.status == "OK") { + let { result_list } = data; + setFamilyList(result_list); + setLoader(false); + } else return; + } catch (error) { + setLoader(false); + throw new Error(error); + } + }, [apiCall]); + + useEffect(() => { memberList(); - }, []); - console.log(familyList); + }, [listReload, memberList]); return ( @@ -130,6 +144,7 @@ export default function FamilyAcc() { title="Add members" isOpen={isOpen} setIsOpen={setIsOpen} + modalHandler={popUpHandler} >
- + diff --git a/src/components/Helpers/CustomPopUp/index.jsx b/src/components/Helpers/CustomPopUp/index.jsx index 24215ec..4653979 100644 --- a/src/components/Helpers/CustomPopUp/index.jsx +++ b/src/components/Helpers/CustomPopUp/index.jsx @@ -1,7 +1,14 @@ -import React, { useState } from "react"; - -const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) => { +import React, { useEffect } from "react"; +const CustomPopUp = ({ + name, + btn_class, + title, + children, + isOpen, + setIsOpen, + modalHandler, +}) => { const handleOpen = () => { setIsOpen(true); }; @@ -10,6 +17,15 @@ const CustomPopUp = ({ name, btn_class, title, children, isOpen, setIsOpen }) => setIsOpen(false); }; + useEffect(() => { + if (modalHandler) { + document.body.style.overflowY = "hidden"; + } + return () => { + document.body.style.overflowY = "unset"; + }; + }); + return (
{isOpen && ( -
-
-
- +
+
+
+
+
+ {title && ( +

+ {title} +

+ )} + +
+
+ {children && children} +
- {title &&

{title}

} - {children}
)} diff --git a/src/components/Helpers/ModalCom.jsx b/src/components/Helpers/ModalCom.jsx index 60e241d..6773ec7 100644 --- a/src/components/Helpers/ModalCom.jsx +++ b/src/components/Helpers/ModalCom.jsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; -export default function ModalCom({ action, children, situation }) { +export default function ModalCom({ action, children, situation, isOpen }) { useEffect(() => { if (situation) { document.body.style.overflowY = "hidden"; @@ -13,7 +13,7 @@ export default function ModalCom({ action, children, situation }) { return (
diff --git a/src/index.css b/src/index.css index b717d6d..ef70f29 100644 --- a/src/index.css +++ b/src/index.css @@ -732,4 +732,39 @@ TODO: Responsive =========================== /* For IE10 */ .content-wrapper select::-ms-expand { display: none; +} + +/* JOBS DETAILS ALERT */ +.alert-box{ + animation-name: scale; + animation-duration: .5s; + animation-timing-function: linear; +} + +@keyframes scale { + 0%{transform: scale(0)} + 50%{transform: scale(1.1)} + 100%{transform: scale(1)} +} +/* END OF JOBS DETAILS ALERT */ + + +/* Update table scrollbar */ +.update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track{ + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); + background-color: transparent; + border-radius: 10px; +} + +.update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar { + width: 10px; + background-color: transparent; +} + +.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb { + border-radius: 10px; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; + background-color: #fff; + background: linear-gradient(134.38deg, #f539f8 0%, #c342f9 43.55%, #5356fb 104.51%); } \ No newline at end of file