@Nivaech

Как грамотно переместить функционал в runtime?

Работаю над фильтром по дате с 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 создавалась в рантайме?
  • Вопрос задан
  • 23 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы