Работаю над фильтром по дате с date-fns. Выглядит он так:
Есть массив с ключами возможных временных отрезков:
export const dateCases = ['today', 'tomorrow', 'thisWeekend', 'thisWeek', 'nextWeek', 'thisMonth', 'nextMonth'];
Есть функция, которая переводит даты диапазона в нужный формат:
const handleDate = (startDate, endDate) => {
return {
start_at__date__gte: format(startDate, 'yyyy-M-d'),
end_at__date__lte: format(endDate, 'yyyy-M-d'),
};
};
И есть объект с возможными диапазонами дат, в который выводятся даты в уже нужном формате:
export const caseOptions = {
today: handleDate(new Date(), new Date()),
tomorrow: handleDate(addDays(new Date(), 1), addDays(new Date(), 1)),
thisWeekend: handleDate(endOfWeek(new Date()), addDays(endOfWeek(new Date()), 1)),
thisWeek: handleDate(new Date(), endOfWeek(new Date())),
nextWeek: handleDate(addDays(startOfWeek(new Date()), 7), addDays(endOfWeek(new Date()), 7)),
thisMonth: handleDate(new Date(), endOfMonth(new Date())),
nextMonth: handleDate(addMonths(startOfMonth(new Date()), 1), lastDayOfMonth(addMonths(startOfMonth(new Date()), 1))),
};
В сам компонент фильтра передается и мапится массив dateCases. На клик по определенной дате ее value попадает в функцию на onChange, которая принимает это значение и возвращает нужную дату из объекта caseOptions, перед ее отправкой.
<FilterSelect disabled={disabled} filters={filters} onChange={handleDateFilterChange}>
<MenuItem value="">{t('filter.date')}</MenuItem>
{dateCases.map(date => (
<MenuItem key={date} value={date}>
{t('filter.evetDate', { context: date })}
</MenuItem>
))}
</FilterSelect>
const handleDateFilterChange = ({ target: { value } }) => {
onFilterChange({
...filters,
...caseOptions[value],
});
};
И в общем работает все хорошо, но у подобного решения возможен потенциальный баг, потому как дата в объекте caseOptions создается только один раз во время инициализации, из-за чего в какой-то момент возможна выдача неактуальной даты.
Как можно избавиться от этого, и сделать так чтобы caseOptions создавалась в рантайме?