Рефакторинг этой проверки Yup с помощью метода .when (), который возвращает одну схему с некоторой проверкой или другую схему с другой проверкой - PullRequest
Новая
       5

Рефакторинг этой проверки Yup с помощью метода .when (), который возвращает одну схему с некоторой проверкой или другую схему с другой проверкой

0 голосов
/ 05 марта 2020

Мне нужно провести рефакторинг этого кода, так как есть много повторяющихся строк.

Я должен использовать проверки Yup и, в частности, метод .when ()

Было предложено, чтобы я сделал .when () проверяет поле 'state'. Если состояние находится в состоянии ожидания, оно должно вернуть схему, где поля не требуются. Если он не находится в состоянии ожидания, тогда все поля, кроме personMessage, personDate и personNumber, обязательны для заполнения.

Поля personDate и personNumber нуждаются в дополнительной проверке в обеих схемах. Если состояние находится в состоянии ожидания, то требуется как минимум 1 из 2 полей. Это означает, что если пользователь вводит значение в personDate, то personNumber не требуется.

Вот код: 

import * as Yup from 'yup';
import moment from 'moment';
import * as errorMsg from '../constants/errorMessages';

export default Yup.object().shape({
  state: Yup.string()
    .required()
    .oneOf([
      'start',
      'pending',
      'closed',
    ]),
  programId: Yup.string().when(['state'], (state, schema) =>
    state !== 'pending' && state !== 'closed'
      ? schema.required('Program ID ' + errorMsg.required)
      : schema
  ),

  personMessage: Yup.string().max(
    230,
    'Message has a max length of 230 characters!'
  ),
  dDate: Yup.string()
    .when(['state'], (state, schema) =>
      state !== 'pending' && state !== 'closed'
        ? schema.required('dDate ' + errorMsg.required)
        : schema
    )
    .nullable()
    .test(
      'Should be a valid date',
      'Please enter or select a valid date',
      function(value) {
        return this.options.context.dDates.includes(
          moment.utc(value).format('YYYY-MM-DD')
        );
      }
    )
    .test(
      'Validate dDate is the future',
      'Please enter or select a valid date',
      value => moment.utc(value).isAfter(moment.utc(), 'day')
    ),
  pDate: Yup.string()
    .when(['state'], (state, schema) =>
      state !== 'pending' && state !== 'closed'
        ? schema.required('pDate is required')
        : schema
    )
    .nullable()
    .test(
      'dDate should be a valid date',
      'Please enter or select a valid pDate',
      function(value) {
        return this.options.context.pDates.includes(
          moment.utc(value).format('YYYY-MM-DD')
        );
      }
    )
    .test(
      'Validate dDate is the future',
      'Please enter or select a valid pDate',
      value => moment.utc(value).isAfter(moment.utc(), 'day')
    )
    .test(
      'Validate pDate is after dDate',
      'pDate must be greater or equal to dDate',
      function(value) {
        return value >= this.parent.dDate;
      }
    ),
  personNumber: Yup.string().when([], (v, { originalValue }) => {
    if (originalValue) {
      return Object.values(originalValue).includes('-')
        ? Yup.string()
            .max(10, 'person # has a max length of 10 characters')
            .matches(
              /^[a-zA-Z0-9-]*$/,
              'person # can only contain letters, numbers and dashes'
            )
        : Yup.string()
            .max(9, 'person # has a max length of 9 characters')
            .matches(
              /^[a-zA-Z0-9-]*$/,
              'person # can only contain letters, numbers and dashes'
            );
    }
  }),
  personDate: Yup.date().nullable(),
});
...