Как сделать функцию многоразового использования, чтобы я придерживался хорошей практики DRY?

Question

Это мой код

  const renderEventStartEndDate = entry => {
    const { classes } = props;
    const isValidStartDate = isDateValid(entry.startDate);
    const isValidEndDate = isDateValid(entry.endDate);

    if (isValidStartDate && isValidEndDate && entry.startDate !== entry.endDate) {
      return (
        <div className={classes.textContainer}>
          {getFormattedEventDate(entry.startDate).toUpperCase()}

          {` TO ${getFormattedEventDate(entry.endDate).toUpperCase()}`}
        </div>
      );
    } else if (entry.startDate === entry.endDate && isValidStartDate && isValidEndDate) {
      return (
        <div className={classes.textContainer}>
          {getFormattedEventDate(entry.startDate).toUpperCase()}
        </div>
      );
    } else if ((isValidStartDate && !isValidEndDate) || (!isValidStartDate && isValidEndDate)) {
      if (isValidStartDate)
        return (
          <div className={classes.textContainer}>
            {getFormattedEventDate(entry.startDate).toUpperCase()}
          </div>
        );

      if (isValidEndDate)
        return (
          <div className={classes.textContainer}>
            {getFormattedEventDate(entry.endDate).toUpperCase()}
          </div>
        );
    }

У меня есть приложение, и я хочу использовать вышеупомянутый код, поэтому я особенно хочу уменьшить код возврата здесь. Я хочу создать функцию, подобную приведенной ниже, а затем использовать ее в разных компонентах.

export const isDateValid = date => {
  const dateObj = new Date(date);
  return !isNaN(dateObj.getTime());
};

Answer 1

Много необходимости рефакторинга, Вы можете сначала отделить, Бизнес логики c от View. Как разбор дат и создание строки.

Пример:

const getDate = entry => {
  const isValidStartDate = isDateValid(entry.startDate);
  const isValidEndDate = isDateValid(entry.endDate);
  if (isValidStartDate && isValidEndDate && entry.startDate !== entry.endDate) {
    return `${getFormattedEventDate(
      entry.startDate
    ).toUpperCase()} TO ${getFormattedEventDate(entry.endDate).toUpperCase()}`;
  } else if (
    entry.startDate === entry.endDate &&
    isValidStartDate &&
    isValidEndDate
  ) {
    return `${getFormattedEventDate(entry.startDate).toUpperCase()}`;
  } else if (
    (isValidStartDate && !isValidEndDate) ||
    (!isValidStartDate && isValidEndDate)
  ) {
    if (isValidStartDate)
      return `${getFormattedEventDate(entry.startDate).toUpperCase()} `;
    if (isValidEndDate)
      return `${getFormattedEventDate(entry.endDate).toUpperCase()}`;
  }
};
const renderEventStartEndDate = entry => {
  const { classes } = props;
  return <div className={classes.textContainer}>{getDate(entry)}</div>;
};