Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add “No Election Found” Message for Empty Filtered List #72

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add “No Election Found” Message for Empty Filtered List #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 24 additions & 15 deletions client/app/components/Cards/ElectionDash.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}));
}
};

Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
23 changes: 18 additions & 5 deletions client/app/components/Cards/ElectionInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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)}
Expand All @@ -38,8 +51,8 @@ const ElectionInfoCard = ({ counts, filterStatus, setFilterStatus }: any) => {
<span className="">{electionPart.count}</span>
</div>
</button>
);
})}
))
)}
</nav>
</div>
);
Expand Down