Skip to content

Show the countdown badge on the events list #18

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

Closed
devin-ai-integration wants to merge 1 commit into from
Closed

Show the countdown badge on the events list #18

Show file tree
Hide file tree
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
10 changes: 8 additions & 2 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import Link from "next/link";
import { ArrowUpRight, Ticket } from "lucide-react";
import { useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { formatEventDate } from "@/lib/event-date";
import { eventCountdownLabel, formatEventDate } from "@/lib/event-date";
import SiteHeader from "@/components/SiteHeader";
import DotGridCanvas from "@/components/DotGridCanvas";
import SiteFooter from "@/components/SiteFooter";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
Empty,
Expand Down Expand Up @@ -98,8 +99,13 @@ export default function Home() {
{event.name}
</div>
{event.eventDate ? (
<p className="mt-1 font-mono text-xs text-muted-dim tabular-nums">
<p className="mt-1 flex items-center gap-2 font-mono text-xs text-muted-dim tabular-nums">
{formatEventDate(event.eventDate)}
{eventCountdownLabel(event.eventDate) ? (
<Badge variant="secondary">
{eventCountdownLabel(event.eventDate)}
</Badge>
) : null}
</p>
) : null}
{event.description ? (
Expand Down
3 changes: 1 addition & 2 deletions lib/event-date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ export function daysUntilEvent(date: string, now: Date = new Date()): number {
const [year, month, day] = date.split("-").map(Number);
if (!year || !month || !day) return 0;
const eventDay = new Date(year, month - 1, day);
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
return Math.round((eventDay.getTime() - today.getTime()) / MS_PER_DAY);
return Math.floor((eventDay.getTime() - now.getTime()) / MS_PER_DAY);

@devin-ai-integration devin-ai-integration Bot Jul 28, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

🔴 Countdown badge shows the wrong day and hides today's events later in the day

The days-until-event count is now measured from the current clock time instead of from the start of today (Math.floor((eventDay.getTime() - now.getTime()) / MS_PER_DAY) at lib/event-date.ts:21), so any time past midnight the result is short by a fraction of a day and rounds down to the wrong number.
Impact: An event happening today is treated as already past (its badge disappears), an event tomorrow is labelled "Today", and every countdown is off by one for most of the day.

Why removing the local-midnight baseline breaks the count

Previously today was set to local midnight of now and both operands were midnight timestamps, so the subtraction yielded an exact whole number of days. The new code subtracts the full current timestamp. For example with now = 2026-07-17 15:30 and event 2026-07-17, eventDay is 2026-07-17 00:00, so the difference is -15.5h and Math.floor(...) = -1, which eventCountdownLabel (lib/event-date.ts:26-28) maps to null instead of "Today". Likewise event 2026-07-18 yields ~0.35 → 0 → "Today" instead of "Tomorrow". This also fails the existing tests in tests/event-date.test.ts:25-35 (e.g. expecting daysUntilEvent("2026-07-17", now) === 0 and the DST case === 2).

Suggested change
return Math.floor((eventDay.getTime() - now.getTime()) / MS_PER_DAY);
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
return Math.round((eventDay.getTime() - today.getTime()) / MS_PER_DAY);
Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

}

// Short countdown label for upcoming events; null once the event has passed.
Expand Down
Loading