fix: clear date when use clearable

cardano-foundation · Apr 5, 2024 · 0ab5fb6 · 0ab5fb6
1 parent cff5402
commit 0ab5fb6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx
@@ -77,7 +77,7 @@ import {
   FilterWrapper
 } from "src/pages/NativeScriptsAndSC/styles";
 import { StyledInput } from "src/components/share/styled";
-import DateRangeModal, { DATETIME_PARTTEN } from "src/components/commons/CustomFilter/DateRangeModal";
+import DateRangeModal, { DATETIME_PARTTEN, DateRange } from "src/components/commons/CustomFilter/DateRangeModal";
 import { ChipContainer } from "src/pages/NativeScriptsAndSC/Card";
 import FormNowMessage from "src/components/commons/FormNowMessage";
 import useFetch from "src/commons/hooks/useFetch";
@@ -1035,6 +1035,7 @@ const FilterGovernanceVotes: React.FC<FilterGovernanceVotes> = ({ query, setQuer
 
   const [params, setParams] = useState<FilterParams | null>(query || filterValue || {});
   const [paramsFilter, setParamsFilter] = useState<FilterParams | null>(filterValue || {});
+  const [dateRange, setDateRange] = useState<DateRange>({ fromDate: "", toDate: "" });
 
   const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
     setExpanded(newExpanded ? panel : false);
@@ -1045,6 +1046,7 @@ const FilterGovernanceVotes: React.FC<FilterGovernanceVotes> = ({ query, setQuer
     setOpen(false);
     setParams(filterValue);
     setParamsFilter(filterValue);
+    setDateRange({ fromDate: "", toDate: "" });
     history.replace({
       search: stringify({
         page: 1,
@@ -1074,8 +1076,8 @@ const FilterGovernanceVotes: React.FC<FilterGovernanceVotes> = ({ query, setQuer
       actionStatus: params?.actionStatus,
       voterType: VOTE_TYPE.STAKING_POOL_KEY_HASH,
       voteType: params?.voteType,
-      ...(params?.fromDate && { fromDate: params.fromDate || "" }),
-      ...(params?.toDate && { toDate: params.toDate || "" })
+      ...(dateRange?.fromDate && { fromDate: dateRange.fromDate || "" }),
+      ...(dateRange?.toDate && { toDate: dateRange.toDate || "" })
     });
   };
 
@@ -1429,17 +1431,17 @@ const FilterGovernanceVotes: React.FC<FilterGovernanceVotes> = ({ query, setQuer
                 <DateRangeModal
                   open={openDateRange}
                   value={{
-                    fromDate: params?.fromDate || filterValue?.fromDate,
-                    toDate: params?.toDate || filterValue?.toDate
+                    fromDate: dateRange?.fromDate,
+                    toDate: dateRange?.toDate
                   }}
                   onDateRangeChange={({ fromDate, toDate }) => {
-                    setParams?.({
-                      ...params,
+                    setDateRange({
                       fromDate: moment(fromDate, DATETIME_PARTTEN).startOf("d").utc().format(DATETIME_PARTTEN),
                       toDate: moment(toDate, DATETIME_PARTTEN).endOf("d").utc().format(DATETIME_PARTTEN)
                     });
                   }}
                   onClose={() => setOpenDateRange(false)}
+                  onClearValue={() => setDateRange({ fromDate: "", toDate: "" })}
                 />
               </AccordionSummary>
               <Box my={1} p="0px 16px">

diff --git a/src/components/commons/CustomFilter/DateRangeModal.tsx b/src/components/commons/CustomFilter/DateRangeModal.tsx
@@ -22,10 +22,11 @@ export interface DateRangeModalProps {
   onClose?: () => void;
   onDateRangeChange: (range: DateRange) => void;
   value?: DateRange;
+  onClearValue?: ((value: React.SetStateAction<DateRange>) => void) | undefined;
   open: boolean;
 }
 
-const DateRangeModal: React.FC<DateRangeModalProps> = ({ onClose, onDateRangeChange, open, value }) => {
+const DateRangeModal: React.FC<DateRangeModalProps> = ({ onClose, onDateRangeChange, open, value, onClearValue }) => {
   const { t } = useTranslation();
   const [dateRange, setDateRange] = useState<IDateRange>([null, null]);
 
@@ -40,6 +41,13 @@ const DateRangeModal: React.FC<DateRangeModalProps> = ({ onClose, onDateRangeCha
     onClose?.();
   };
 
+  const onCloseModalDateRange = () => {
+    onClose?.();
+    if (dateRange[0] === null || dateRange[1] === null) {
+      onClearValue && onClearValue({ fromDate: "", toDate: "" });
+    }
+  };
+
   return (
     <CustomModal open={open} onClose={() => onClose?.()} title={t("common.selectDateRange")} width={500}>
       <Container>
@@ -48,7 +56,7 @@ const DateRangeModal: React.FC<DateRangeModalProps> = ({ onClose, onDateRangeCha
           <WrapButton disabled={!dateRange[0] || !dateRange[1]} variant="contained" onClick={onSubmit}>
             {t("common.ok")}
           </WrapButton>
-          <Button variant="outlined" onClick={() => onClose?.()}>
+          <Button variant="outlined" onClick={onCloseModalDateRange}>
             {t("common.cancel")}
           </Button>
         </DatePickerFooter>