theforeman/foreman_remote_execution

View on GitHub
webpack/JobWizard/steps/Schedule/RepeatWeek.js

Summary

Maintainability
A
50 mins
Test Coverage
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { FormGroup, Checkbox } from '@patternfly/react-core';
import { translate as __, documentLocale } from 'foremanReact/common/I18n';
import { RepeatDaily } from './RepeatDaily';
import { noop } from '../../../helpers';

export const getWeekDays = () => {
  const locale = documentLocale().replace(/-/g, '_');
  const baseDate = new Date(Date.UTC(2017, 0, 1)); // just a Sunday
  const weekDays = [];
  const formatOptions = { weekday: 'short', timeZone: 'UTC' };
  for (let i = 0; i < 7; i++) {
    try {
      weekDays.push(baseDate.toLocaleDateString(locale, formatOptions));
    } catch {
      weekDays.push(baseDate.toLocaleDateString('en', formatOptions));
    }
    baseDate.setDate(baseDate.getDate() + 1);
  }
  return weekDays;
};

export const RepeatWeek = ({ repeatData, setRepeatData, setValid }) => {
  const { daysOfWeek, at } = repeatData;
  useEffect(() => {
    if (daysOfWeek && Object.values(daysOfWeek).includes(true) && at) {
      setValid(true);
    } else {
      setValid(false);
    }
    return () => setValid(true);
  }, [setValid, daysOfWeek, at]);
  const days = getWeekDays();
  const handleChangeDays = (checked, { target: { name } }) => {
    setRepeatData({
      ...repeatData,
      daysOfWeek: { ...repeatData.daysOfWeek, [name]: checked },
    });
  };
  return (
    <>
      <FormGroup label={__('Days of week')} isRequired>
        <div id="repeat-on-weekly">
          {days.map((day, index) => (
            <Checkbox
              ouiaId={`repeat-on-day-${index}`}
              aria-label={`${day} checkbox`}
              key={index}
              isChecked={daysOfWeek?.[index]}
              name={index}
              id={`repeat-on-day-${index}`}
              onChange={handleChangeDays}
              label={day}
            />
          ))}
        </div>
      </FormGroup>

      <RepeatDaily
        repeatData={repeatData}
        setRepeatData={setRepeatData}
        setValid={noop}
      />
    </>
  );
};
RepeatWeek.propTypes = {
  repeatData: PropTypes.object.isRequired,
  setRepeatData: PropTypes.func.isRequired,
  setValid: PropTypes.func.isRequired,
};