refactor: store selected week in a cookie, not the URL
Build and Deploy / Build & Push (push) Successful in 1m7s
Build and Deploy / Build & Push (push) Successful in 1m7s
The home page no longer reads ?week=YYYY-MM-DD from the URL. Selected week lives in the tcWeek cookie, set via a server action that revalidates the home page so the next render reflects it. The URL stays at "/" regardless of which week the user is viewing. WeekNav prev/next/today buttons (and the arrow-key bindings) call the server action directly — no router.refresh dance, no client-side cookie write. BackToCalendarLink drops its localStorage-based href reconstruction and just links to "/" since the cookie already remembers the right week across navigations. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,19 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export function BackToCalendarLink() {
|
||||
const [href, setHref] = useState("/");
|
||||
|
||||
useEffect(() => {
|
||||
const saved = localStorage.getItem("lastWeek");
|
||||
if (saved) setHref(`/?week=${saved}`);
|
||||
}, []);
|
||||
|
||||
// The selected week is stored in a server-readable cookie (tcWeek), so the
|
||||
// home page already renders the right week without us needing to pass it
|
||||
// through the URL.
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
href="/"
|
||||
className="park-name-link"
|
||||
style={{
|
||||
display: "flex",
|
||||
|
||||
@@ -109,11 +109,6 @@ export function HomePageClient({
|
||||
return () => timeouts.forEach(clearTimeout);
|
||||
}, [isCurrentWeek, today, data, router]);
|
||||
|
||||
// Remember the current week so the park page back button returns here.
|
||||
useEffect(() => {
|
||||
localStorage.setItem("lastWeek", weekStart);
|
||||
}, [weekStart]);
|
||||
|
||||
const toggle = () => {
|
||||
const next = !coastersOnly;
|
||||
setCoastersOnly(next);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { setWeek, clearWeek } from "@/app/actions/week";
|
||||
|
||||
interface WeekNavProps {
|
||||
weekStart: string; // YYYY-MM-DD (Sunday)
|
||||
@@ -39,9 +39,11 @@ function shiftWeek(weekStart: string, delta: number): string {
|
||||
}
|
||||
|
||||
export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
||||
const router = useRouter();
|
||||
const nav = (delta: number) => {
|
||||
router.push(`/?week=${shiftWeek(weekStart, delta)}`);
|
||||
void setWeek(shiftWeek(weekStart, delta));
|
||||
};
|
||||
const jumpToToday = () => {
|
||||
void clearWeek();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -68,7 +70,7 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
||||
|
||||
{!isCurrentWeek && (
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
onClick={jumpToToday}
|
||||
aria-label="Jump to current week"
|
||||
style={todayBtnStyle}
|
||||
onMouseOver={(e) => Object.assign((e.target as HTMLElement).style, todayBtnHover)}
|
||||
|
||||
Reference in New Issue
Block a user