diff --git a/client/app/components/Cards/ElectionDash.tsx b/client/app/components/Cards/ElectionDash.tsx index b189c81..68de881 100644 --- a/client/app/components/Cards/ElectionDash.tsx +++ b/client/app/components/Cards/ElectionDash.tsx @@ -1,16 +1,27 @@ "use client"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import Loader from "../Helper/Loader"; import ElectionMini from "../Cards/ElectionMini"; import ElectionInfoCard from "./ElectionInfoCard"; import { useOpenElection } from "../Hooks/GetOpenElections"; +import ErrorPage from "../Error-pages/ErrorPage"; 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 [loading, setLoading] = useState(true); + + // Set the timer for 4 seconds to switch from loader to error or elections + useEffect(() => { + const timer = setTimeout(() => { + setLoading(false); + }, 4000); // 4 seconds + + return () => clearTimeout(timer); // Clean up the timer on component unmount + }, []); const update = (electionAddress: `0x${string}`, status: number) => { if (electionStatuses[electionAddress] !== status) { @@ -44,12 +55,12 @@ const ElectionDash = () => { return (
- {isLoading || !elections ? ( + {loading ? ( - ) : ( + ) : elections ? (
-
+
{
+ ) : ( + window.location.reload()} + current_route="/" +/> )}
); diff --git a/client/app/components/ChatBot/ChatBot.tsx b/client/app/components/ChatBot/ChatBot.tsx index 7d1f7f9..0aa2d53 100644 --- a/client/app/components/ChatBot/ChatBot.tsx +++ b/client/app/components/ChatBot/ChatBot.tsx @@ -62,7 +62,7 @@ const ChatBot: React.FC = () => { onClick={() => setIsOpen(!isOpen)} className="bg-blue-600 text-white p-4 rounded-full shadow-lg" > - + @@ -72,7 +72,7 @@ const ChatBot: React.FC = () => { animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: 20 }} transition={{ duration: 0.2 }} - className="absolute bottom-16 right-0 w-96 h-[32rem] bg-white rounded-lg shadow-xl overflow-hidden flex flex-col" + className="absolute bottom-16 right-0 w-50 md:pt-40 md:w-96 h-[32rem] bg-white rounded-lg shadow-xl overflow-hidden flex flex-col" >
Agora Chatbot @@ -99,8 +99,8 @@ const ChatBot: React.FC = () => { ))}
-
-
+ +
{ ); }; -export default ChatBot; +export default ChatBot; \ No newline at end of file diff --git a/client/app/components/Error-pages/ErrorPage.tsx b/client/app/components/Error-pages/ErrorPage.tsx new file mode 100644 index 0000000..3fd4cf4 --- /dev/null +++ b/client/app/components/Error-pages/ErrorPage.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import Link from 'next/link'; +import { FaHome, FaRedoAlt } from 'react-icons/fa'; + +/** + * ErrorPage Component + * + * A customizable error page component that displays an error code, a message, + * and provides an option for the user to either retry or navigate back to a + * specified page (typically the homepage). + * + * @param {number} [errorCode=404] - The error code to display. Defaults to 404 if not provided. + * @param {string} [errorMessage="The page you're looking for doesn't exist or is unavailable."] - The error message to display. Defaults to a standard 404 message. + * @param {string} [details] - Optional additional details to provide more context about the error. + * @param {string} [redirectPath="/"] - The path to redirect the user to when clicking the redirect button. Defaults to "/" (home). + * @param {string} [redirectLabel="Go to Homepage"] - The label for the redirect button. Defaults to "Go to Homepage". + * @param {() => void} [onRetry] - An optional function that will be executed when the retry button is clicked. Useful for recoverable errors. + * @param {string} [current_route="#"] - The current route to check if the user is on the homepage. Used to prevent redundant redirect button. + * + * @returns {JSX.Element} - A functional component rendering the error page with potential retry and redirect actions. + */ +interface ErrorPageProps { + errorCode?: number; // Optional error code, defaults to 404 + errorMessage?: string; // Optional error message + details?: string; // Optional additional details (string) + redirectPath?: string; // Redirect path, defaults to "/" + redirectLabel?: string; // Label for redirect button, defaults to "Go to Homepage" + onRetry?: () => void; // Optional retry handler for recoverable errors + current_route?: string; // The current route to avoid redundant redirects +} + +const ErrorPage: React.FC = ({ + errorCode = 404, // Default error code + errorMessage = "The page you're looking for doesn't exist or is unavailable.", + details, // Optional detailed message + redirectPath = "/", // Default redirect path + redirectLabel = "Go to Homepage", // Label for the redirect button + onRetry, // Optional retry handler for recoverable errors + current_route = "#", // The current route to avoid redundant redirects +}) => { + return ( +
+
+
+ {/* Display the error code */} +

{errorCode}

+ + {/* Display the error message */} +

{errorMessage}

+ + {/* Display optional details, if provided */} + {details &&

{details}

} + +
+ {/* Show a retry button if an onRetry handler is provided */} + {onRetry && ( + + )} + + {/* Show the redirect button only if the current route is not the homepage */} + {current_route !== "/" && ( + + + {redirectLabel} + + )} +
+
+ +
+ {/* Display an image related to the error */} + {`${errorCode} +
+
+
+ ); +}; + +export default ErrorPage; diff --git a/client/app/favicon.ico b/client/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/client/app/favicon.ico and /dev/null differ