feat: display date as time has passed

[onim-at]

PR Checklist

• - Commit messages are descriptive, it will be used in our Release Notes
• - Unit and e2e tests for the changes that have been added (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix (fixes an issue)
• Feature (adds functionality)
• Code style update
• Refactoring (no functional changes)
• Build related changes
• CI related changes
• Documentation changes
• Other... Please describe:

What is the current behavior?

Dates are shown as timestamp

What is the new behavior?

Dates are shown as "time has passed"

To-Do

• Create component in the library to cover this
• At least one example in the end-to-end tests of the 'just now' render of the component displayed.
• Fix ResearchArticle.test.tsx

List everywhere it should go:

• Comments and nested comments across all modules where there are comments
• Research module listing
• Single research and research updates
• Questions module listing
• Single question
• Single How-To

Does this PR introduce a breaking change?

• Yes
• No

Git Issues

Closes #3653

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of our monthly maintainers call (first Monday of the month)

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on Discord in the Community Platform development channel.

[benfurber]

Nice one so far @onim-at - looks like exactly the right direction. 🥳

[cypress]

onearmy-community-platform    Run #6226

Run Properties:   Passed #6226  •  25af3a3861: test: add unit test to DisplayDate component

Project	onearmy-community-platform
Branch Review	pull/3840
Run status	Passed #6226
Run duration	04m 34s
Commit	25af3a3861: test: add unit test to DisplayDate component
Committer	cosimochetta
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	2
Pending	0
Skipped	0
Passing	60
View all changes introduced in this branch ↗︎

[onim-at]

Hello @benfurber! I've added a check on the date in the question cypress test, is this what you intended?
Also I don't know where to ask so I'll try here, is it possible to join the discord developer chat?

[benfurber]

@onim-at Nice one, thank you. I'll have a look today. You should be able to join discord with this link.

[github-actions]

Visit the preview URL for this PR (updated for commit 25af3a3):

https://onearmy-next--pr3840-3653-date-kffnhths.web.app

_{(expires Sun, 06 Oct 2024 15:30:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d65e4f8fee2f6ab2da0c1c3b85b8797d66afa59}

[benfurber]

Just the one thing that's an absolute must change with the console log but there's a couple of bits I'd appreciate.

If you have a look at DiscussionTitle you'll see a style of stories/tests I think would be good.

The stories file has a separate function for each display expected (roughly) and then a test checks that each function has the expected output. So in this instance roughly somthing like:

stories:

export const TwoMonthsAGo: StoryFn<typeof DisplayDate> = () => {
  const twoMonthsAGo = subMonths(new Date(), 2)
  return (
      <DisplayDate date={twoMonthsAGo}></DisplayDate>
)}

test:

describe('DisplayDate', () => {
...
  it('renders correctly when two months ago', () => {
    const { getByText } = render(
      <TwoMonthsAGo {...(TwoMonthsAGo.args as IProps)} />,
    )

    expect(getByText("2 months ago")).toBeInTheDocument()
  })

Then it's a quick test of our implementation of the package (not the package itself) and more importantly, prevents a regression.

[onearmy-bot]

🎉 This PR is included in version 1.216.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[dalibormrska]

Looks absolutely awesome! I'm really happy to see it implemented! Great job @onim-at and @benfurber! 🎉