72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
// components/EditDirectorButton.tsx
|
||
|
|
// Tiny client island for the director detail page — opens the existing
|
||
|
|
// EditEntityModal with the director record pre-loaded. The detail page
|
||
|
|
// is a server component, so it can't host useState itself; this wrapper
|
||
|
|
// does it. After save, force a hard reload so the page definitely
|
||
|
|
// shows the just-saved values. router.refresh() alone wasn't always
|
||
|
|
// picking up server-rendered changes (likely browser back-forward cache
|
||
|
|
// or React Server Component patching edges); a hard reload is the
|
||
|
|
// most reliable way to guarantee the user sees fresh data.
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import EditEntityModal from "@/components/EditEntityModal";
|
||
|
|
import type { YsterbaardDirector } from "@/lib/types";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
director: YsterbaardDirector;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function EditDirectorButton({ director }: Props) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
const refreshPage = () => {
|
||
|
|
if (typeof window !== "undefined") {
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setOpen(true)}
|
||
|
|
className="inline-flex items-center gap-1.5 px-4 py-2.5 rounded-md border border-border bg-surface text-fg text-sm font-semibold hover:bg-surface-warm transition-colors"
|
||
|
|
aria-label="Edit director"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
className="w-4 h-4"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="2"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<path d="M12 20h9" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" strokeLinecap="round" strokeLinejoin="round" />
|
||
|
|
</svg>
|
||
|
|
Edit
|
||
|
|
</button>
|
||
|
|
<EditEntityModal
|
||
|
|
entity="director"
|
||
|
|
record={director}
|
||
|
|
open={open}
|
||
|
|
onClose={() => {
|
||
|
|
setOpen(false);
|
||
|
|
// Always hard-reload on close so any cached or stale view is
|
||
|
|
// replaced with the latest server data.
|
||
|
|
refreshPage();
|
||
|
|
}}
|
||
|
|
onAfterSave={() => {
|
||
|
|
// After a successful save, hard-reload so the user immediately
|
||
|
|
// sees the persisted values (and not a stale view that may
|
||
|
|
// still be in the back-forward cache or React Server Component
|
||
|
|
// patch state).
|
||
|
|
refreshPage();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|