-
Notifications
You must be signed in to change notification settings - Fork 0
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
Conversation
…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
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 🌎 |
There was a problem hiding this 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
…wblueprint/sistering into boya/create-datetime-utilities
There was a problem hiding this 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
There was a problem hiding this 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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🚢
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
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)
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?
Checklist