feat : alert confirm when chaning visble

components/admin/guide-visibility-control.tsx

@@ -2,7 +2,7 @@
 
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 import { toast } from "sonner";
 
 import { setStructuredGuideVisibility } from "@/app/admin/actions";
@@ -15,7 +15,6 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -35,6 +34,7 @@ export function GuideVisibilityControl({
 }) {
   const router = useRouter();
   const [pending, startTransition] = useTransition();
+  const [open, setOpen] = useState(false);
 
   const updateVisibility = (nextPublic: boolean) => {
     startTransition(async () => {
@@ -44,6 +44,7 @@ export function GuideVisibilityControl({
         return;
       }
       toast.success(nextPublic ? "เผยแพร่ Guide แล้ว" : "เปลี่ยน Guide เป็น Private แล้ว");
+      setOpen(false);
       router.refresh();
     });
   };
@@ -53,45 +54,43 @@ export function GuideVisibilityControl({
       <Badge variant={isPublic ? "default" : "secondary"}>
         {isPublic ? "Public" : "Private"}
       </Badge>
-      {isPublic ? (
-        <AlertDialog>
-          <AlertDialogTrigger
-            render={
-              <Button type="button" variant="outline" size="sm" disabled={pending} />
-            }
-          >
-            {pending ? <Spinner data-icon="inline-start" /> : <EyeOffIcon data-icon="inline-start" />}
-            Make private
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>เปลี่ยน {guideName} เป็น Private?</AlertDialogTitle>
-              <AlertDialogDescription>
-                Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
-              <AlertDialogAction
-                variant="destructive"
-                onClick={() => updateVisibility(false)}
-              >
-                ยืนยัน Private
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      ) : (
-        <Button
-          type="button"
-          size="sm"
-          disabled={pending}
-          onClick={() => updateVisibility(true)}
-        >
-          {pending ? <Spinner data-icon="inline-start" /> : <EyeIcon data-icon="inline-start" />}
-          Make Publish
-        </Button>
-      )}
+      <Button
+        type="button"
+        variant={isPublic ? "outline" : "default"}
+        size="sm"
+        disabled={pending}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+      >
+        {pending ? <Spinner data-icon="inline-start" /> : isPublic ? <EyeOffIcon data-icon="inline-start" /> : <EyeIcon data-icon="inline-start" />}
+        {isPublic ? "Make private" : "Make Publish"}
+      </Button>
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {isPublic ? `เปลี่ยน ${guideName} เป็น Private?` : `เผยแพร่ ${guideName} เป็น Public?`}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {isPublic
+                ? "Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin"
+                : "Guide จะแสดงบนหน้าเว็บไซต์และทุกคนจะเปิดดูผ่านลิงก์สาธารณะได้"}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>ยกเลิก</AlertDialogCancel>
+            <AlertDialogAction
+              variant={isPublic ? "destructive" : "default"}
+              disabled={pending}
+              onClick={() => updateVisibility(!isPublic)}
+            >
+              {pending && <Spinner data-icon="inline-start" />}
+              {isPublic ? "ยืนยัน Private" : "ยืนยัน Public"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }