sarlink-portal/components/block-device-dialog.tsx

'use client'

import { blockDevice } from "@/actions/omada-actions";
import { Button } from "@/components/ui/button";
import type { Device } from "@prisma/client";
import { useState } from "react";
import { toast } from "sonner";
import { TextShimmer } from "./ui/text-shimmer";

export default function BlockDeviceDialog({ device }: { device: Device }) {
  const [disabled, setDisabled] = useState(false);
  return (
    <Button
      className="w-full mt-2"
      disabled={disabled}
      onClick={() => {
        setDisabled(true);
        toast.promise(blockDevice({ macAddress: device.mac, type: device.blocked ? "unblock" : "block" }), {
          loading: device.blocked ? "Unblocking..." : "Blocking...",
          success: () => {
            setDisabled(false);
            return `Device ${device.name} successfully ${device.blocked ? "unblocked" : "blocked"
              }!`;
          },
          error: () => {
            setDisabled(false);
            return "Something went wrong";
          },
        });
      }}
    >
      {disabled ? <TextShimmer>{device.blocked ? "Unblocking..." : "Blocking..."}</TextShimmer> : (device?.blocked ? "Unblock" : "Block")}
    </Button>
  )
}