From 6bb7da46397f33b38c1a4000d6d84d618b632a5b Mon Sep 17 00:00:00 2001 From: Ebube Date: Fri, 12 May 2023 08:56:21 +0100 Subject: [PATCH 1/2] fixed popup --- src/components/FamilyAcc/FamilyTable.jsx | 143 ++++++++++++----------- src/components/FamilyAcc/index.jsx | 98 +++++++++++----- src/components/Partials/Layout.jsx | 4 +- src/components/Partials/RightSideBar.jsx | 120 ++++++++----------- 4 files changed, 193 insertions(+), 172 deletions(-) diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 3ff903d..143b7ea 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -1,9 +1,10 @@ import React, { useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; export default function FamilyTable({ className, familyList, loader }) { const filterCategories = ["All Categories", "Explore", "Featured"]; - console.log(familyList) + const [selectedCategory, setCategory] = useState(filterCategories[0]); return (
- - - - - - - - - - {loader ? ( -
- ) : ( - <> - {familyList?.length > 0 ? ( - familyList?.map(({ firstname, lastname, age }, idx) => ( - - + + + + + + + + + <> + {familyList?.length > 0 ? ( + familyList?.map(({ firstname, lastname, age }, idx) => ( + + + - - - + + + + )) + ) : ( + + - )) - ) : ( - - - - )} - - )} - + )} + + + + )}
NameLast LoginNo of TasksStatus
-
-
- data + {loader ? ( +
+ +
+ ) : ( + <> +
NameLast LoginNo of TasksStatus
+
+
+ data +
+
+

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

+ + Added{" "} + 10-10-2029 + +
-
-

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

- - Added{" "} - 10-10-2029 +
+
+ + 10-10-2019
- - 		-
- - 10-10-2019 - -
- 		-
- - 100 - -
- 		- + +
+ + 100 + +
+ 		+ +
+ No Family Accounts Found!
- No Family Accounts Found! -
diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx index e1bd622..151a845 100644 --- a/src/components/FamilyAcc/index.jsx +++ b/src/components/FamilyAcc/index.jsx @@ -4,12 +4,12 @@ import InputCom from "../Helpers/Inputs/InputCom"; import Layout from "../Partials/Layout"; import FamilyTable from "./FamilyTable"; import SiteService from "../../services/SiteService"; +import ModalCom from "../Helpers/ModalCom"; export default function FamilyAcc() { const [selectTab, setValue] = useState("today"); const [selectedAge, setSelectedAge] = useState(undefined); const [familyList, setFamilyList] = useState([]); - const [isOpen, setIsOpen] = useState(false); const [loader, setLoader] = useState(false); const [popUp, setPopUp] = useState(false); const [listReload, setListReload] = useState(false); @@ -27,7 +27,7 @@ export default function FamilyAcc() { let sessionId = localStorage.getItem("session_token"); const popUpHandler = () => { - setPopUp(!popUp); + setPopUp((prev) => !prev); }; // tab handler @@ -35,7 +35,6 @@ export default function FamilyAcc() { setValue(value); }; - let id = useId(); // For the age drop down let startAge = 5; let endAge = 16; @@ -68,13 +67,13 @@ export default function FamilyAcc() { lastname: last_name, age: selectedAge, }; - console.log(reqData); + let res = await apiCall.addFamily(reqData); const { data } = res; + if (data?.internal_return > 0 && data?.status == "OK") { setLoader(false); setListReload((prev) => !prev); - setIsOpen(false); } else { setLoader(false); setMsgErr("Sorry, something went wrong"); @@ -142,26 +141,13 @@ export default function FamilyAcc() { > Family Accounts - - - + (Add) +
@@ -174,6 +160,21 @@ export default function FamilyAcc() {
+ {popUp && ( + + + + )} ); } @@ -187,16 +188,29 @@ const FamilyForm = ({ msgErr, loader, onClick, + popUpHandler, }) => { return ( -
-
+
+
+

+ Add Members +

+ +
+ -
+
{/* Age dropdown */}
-
+