Adds v2 countdown eol text in side menu #1546
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/webapp/app/components/navigation/SideMenu.tsxOops! Something went wrong! :( ESLint: 8.45.0 ESLint couldn't find the config "custom" to extend from. Please check that the name of the config is correct. The config "custom" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe changes introduce a new functional component called Changes
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: 1
🧹 Outside diff range and nitpick comments (1)
apps/webapp/app/components/navigation/SideMenu.tsx (1)
247-248: Align notification text with countdown displayThe notification text and countdown display should use consistent terminology.
Consider updating the text for better consistency:
- <Paragraph variant="small/bright"> - This is a v2 project. V2 will be deprecated on January 31, 2025.{" "} + <Paragraph variant="small/bright"> + This is a v2 project. V2 will go offline on January 31, 2025.{" "}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
apps/webapp/app/components/navigation/SideMenu.tsx(3 hunks)
🔇 Additional comments (1)
apps/webapp/app/components/navigation/SideMenu.tsx (1)
95-121: Verify single implementation of countdown logic
Let's ensure this countdown implementation is not duplicated elsewhere in the codebase.
✅ Verification successful
Let me search for any other countdown-related implementations to ensure completeness.
Let me try again with the correct file type flag.
Let me try one final search without file type restrictions since the previous attempts had issues with type flags.
Based on the search results, I can see that the V2Countdown component is only used in SideMenu.tsx and there are no other countdown implementations or similar V2 offline notifications in the codebase. The implementation appears to be self-contained and unique.
Implementation is correctly isolated
The countdown component is properly isolated in the SideMenu and there are no duplicate countdown implementations that would need consolidation.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for similar countdown implementations or V2 EOL date references
rg -g '!*.{json,md}' -i "2025.*january.*31|january.*31.*2025"
ast-grep --pattern 'useEffect(() => {
$$$
setInterval($$$)
$$$
})'
Length of output: 275
Script:
#!/bin/bash
# Search for countdown-related implementations
rg -i "countdown|timer" --type tsx --type ts -A 5
Length of output: 79
Script:
#!/bin/bash
# Search for countdown-related implementations
rg -i "countdown|timer" -t typescript -A 5
# Also search for similar date calculations
rg -i "gettime.*1000.*60.*60.*24" -t typescript
Length of output: 164
Script:
#!/bin/bash
# Search for countdown-related implementations and timer logic
rg -i "countdown|timer|gettime.*1000.*60.*60.*24" -g "*.{ts,tsx}" -A 5
# Also search for any V2-related UI components
rg -i "v2.*offline|offline.*v2" -g "*.{ts,tsx}" -A 5
Length of output: 65898
| function V2Countdown() { | ||
| const [days, setDays] = useState(0); | ||
|
|
||
| useEffect(() => { | ||
| const targetDate = new Date("2025-01-31T00:00:00Z"); | ||
|
|
||
| const calculateDays = () => { | ||
| const now = new Date(); | ||
| const difference = targetDate.getTime() - now.getTime(); | ||
| return Math.floor(difference / (1000 * 60 * 60 * 24)); | ||
| }; | ||
|
|
||
| const timer = setInterval(() => { | ||
| setDays(calculateDays()); | ||
| }, 1000 * 60 * 60); // Update every hour | ||
|
|
||
| setDays(calculateDays()); // Initial calculation | ||
|
|
||
| return () => clearInterval(timer); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Header2 className="flex-wrap gap-4 text-error"> | ||
| V2 goes offline in <span className="tabular-nums">{days}d</span> | ||
| </Header2> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize countdown implementation and add error handling
The countdown implementation could be improved in several ways:
- The hourly update interval is more frequent than necessary since days only change once per day
- The target date should be configurable for easier maintenance
- The calculation needs to handle timezone differences and past dates
Consider applying these improvements:
-function V2Countdown() {
+const V2_EOL_DATE = new Date("2025-01-31T00:00:00Z");
+
+function V2Countdown() {
const [days, setDays] = useState(0);
useEffect(() => {
- const targetDate = new Date("2025-01-31T00:00:00Z");
-
const calculateDays = () => {
const now = new Date();
- const difference = targetDate.getTime() - now.getTime();
- return Math.floor(difference / (1000 * 60 * 60 * 24));
+ const difference = V2_EOL_DATE.getTime() - now.getTime();
+ return Math.max(0, Math.floor(difference / (1000 * 60 * 60 * 24)));
};
const timer = setInterval(() => {
setDays(calculateDays());
- }, 1000 * 60 * 60); // Update every hour
+ }, 1000 * 60 * 60 * 24); // Update once per day
setDays(calculateDays()); // Initial calculation
return () => clearInterval(timer);
- }, []);
+ }, []); // Consider adding V2_EOL_DATE as a dependency if it becomes configurable
return (
<Header2 className="flex-wrap gap-4 text-error">
- V2 goes offline in <span className="tabular-nums">{days}d</span>
+ {days > 0 ? (
+ <>V2 goes offline in <span className="tabular-nums">{days}d</span></>
+ ) : (
+ <>V2 is no longer available</>
+ )}
</Header2>
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function V2Countdown() { | |
| const [days, setDays] = useState(0); | |
| useEffect(() => { | |
| const targetDate = new Date("2025-01-31T00:00:00Z"); | |
| const calculateDays = () => { | |
| const now = new Date(); | |
| const difference = targetDate.getTime() - now.getTime(); | |
| return Math.floor(difference / (1000 * 60 * 60 * 24)); | |
| }; | |
| const timer = setInterval(() => { | |
| setDays(calculateDays()); | |
| }, 1000 * 60 * 60); // Update every hour | |
| setDays(calculateDays()); // Initial calculation | |
| return () => clearInterval(timer); | |
| }, []); | |
| return ( | |
| <Header2 className="flex-wrap gap-4 text-error"> | |
| V2 goes offline in <span className="tabular-nums">{days}d</span> | |
| </Header2> | |
| ); | |
| } | |
| const V2_EOL_DATE = new Date("2025-01-31T00:00:00Z"); | |
| function V2Countdown() { | |
| const [days, setDays] = useState(0); | |
| useEffect(() => { | |
| const calculateDays = () => { | |
| const now = new Date(); | |
| const difference = V2_EOL_DATE.getTime() - now.getTime(); | |
| return Math.max(0, Math.floor(difference / (1000 * 60 * 60 * 24))); | |
| }; | |
| const timer = setInterval(() => { | |
| setDays(calculateDays()); | |
| }, 1000 * 60 * 60 * 24); // Update once per day | |
| setDays(calculateDays()); // Initial calculation | |
| return () => clearInterval(timer); | |
| }, []); // Consider adding V2_EOL_DATE as a dependency if it becomes configurable | |
| return ( | |
| <Header2 className="flex-wrap gap-4 text-error"> | |
| {days > 0 ? ( | |
| <>V2 goes offline in <span className="tabular-nums">{days}d</span></> | |
| ) : ( | |
| <>V2 is no longer available</> | |
| )} | |
| </Header2> | |
| ); | |
| } |
Shows the number of days remaining until 31 Jan 2025.
Also updated the styling to red.
Summary by CodeRabbit
New Features
Style