jamo.siu@gmail.com
cc5e98f29c
- add tag style to status; - add button style to action links of each domain; - add Notiflix for better notification experiences
45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
"use client"
|
||
|
||
import { useActionState, useEffect } from "react"
|
||
import type { ActionState } from "@/lib/action-state"
|
||
import { notifyFailure, notifySuccess, notifyWarning } from "@/lib/notify"
|
||
|
||
export interface ApplyButtonProps {
|
||
action: (prev: ActionState, formData: FormData) => Promise<ActionState>
|
||
}
|
||
|
||
// Result messages now arrive as toasts instead of text under the button, so the card never
|
||
// grows and nothing has to be dismissed by hand.
|
||
const INITIAL: ActionState = { ok: false }
|
||
|
||
export function ApplyButton({ action }: ApplyButtonProps) {
|
||
const [state, formAction, pending] = useActionState<ActionState, FormData>(action, INITIAL)
|
||
|
||
// Every run of the action returns a fresh object, so this fires exactly once per
|
||
// submission — and stays quiet on mount, where `state` carries no message yet.
|
||
useEffect(() => {
|
||
if (!state.message) return
|
||
|
||
// A success that also carries `detail` means the config was written but the restart was
|
||
// skipped (see applyConfigAction) — that deserves a warning, not a green tick. When the
|
||
// restart failed outright, the detail is the reason, so it joins the message.
|
||
if (state.ok) {
|
||
if (state.detail) notifyWarning(`${state.message}（${state.detail}）`)
|
||
else notifySuccess(state.message)
|
||
return
|
||
}
|
||
notifyFailure(state.detail ? `${state.message}：${state.detail}` : state.message)
|
||
}, [state])
|
||
|
||
return (
|
||
<form action={formAction}>
|
||
<button
|
||
type="submit"
|
||
disabled={pending}
|
||
className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white">
|
||
{pending ? "应用中…" : "应用并重启 dnsmasq"}
|
||
</button>
|
||
</form>
|
||
)
|
||
}
|