From 3d56e60a728a27f8c56e2a7aac9834368201a922 Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Fri, 3 Jan 2025 16:37:50 +0200
Subject: [PATCH] Issue #409 - Validate toBlock is greate than FromBlock
---
components/searchRanges/SearchRanges.tsx | 23 +++++++++++++++++++++--
1 file changed, 21 insertions(+), 2 deletions(-)
diff --git a/components/searchRanges/SearchRanges.tsx b/components/searchRanges/SearchRanges.tsx
index 45360b9e..da8ebab3 100644
--- a/components/searchRanges/SearchRanges.tsx
+++ b/components/searchRanges/SearchRanges.tsx
@@ -1,10 +1,11 @@
-import React, { useEffect } from "react";
+import React, { useEffect , useState } from "react";
import moment from "moment";
import { SearchRangesResult } from "../../hooks/common/useSearchRanges";
import { Select, SelectContent, SelectTrigger, SelectItem } from "../ui/select";
import { Input } from "../ui/input";
import DateTimePicker from "../DateTimePicker";
+import ErrorMessage from "../ErrorMessage";// Import the ErrorMessage component
interface SearchRangesProps {
rangesProps: SearchRangesResult;
@@ -77,6 +78,8 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [startDate, endDate]);
+ const [blockRangeError, setBlockRangeError] = useState<string | null>(null); // Error state for block range validation
+
return (
<div className="py-2 flex flex-col gap-y-2">
<Select
@@ -184,13 +187,29 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
type="text"
value={toBlock || ""}
onChange={(e) =>
- handleNumericInput(e.target.value,setToBlock)
+ handleNumericInput(e.target.value, setToBlock)
}
placeholder={"To"}
+ onBlur={() => {
+ // Validate if 'toBlock' is greater than 'fromBlock'
+ if (toBlock && fromBlock && toBlock < fromBlock) {
+ setBlockRangeError("To block must be greater than From block");
+ setToBlock(undefined); // Clear the 'toBlock' field
+ } else {
+ setBlockRangeError(null); // Clear the error message immediately if 'toBlock' is valid
+ }
+ }}
/>
</div>
</div>
)}
+ {blockRangeError && (
+ <ErrorMessage
+ message={blockRangeError}
+ onClose={() => setBlockRangeError(null)} // Close the error message
+ timeout={3000}
+ />
+ )}
{rangeSelectKey === "timeRange" && (
<div className="flex flex-col mt-5">
--
GitLab