Improve date format in last updated field #168
Conversation
WalkthroughThe changes introduced involve enhancements to the display of document timestamps and styling adjustments for improved responsiveness. Specifically, the date formatting logic has been modified to allow for user preference in time display (24-hour or 12-hour format) and to conditionally show the year based on the date's recency. Additionally, the styling for certain elements has been updated to allow for better adaptability in the layout. Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/assets/styles/components/list_document.scss (1 hunks)
- src/features/documents/DocumentDetail.tsx (2 hunks)
- src/features/documents/DocumentList.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- src/assets/styles/components/list_document.scss
Additional comments not posted (3)
src/features/documents/DocumentDetail.tsx (2)
21-21: LGTM!The import statement for
selectPreferencesis correct and necessary for retrieving user preferences.The code changes are approved.
Line range hint
28-65: LGTM! But verify theuse24HourClockpreference.The implementation correctly retrieves the user preference and applies it to the date formatting logic. However, ensure that the
use24HourClockpreference is correctly set in the application's state.The code changes are approved.
Run the following script to verify the
use24HourClockpreference:Verification successful
The
use24HourClockpreference is correctly set and used in the application's state.The preference is defined and managed in
usersSlice.ts, initialized fromlocalStorage, and used consistently across different components for formatting time. This confirms its intended functionality.
src/features/users/usersSlice.ts: Initialization and management ofuse24HourClock.src/features/users/Preferences.tsx: Usage in user preferences.src/features/documents/DocumentList.tsxandDocumentDetail.tsx: Usage in document components.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the `use24HourClock` preference is correctly set in the application's state. # Test: Search for the `use24HourClock` preference. Expect: Correct setting in the application's state. rg --type js --type ts --type tsx --type json 'use24HourClock'Length of output: 90
Script:
#!/bin/bash # Description: Verify the `use24HourClock` preference is correctly set in the application's state. # Test: Search for the `use24HourClock` preference. Expect: Correct setting in the application's state. rg --type js --type ts --type jsx --type json 'use24HourClock'Length of output: 90
Script:
#!/bin/bash # Description: Verify the `use24HourClock` preference is correctly set in the application's state. # Test: Search for the `use24HourClock` preference. Expect: Correct setting in the application's state. rg 'use24HourClock'Length of output: 1306
src/features/documents/DocumentList.tsx (1)
214-217: LGTM! But verify theuse24HourClockpreference.The implementation correctly updates the date formatting logic to conditionally include the year based on the date's recency. However, ensure that the
use24HourClockpreference is correctly set in the application's state.The code changes are approved.
Run the following script to verify the
use24HourClockpreference:Verification successful
Verification Successful:
use24HourClockPreference is Correctly SetThe
use24HourClockpreference is correctly set and utilized within the application's state. It is defined inusersSlice.tsand accessed throughuseAppSelector(selectPreferences)in various components, confirming its proper integration and usage.
- File:
src/features/users/usersSlice.ts- Usage: Accessed in
Preferences.tsx,DocumentList.tsx, andDocumentDetail.tsx.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the `use24HourClock` preference is correctly set in the application's state. # Test: Search for the `use24HourClock` preference. Expect: Correct setting in the application's state. rg --type js --type ts --type tsx --type json 'use24HourClock'Length of output: 90
Script:
#!/bin/bash # Description: Verify the `use24HourClock` preference is correctly set in the application's state. # Test: Search for the `use24HourClock` preference. Expect: Correct setting in the application's state. rg --type js --type ts --type tsx 'use24HourClock'Length of output: 78
Script:
#!/bin/bash # Description: Verify the `use24HourClock` preference is correctly set in the application's state. # Find all .tsx files and search for the `use24HourClock` preference within them. fd --extension tsx --exec rg 'use24HourClock' {} # Also search in .ts and .js files rg --type js --type ts 'use24HourClock'Length of output: 2013
What this PR does / why we need it?
This PR addresses several issues with the date format display in the
Last Updatedfield:Any background context you want to provide?
What are the relevant tickets?
Fixes #167
Checklist
Summary by CodeRabbit
New Features
Style