From 8c65a56b2645246376e22b0abc506afccc0c3b51 Mon Sep 17 00:00:00 2001 From: ParagGhatage Date: Fri, 10 Jan 2025 15:32:31 +0530 Subject: [PATCH 1/5] Fix: Make chatbot UI responsive and correct alignment issues --- client/app/components/ChatBot/ChatBot.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 From 34f29963a71fa25ac12afa105c6c751ac2716ad1 Mon Sep 17 00:00:00 2001 From: ParagGhatage Date: Fri, 10 Jan 2025 18:52:01 +0530 Subject: [PATCH 2/5] Add customizable error page component --- client/app/components/Cards/ElectionDash.tsx | 32 ++++++- .../app/components/Error-pages/ErrorPage.tsx | 92 +++++++++++++++++++ 2 files changed, 119 insertions(+), 5 deletions(-) create mode 100644 client/app/components/Error-pages/ErrorPage.tsx diff --git a/client/app/components/Cards/ElectionDash.tsx b/client/app/components/Cards/ElectionDash.tsx index c876a92..f18bfa0 100644 --- a/client/app/components/Cards/ElectionDash.tsx +++ b/client/app/components/Cards/ElectionDash.tsx @@ -1,15 +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) { @@ -43,12 +55,12 @@ const ElectionDash = () => { return (
- {isLoading || !elections ? ( + {loading ? ( - ) : ( + ) : elections ? (
-
+
{
+ ) : ( + window.location.reload()} + current_route="/" +/> )}
); 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; From 6c07984484c147a05bf7e975649f81f650aa563d Mon Sep 17 00:00:00 2001 From: ParagGhatage Date: Fri, 17 Jan 2025 06:20:50 +0530 Subject: [PATCH 3/5] resolved merger conflict with branch feature/error-page-component From f6982e979f9750c2ccccdd5f9bfa40e2b81d22e8 Mon Sep 17 00:00:00 2001 From: ParagGhatage Date: Fri, 17 Jan 2025 13:31:53 +0530 Subject: [PATCH 4/5] merge conflict resolved --- client/app/components/Cards/ElectionDash.tsx | 74 ++++++++++++++------ 1 file changed, 53 insertions(+), 21 deletions(-) diff --git a/client/app/components/Cards/ElectionDash.tsx b/client/app/components/Cards/ElectionDash.tsx index f18bfa0..9490b1b 100644 --- a/client/app/components/Cards/ElectionDash.tsx +++ b/client/app/components/Cards/ElectionDash.tsx @@ -71,34 +71,66 @@ 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) => { + return ( + + ); + }) + ) : ( +
+
+ + + +
+

No Elections Found

+

+ It seems there are no elections available at the moment. Please check back + later. +

+ +
+ )}
) : ( window.location.reload()} - current_route="/" -/> + errorCode={403} // Forbidden error, often due to access restrictions + errorMessage="Oops! Something went wrong." + details="We couldn't load the page you're trying to access. This may be due to a temporary issue with our servers. Please try again later." + redirectPath="#" + redirectLabel="Go to Homepage" + onRetry={() => window.location.reload()} + current_route="/" + /> )}
); }; -export default ElectionDash; +export default ElectionDash; \ No newline at end of file From 38ae1a5451d80597e2fefabba348a9085e002c7e Mon Sep 17 00:00:00 2001 From: ParagGhatage Date: Fri, 17 Jan 2025 13:38:13 +0530 Subject: [PATCH 5/5] Resolved merge conflict in ElectionDash --- client/app/components/Cards/ElectionDash.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/components/Cards/ElectionDash.tsx b/client/app/components/Cards/ElectionDash.tsx index 9490b1b..add6b76 100644 --- a/client/app/components/Cards/ElectionDash.tsx +++ b/client/app/components/Cards/ElectionDash.tsx @@ -133,4 +133,4 @@ const ElectionDash = () => { ); }; -export default ElectionDash; \ No newline at end of file +export default ElectionDash;