Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create frontend utilities using Moment.js #187

Merged
merged 10 commits into from
Mar 7, 2022

Conversation

Boyazhang1
Copy link
Member

@Boyazhang1 Boyazhang1 commented Mar 5, 2022

Ticket link

Closes #145

Implementation description

  • created 3 moment helper functions in the file DateTimeUtils.ts

  • formatTimeHourMinutes and getElapsedHours have been implemented in VolunteerAvailabilityTableRow.tsx to display the time as (5:00pm) and calculate the difference in hours between two given times

  • Screen Shot 2022-03-04 at 7 06 40 PM
  • formatTimeHourMinutes can also be used to display the start and end times for events in PostingDetails.tsx and PostingCard.tsx

  • formatDateStringYear have been implemented in PostingDetails.tsx and PostingCard.tsx to display the start and end dates in the format (Monday, Feb 20, 2021)

Screen Shot 2022-03-04 at 7 09 13 PM

Screen Shot 2022-03-04 at 7 09 33 PM

  • Looking at the Figma, it can also be used in "Requests Pending Confirmation"

Screen Shot 2022-03-04 at 7 17 38 PM

Steps to test

Navigate to http://localhost:5000/graphql and run the mutations (see: #140)

Navigate to http://localhost:3000/volunteer/postings to check if formatDateStringYear formats the dates correctly
Navigate to http://localhost:3000/volunteer/posting/1 to check if formatDateStringYear formats the dates correctly
To test formatTimeHourMinutes and getElapsedHours, the VolunteerAvailabilityTableRow component must be added to an existing page

What should reviewers focus on?

  1. If the current implementations are appropriate
  2. If there are more places to use them
  3. If other moment.js utilities need to be made

Checklist

  • [ x] My PR name is descriptive and in imperative tense
  • [ x] My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
  • [ x] I have run the appropriate linter(s)
  • [ x] I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

…tails

modified:   frontend/package.json
	modified:   frontend/src/components/common/PostingDetails.tsx
		modified:   frontend/src/components/pages/volunteer/posting/VolunteerPostingsPage.tsx
	modified:   frontend/src/components/volunteer/PostingCard.tsx
	modified:   frontend/src/components/volunteer/shifts/VolunteerAvailabilityTableRow.tsx
	new file:   frontend/src/utils/DateTimeUtils.ts
	deleted:    frontend/src/utils/DateUtils.ts
	modified:   frontend/src/utils/TimeUtil.ts
	modified:   frontend/yarn.lock
@github-actions
Copy link

github-actions bot commented Mar 5, 2022

Visit the preview URL for this PR (updated for commit 37fd876):

https://sistering-dev--pr187-boya-create-datetime-6talozbe.web.app

(expires Mon, 14 Mar 2022 02:40:37 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Copy link
Member

@sherryhli sherryhli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work! Let's handle the precision of getElapsedHours as described in the attached design notes and then this is good to go

frontend/src/utils/DateTimeUtils.ts Outdated Show resolved Hide resolved
frontend/src/utils/TimeUtil.ts Outdated Show resolved Hide resolved
@Boyazhang1 Boyazhang1 requested a review from sherryhli March 6, 2022 22:13
Copy link
Member

@sherryhli sherryhli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small typo to fix

@Boyazhang1 Boyazhang1 requested a review from sherryhli March 6, 2022 22:34
sherryhli
sherryhli previously approved these changes Mar 6, 2022
Copy link
Member

@sherryhli sherryhli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Please address the lint warning prior to merging if you can though

Copy link
Member

@sherryhli sherryhli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚢

@Boyazhang1 Boyazhang1 merged commit c5dbdbe into main Mar 7, 2022
@Boyazhang1 Boyazhang1 deleted the boya/create-datetime-utilities branch March 7, 2022 03:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create utilities using Moment.js in the Frontend
2 participants