A function to parse dates in different arrays of objects

Question

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:

How can I create a function to work with all arrays, in which I can pass the name of the array as a parameter?
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';?
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)
Is it better to make date as an object or an array instead of a string to work with this function?

Are you going to set day and month manually in every other object, or can you actually get them from somewhere? — Ertan Hasani
– Ertan Hasani, Commented Dec 15, 2019 at 9:41
Can you give us some pseudo code outlining what you want to do? — Richie Bendall
– Richie Bendall, Commented Dec 15, 2019 at 10:01
@ErtanHasani I've updated my question, please see above. You can get day and month from the date in each array. For example here date: '01.07', 1 is day and 7 is month (July). — jupiteror
– jupiteror, Commented Dec 15, 2019 at 10:52

Ertan Hasani · Accepted Answer · 2019-12-15 14:09:50Z

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>
    )}
  />
);

Thank you very much! Yes, the format is always the same, so I put it inside the method. The only thing is you've lost getWorkingDay() function, so I've added it in return format(new Date(getWorkingDay(duedate)), "dd.MM.yyyy");

Collectives™ on Stack Overflow

A function to parse dates in different arrays of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related