CODEWITHSUNDEEP
javascriptreactjs
jupiteror
jupiteror

Reputation: 1205

A function to parse dates in different arrays of objects

I have some arrays defined like this:

const ops = [
  { value: 'YY.00', label: 'Year', type: 'period', info: 'Tax OPS', date: '31.12' }
];

const ops1 = [
  { value: 'YY.00', label: 'Year', type: 'period', info: 'Tax OPS 1', date: '01.07', nextYear: 'true' }
];

const oms = [
  { value: 'YY.00', label: 'Year', type: 'period', info: 'Tax OMS', date: '31.12' }
];

I need to parse due dates in three different places through a function getWorkingDay(). The due date consists of a date from an array's object and a year value, which is passed through react-final-form values. If the object has nextYear: 'true', the year should be incremented by one.

I can get the due date for a single array (for example, ops) like this:

const periodDate = ops.find(item => item.type === "period").date;
const [day, month] = periodDate ? periodDate.split(".") : [0, 0];
const yearFull = '2019';
const duedate = new Date();

duedate.setDate(Number(day));
duedate.setMonth(Number(month) - 1);
duedate.setFullYear(parseInt(yearFull) + 1);

And then parse it through getWorkingDay() and format():

<div>{format(new Date(getWorkingDay(duedate)), 'dd.MM.yyyy')}</div>

My questions are:

  1. How can I create a function to work with all arrays, in which I can pass the name of the array as a parameter?
  2. How can I pass year value as a second parameter from react-final-form values to this function, instead of hard coding const yearFull = '2019';?
  3. How can I check nextYear: 'true' from this function to increment the year by one? (duedate.setFullYear should be the year or the year + 1, when nextYear is true)
  4. Is it better to make date as an object or an array instead of a string to work with this function?

Upvotes: 0

Views: 67

Answers (1)

Ertan Hasani
Ertan Hasani

Reputation: 1773

You can do something like this. Create a new object that contains these three arrays, and have a method that returns the formatted working day by passing name of the array that you gonna access, year (by form), and format of the date.

const ops = [
  { value: 'YY.00', label: 'Year', type: 'period', info: 'Tax OPS', date: '31.12' }
];

const ops1 = [
  { value: 'YY.00', label: 'Year', type: 'period', info: 'Tax OPS 1', date: '01.07', nextYear: 'true' }
];

const oms = [
  { value: 'YY.00', label: 'Year', type: 'period', info: 'Tax OMS', date: '31.12' }
];

const myObject = {
  ops,
  ops1,
  oms
};

const formatedWorkingDate = (name, year, dateFormat) => {
  //get the period object by accessing the array in myObject
  const period = myObject[name].find(p => p.type === "period");
  //get periodDate
  const periodDate = period.date;
  const [day, month] = periodDate ? periodDate.split(".") : [0, 0];
  const duedate = new Date();

  duedate.setDate(Number(day));
  duedate.setMonth(Number(month) - 1);
  //if nextYear set year + 1 otherwise set only year
  duedate.setFullYear(period.nextYear ? parseInt(year) + 1 : parseInt(year));

  //return formated date
  return format(new Date(duedate), dateFormat);
};

return (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, values }) => (
      <form onSubmit={handleSubmit}>
        call formatedWorkingDate function by passing the name of the array that
        we need to access, year value from input form and format that we want
        the date to be
        <div>{formatedWorkingDate("ops", values.year, "dd.MM.yyyy")}</div>
        <div>{formatedWorkingDate("ops1", values.year, "dd.MM.yyyy")}</div>
        <div>{formatedWorkingDate("oms", values.year, "dd.MM.yyyy")}</div>
      </form>
    )}
  />
);

If the format will be the same for all you can just call that format inside the method and not pass at all:

const formatedWorkingDate = (name, year) => {
  //other part of code

  //return formated date
  return format(new Date(duedate), "dd.MM.yyyy");
};

return (
  <Form
    onSubmit={onSubmit}
    render={({ handleSubmit, values }) => (
      <form onSubmit={handleSubmit}>
        call formatedWorkingDate function by passing the name of the array that
        we need to access, year value from input form
        <div>{formatedWorkingDate("ops", values.year)}</div>
        <div>{formatedWorkingDate("ops1", values.year)}</div>
        <div>{formatedWorkingDate("oms", values.year)}</div>
      </form>
    )}
  />
);

Upvotes: 1

Related Questions