Skip to content

Adds v2 countdown eol text in side menu #1546

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Dec 11, 2024
Merged

Adds v2 countdown eol text in side menu #1546

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion apps/webapp/app/components/navigation/SideMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ import { UserProfilePhoto } from "../UserProfilePhoto";
import { FreePlanUsage } from "../billing/v2/FreePlanUsage";
import { Badge } from "../primitives/Badge";
import { LinkButton } from "../primitives/Buttons";
import { Header2 } from "../primitives/Headers";
import { Paragraph } from "../primitives/Paragraph";
import {
Popover,
Expand All @@ -91,6 +92,34 @@ type SideMenuProps = {
defaultValue?: FeedbackType;
};

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>
);
}
Comment on lines +95 to +121
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Optimize countdown implementation and add error handling

The countdown implementation could be improved in several ways:

  1. The hourly update interval is more frequent than necessary since days only change once per day
  2. The target date should be configurable for easier maintenance
  3. 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.

Suggested change
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>
);
}


export function SideMenu({ user, project, organization, organizations }: SideMenuProps) {
const borderRef = useRef<HTMLDivElement>(null);
const [showHeaderDivider, setShowHeaderDivider] = useState(false);
Expand Down Expand Up @@ -215,7 +244,8 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
</div>
<div className="m-2">
{project.version === "V2" && (
<div className="flex flex-col gap-3 rounded border border-success/50 bg-success/10 p-3">
<div className="flex flex-col gap-3 rounded border border-error/50 bg-error/5 p-3">
<V2Countdown />
<Paragraph variant="small/bright">
This is a v2 project. V2 will be deprecated on January 31, 2025.{" "}
<TextLink
Expand Down
Loading