Объединение функции фильтра с картой

Question

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

Вспомогательная функция получает дату, когда свойство Phase = 'имя фазы'.

Мне удалось извлечь часть этого во вспомогательную функцию, но я чувствую, что есть еще более чистый способ написать это. Может кто-нибудь помочь, пожалуйста?

Вспомогательная функция

const getCoursePhaseDate = function(coursePhases, coursePhase) {
  return coursePhases.toJSON().filter((obj) => {
    return obj.phase === coursePhase;
  });
};

export default getCoursePhaseDate;

Компонент

import React from 'react';
import moment from 'moment';

// helpers
import getCoursePhaseDate from './helpers/getRehabStateDate';

const CourseInfo = ({ coursePhases }) => {

  const prep = getCoursePhaseDate(coursePhases, 'Prep')[0] && getCoursePhaseDate(coursePhases, 'Prep')[0].enteredOn || '';
  const intro = getCoursePhaseDate(coursePhases, 'Intro')[0] && getCoursePhaseDate(coursePhases, 'Intro')[0].enteredOn || '';
  const main = getCoursePhaseDate(coursePhases, 'Main')[0] && getCoursePhaseDate(coursePhases, 'Main')[0].enteredOn || '';
  const bonus = getCoursePhaseDate(coursePhases, 'Bonus')[0] && getCoursePhaseDate(coursePhases, 'Bonus')[0].enteredOn || '';

  const coursePhaseDates = [prep, intro, main, bonus];

  return (
    <div>
      <div>
        {
          coursePhaseDates.map((date, i) => {
            return (
              <span style={ styles.enteredOnDate } key={ i }>{ date }</span>
            );
          })
        }
      </div>
    </div>
  );
};

export default CourseInfo;

Answer 1

Эта строка и аналогичные могут быть изменены, как показано ниже, с использованием параметров деструктуризации и параметров по умолчанию

const {enteredOn: prep = ''} = getCoursePhaseDate(coursePhases, 'Prep')[0] || {};

Это также уменьшает вызов функций в два раза.

Надеюсь, это поможет:)

Answer 2

const hasOwn = {}.hasOwnProperty;

const getCoursePhaseDate = function(coursePhases, coursePhase) {
  const foundPhase = coursePhases.toJSON().find(obj => {
     return obj.phase === coursePhase && hasOwn.call(obj, 'enteredOn');
  });

  return foundPhase != null ? foundPhase.enteredOn : '';
};

export default getCoursePhaseDate;

import React from 'react';
import moment from 'moment';

// helpers
import getCoursePhaseDate from './helpers/getRehabStateDate';

const CourseInfo = ({ coursePhases }) => {
  const coursePhaseDates = ['Prep', 'Intro', 'Main', 'Bonus'].map(phase => {
     return getCoursePhaseDate(coursePhaseDates, phase);
  });

  return (
    <div>
      <div>
        {
          coursePhaseDates.map((date, i) => {
            return (
              <span style={ styles.enteredOnDate } key={ i }>{ date }</span>
            );
          })
        }
      </div>
    </div>
  );
};

export default CourseInfo;

Answer 3

Если вы хотите сделать его чище и проще, используйте функции стрелок:

const getCoursePhaseDate = (coursePhases, coursePhase) => coursePhases.toJSON().filter((obj) => obj.phase === coursePhase));

И даже чище с разрушением:

const getCoursePhaseDate = (coursePhases, coursePhase) => coursePhases.toJSON().filter(({ phase }) => phase === coursePhase));