diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index 3438597400..5baf7c3280 100644 --- 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 = ({ query, setQuer const [params, setParams] = useState(query || filterValue || {}); const [paramsFilter, setParamsFilter] = useState(filterValue || {}); + const [dateRange, setDateRange] = useState({ fromDate: "", toDate: "" }); const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => { setExpanded(newExpanded ? panel : false); @@ -1045,6 +1046,7 @@ const FilterGovernanceVotes: React.FC = ({ 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 = ({ 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 = ({ query, setQuer { - 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: "" })} /> diff --git a/src/components/commons/CustomFilter/DateRangeModal.tsx b/src/components/commons/CustomFilter/DateRangeModal.tsx index a97f6c75aa..8178b7825f 100644 --- 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) => void) | undefined; open: boolean; } -const DateRangeModal: React.FC = ({ onClose, onDateRangeChange, open, value }) => { +const DateRangeModal: React.FC = ({ onClose, onDateRangeChange, open, value, onClearValue }) => { const { t } = useTranslation(); const [dateRange, setDateRange] = useState([null, null]); @@ -40,6 +41,13 @@ const DateRangeModal: React.FC = ({ onClose, onDateRangeCha onClose?.(); }; + const onCloseModalDateRange = () => { + onClose?.(); + if (dateRange[0] === null || dateRange[1] === null) { + onClearValue && onClearValue({ fromDate: "", toDate: "" }); + } + }; + return ( onClose?.()} title={t("common.selectDateRange")} width={500}> @@ -48,7 +56,7 @@ const DateRangeModal: React.FC = ({ onClose, onDateRangeCha {t("common.ok")} -