From 400adc2db6563b37220fb0cda10de4b070c36384 Mon Sep 17 00:00:00 2001
From: dakshmehta007 <mehtadaksh85@gmail.com>
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<number>(0); //0: All, 1: Pending, 2: Active, 3: Ended
+  const [filterStatus, setFilterStatus] = useState<number>(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 = () => {
       ) : (
         <div className="flex flex-col items-center justify-center">
           <div className="flex lg:flex-row flex-col w-[80%] overflow-auto lg:space-x-4">
-            <div className=" flex-col w-[90%] lg:w-[24%] mt-3 h-full inline-block items-center justify-center ">
+            <div className="flex-col w-[90%] lg:w-[24%] mt-3 h-full inline-block items-center justify-center">
               <ElectionInfoCard
                 counts={counts}
                 filterStatus={filterStatus}
@@ -59,18 +58,28 @@ 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) => (
                     <ElectionMini
                       electionAddress={election}
                       key={key}
                       update={update}
                     />
-                  );
-                })}
+                  ))
+              ) : (
+                <div className="text-center text-lg font-bold text-red-500">
+                  {filterStatus === 1
+                    ? "No pending elections found"
+                    : filterStatus === 2
+                    ? "No active elections found"
+                    : filterStatus === 3
+                    ? "No ended elections found"
+                    : "No elections found"}
+                </div>
+              )}
             </div>
           </div>
         </div>
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 (
     <div className="relative flex border border-gray-300 w-full flex-col rounded-xl bg-white p-4 text-gray-700 bg-clip-border shadow-xl shadow-blue-gray-900/5">
       <div className="p-4">
@@ -21,8 +30,12 @@ const ElectionInfoCard = ({ counts, filterStatus, setFilterStatus }: any) => {
         </h5>
       </div>
       <nav className="flex flex-col gap-1 p-2 font-sans text-base font-normal text-blue-gray-700">
-        {ElectionInfoImage.map((electionPart, key) => {
-          return (
+        {currentCount === 0 ? (
+          <div className="text-center text-lg font-bold text-red-500">
+            {noElectionsMessage[filterStatus]}
+          </div>
+        ) : (
+          ElectionInfoImage.map((electionPart, key) => (
             <button
               key={key}
               onClick={() => setFilterStatus(key)}
@@ -38,8 +51,8 @@ const ElectionInfoCard = ({ counts, filterStatus, setFilterStatus }: any) => {
                 <span className="">{electionPart.count}</span>
               </div>
             </button>
-          );
-        })}
+          ))
+        )}
       </nav>
     </div>
   );