ISSUE #235 - feat: DaysPassed component that counts days passed from a given date

chaaals commented 1 year ago

Please DO NOT DELETE this template. Fill it. PR without your declaration that you licence your code under MIT will be discarded.

Tips

Give the same name to the pull request as the name of ticket if possible
Make the title in form of: Pull request title (#)
Write a pull request description that is detailed enough to understand what the pull request does, how, and why.
Test your code thoroughly before PR.

Pull Request title

Pull request title (#235)

Pull Request description

I Implemented a component that counts the days passed. Here is the preview of the component and the helper function:

I haven't tested out the component yet cause I have bad luck in setting up docker (WSL issue) but I am confident that the component should work since its only rendering the output of the helper fn.

Here is an example output of calcDaysPassed fn:

This should display the number of hours or minutes if it hasn't been a day. If it's been a day, it should render the day/days and hour/hours.

We need your declaration that your contribution is MIT licensed without it, we can not merge your code. To make clear that you license your contribution under the MIT you have to acknowledge this by using the following check-box.

[x] I hereby declare this contribution to be licenced under the MIT license

CLAassistant commented 1 year ago

All committers have signed the CLA.

atompie commented 1 year ago

@chaaals Let me test it and if everything works I will merge it. BTW you do not need the docker to test a component as it does not connect to API. You may place it int the src/components/pages/TryOut.js and see if it works bu typing http://localhost:3000/TryOut

chaaals commented 1 year ago

Hi I made a quick test and found that it works for the passed dates but not for the future. It is my mistake that I have not clearly described that it should work for future dates to. I mean for the past days it prints like -1d 20h but for the future +2d 24h.

Could you make it to work for future days to?

yah sure! I'll make the changes 😊

chaaals commented 1 year ago

Hi I made a quick test and found that it works for the passed dates but not for the future. It is my mistake that I have not clearly described that it should work for future dates to. I mean for the past days it prints like -1d 20h but for the future +2d 24h.

Could you make it to work for future days to?

Hey @atompie ! I just implemented the requested changes, I hope I understood it correctly.

Here is an example use-case of the new function:

it should return an object containing inPresent and inFuture keys
here is an example output of the new function:

atompie commented 1 year ago

Hi @chaaals.

I have made a simple change to the code so I can test it:

  return (
    <div>
      passed {daysPassed.inPresent}, will happen {daysPassed.inFuture}
    </div>
  );

When I do <DaysPassed date="2022-10-10 10:00:00"/> I get:

passed 4 days 1 hour, will happen 5 days 1 hour

The passed part is correct it passed 4 days 1 hour from 2022-10-14 11:00:00 when I am doing the test.

But the part will happen 5 days 1 hour is incorrect. I would expect it to be 0 days because the date 2022-10-10 10:00:00 already passed

And another example:

<DaysPassed date="2022-10-15 10:00:00"/>

I would expect the following result:

passed 0 days will happen in 0day 23 hours -

I got:

passed 1 hour will happen 1 hour

I think you should discover in the code if the defined date is before or after current time. And then calculate the difference.

BTW. I think that the name I proposed for the plugin may be confusing. It is more like a TimeDifference then a DaysPassed.

What we would like to achieve is a component that we could place next to a date for example for the current time 2022-10-14 11:00:00 have:

2022-10-15 11:00:00 (+1 day to be triggered)

or

2022-10-10 09:00:00 (triggered -4 days 1 hour)

chaaals commented 1 year ago

Hi @chaaals.

I have made a simple change to the code so I can test it:
  return (
    <div>
      passed {daysPassed.inPresent}, will happen {daysPassed.inFuture}
    </div>
  );
When I do <DaysPassed date="2022-10-10 10:00:00"/> I get:

passed 4 days 1 hour, will happen 5 days 1 hour

The passed part is correct it passed 4 days 1 hour from 2022-10-14 11:00:00 when I am doing the test.

But the part will happen 5 days 1 hour is incorrect. I would expect it to be 0 days because the date 2022-10-10 10:00:00 already passed

And another example:

<DaysPassed date="2022-10-15 10:00:00"/>

I would expect the following result:

passed 0 days will happen in 0day 23 hours -

I got:

passed 1 hour will happen 1 hour

I think you should discover in the code if the defined date is before or after current time. And then calculate the difference.

BTW. I think that the name I proposed for the plugin may be confusing. It is more like a TimeDifference then a DaysPassed.

What we would like to achieve is a component that we could place next to a date for example for the current time 2022-10-14 11:00:00 have:

2022-10-15 11:00:00 (+1 day to be triggered)

or

2022-10-10 09:00:00 (triggered -4 days 1 hour)

thank you for this! I think I get it now!

chaaals commented 1 year ago

Hey @atompie , I hope I got everything right this time! 😊. I just pushed a recent commit with the following changes:

New name TimeDifference as suggested and was applied to all
Refactored the function to match the expected output. Here is a preview of the testcases and results:

Thank you so much for the patience and detailed explanation earlier 😊.

atompie commented 1 year ago

@chaaals Everything looks great. Merging.

atompie commented 1 year ago

@chaaals If you would like to contribute with another task we have one waiting to be done here: https://github.com/Tracardi/tracardi-gui/issues/203. I thought you could be interested.

chaaals commented 1 year ago

@chaaals If you would like to contribute with another task we have one waiting to be done here: #203. I thought you could be interested.

I'll check it out if its something that I can do 😊. I'll leave a comment on the issue if I am up for the task!

Tracardi / tracardi-gui