From 400adc2db6563b37220fb0cda10de4b070c36384 Mon Sep 17 00:00:00 2001 From: dakshmehta007 Date: Sun, 15 Sep 2024 22:28:13 +0530 Subject: [PATCH] Modify Empty state in Filtered List --- client/app/components/Cards/ElectionDash.tsx | 39 ++++++++++++------- .../app/components/Cards/ElectionInfoCard.tsx | 23 ++++++++--- 2 files changed, 42 insertions(+), 20 deletions(-) diff --git a/client/app/components/Cards/ElectionDash.tsx b/client/app/components/Cards/ElectionDash.tsx index c876a92..29d057e 100644 --- a/client/app/components/Cards/ElectionDash.tsx +++ b/client/app/components/Cards/ElectionDash.tsx @@ -4,21 +4,20 @@ import Loader from "../Helper/Loader"; import ElectionMini from "../Cards/ElectionMini"; import ElectionInfoCard from "./ElectionInfoCard"; import { useOpenElection } from "../Hooks/GetOpenElections"; + const ElectionDash = () => { const { elections, isLoading } = useOpenElection(); const [electionStatuses, setElectionStatuses] = useState<{ [key: string]: number; }>({}); - const [filterStatus, setFilterStatus] = useState(0); //0: All, 1: Pending, 2: Active, 3: Ended + const [filterStatus, setFilterStatus] = useState(0); // 0: All, 1: Pending, 2: Active, 3: Ended const update = (electionAddress: `0x${string}`, status: number) => { if (electionStatuses[electionAddress] !== status) { - setElectionStatuses((prevStatuses) => { - return { - ...prevStatuses, - [electionAddress]: status, - }; - }); + setElectionStatuses((prevStatuses) => ({ + ...prevStatuses, + [electionAddress]: status, + })); } }; @@ -48,7 +47,7 @@ const ElectionDash = () => { ) : (
-
+
{ className="w-[90%] lg:w-[75%] flex-col space-y-6 my-3 inline-block overflow-auto items-center justify-center" style={{ height: "75vh" }} > - {filteredElections! - .slice() - .reverse() - .map((election, key) => { - return ( + {filteredElections && filteredElections.length > 0 ? ( + filteredElections + .slice() + .reverse() + .map((election, key) => ( - ); - })} + )) + ) : ( +
+ {filterStatus === 1 + ? "No pending elections found" + : filterStatus === 2 + ? "No active elections found" + : filterStatus === 3 + ? "No ended elections found" + : "No elections found"} +
+ )}
diff --git a/client/app/components/Cards/ElectionInfoCard.tsx b/client/app/components/Cards/ElectionInfoCard.tsx index 12df70e..009396b 100644 --- a/client/app/components/Cards/ElectionInfoCard.tsx +++ b/client/app/components/Cards/ElectionInfoCard.tsx @@ -6,13 +6,22 @@ import { TbCalendarOff, } from "react-icons/tb"; -const ElectionInfoCard = ({ counts, filterStatus, setFilterStatus }: any) => { +const ElectionInfoCard = ({ counts, filterStatus, setFilterStatus }) => { const ElectionInfoImage = [ { name: "All", image: TbCalendarMonth, count: counts.total }, { name: "Pending", image: TbCalendarTime, count: counts.pending }, { name: "Active", image: TbCalendarDot, count: counts.active }, { name: "Ended", image: TbCalendarOff, count: counts.ended }, ]; + + const noElectionsMessage = { + 1: "No pending elections found", + 2: "No active elections found", + 3: "No ended elections found", + }; + + const currentCount = ElectionInfoImage[filterStatus].count; + return (
@@ -21,8 +30,12 @@ const ElectionInfoCard = ({ counts, filterStatus, setFilterStatus }: any) => {
- ); - })} + )) + )}
);