From 25f77eb6baea1637437978909765a9d174c17a7e Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 10 May 2023 16:07:33 +0100 Subject: [PATCH] Fixed popup design and refresh list --- src/components/FamilyAcc/FamilyTable.jsx | 127 +++++++++++-------- src/components/FamilyAcc/index.jsx | 55 +++++++- src/components/Helpers/CustomPopUp/index.jsx | 50 ++++++-- src/components/Helpers/ModalCom.jsx | 4 +- src/index.css | 23 +++- 5 files changed, 188 insertions(+), 71 deletions(-) diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index e78497d..a8f3fa5 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -1,68 +1,89 @@ import React, { useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; -export default function FamilyTable({ className }) { +export default function FamilyTable({ className, familyList, loader }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); return (
- - - - - - - - - - - - - - +
NameLast LoginNo of TasksStatus
-
-
- data -
-
-

- Firstname Lastname (age) -

- - Added 10-10-2029 - -
-
- 		-
- - 10-10-2019 - -
- 		-
- - 100 - -
- 		- -
+ + + + + + + + + {loader ? ( +
+ ) : ( + <> + {familyList?.length > 0 ? ( + familyList?.map(({ firstname, lastname, age }, idx) => ( + + + + + + + )) + ) : ( + + + + )} + + )}
NameLast LoginNo of TasksStatus
+
+
+ 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 5d3e384..b268d3b 100644 --- a/src/components/FamilyAcc/index.jsx +++ b/src/components/FamilyAcc/index.jsx @@ -1,4 +1,4 @@ -import React, { useId, useMemo, useState } from "react"; +import React, { useCallback, useEffect, useId, useMemo, useState } from "react"; import CustomPopUp from "../Helpers/CustomPopUp"; import InputCom from "../Helpers/Inputs/InputCom"; import Layout from "../Partials/Layout"; @@ -9,6 +9,10 @@ export default function FamilyAcc() { const [selectTab, setValue] = useState("today"); const [selectedAge, setSelectedAge] = useState(undefined); const [loader, setLoader] = useState(false); + const [popUp, setPopUp] = useState(false); + const [isOpen, setIsOpen] = useState(false) + const [familyList, setFamilyList] = useState([]) + const [listReload, setListReload] = useState(false); const [msgErr, setMsgErr] = useState(""); const [formData, setFormData] = useState({ first_name: "", @@ -17,6 +21,10 @@ export default function FamilyAcc() { const apiCall = useMemo(() => new SiteService(), []); + const popUpHandler = () => { + setPopUp(!popUp); + }; + // tab handler const filterHandler = (value) => { setValue(value); @@ -58,7 +66,11 @@ export default function FamilyAcc() { const { data } = res; if (data.internal_return > 0 && data.status == "OK") { setLoader(false); - console.log(data); + setListReload((prev) => !prev); + setIsOpen(false); + } else { + setLoader(false); + setMsgErr("Sorry, something went wrong"); } } else { setLoader(false); @@ -71,9 +83,43 @@ export default function FamilyAcc() { setTimeout(() => { setMsgErr(null); }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)); + setFormData({ + first_name: "", + last_name: "", + }); } }; + // 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); + setLoader(false); + } else return; + } catch (error) { + setLoader(false); + throw new Error(error); + } + }, [apiCall]); + + useEffect(() => { + memberList(); + }, [listReload, memberList]); + return ( {/**/} @@ -93,6 +139,9 @@ export default function FamilyAcc() { btn_class="text-purple" key={id} 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 bcfdd04..2e4357c 100644 --- a/src/components/Helpers/CustomPopUp/index.jsx +++ b/src/components/Helpers/CustomPopUp/index.jsx @@ -1,8 +1,14 @@ -import React, { useState } from "react"; - -const CustomPopUp = ({ name, btn_class, title, children }) => { - const [isOpen, setIsOpen] = useState(false); +import React, { useEffect } from "react"; +const CustomPopUp = ({ + name, + btn_class, + title, + children, + isOpen, + setIsOpen, + modalHandler, +}) => { const handleOpen = () => { setIsOpen(true); }; @@ -11,6 +17,15 @@ const CustomPopUp = ({ name, btn_class, title, children }) => { 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 f82b867..ef70f29 100644 --- a/src/index.css +++ b/src/index.css @@ -746,4 +746,25 @@ TODO: Responsive =========================== 50%{transform: scale(1.1)} 100%{transform: scale(1)} } -/* END OF JOBS DETAILS ALERT */ \ No newline at end of file +/* 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