sarlink-portal/components/user/add-device-dialog.tsx

"use client";

import { AddDevice } from "@/actions/user-actions";
import { Button } from "@/components/ui/button";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Plus } from "lucide-react";
import { useState } from "react";
import { type SubmitHandler, useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";

export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {

  const formSchema = z.object({
    name: z.string().min(2, { message: "Name is required." }),
    mac_address: z
      .string()
      .min(2, { message: "MAC Address is required." })
      .regex(
        /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
        "Please enter a valid MAC address",
      ),
  });

  const [disabled, setDisabled] = useState(false);
  const [open, setOpen] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  if (!user_id) {
    return null
  }

  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
    console.log(data);
    setDisabled(true)
    toast.promise(AddDevice({ mac_address: data.mac_address, name: data.name, user_id: user_id }), {
      loading: 'Adding new device...',
      success: () => {
        setDisabled(false)
        setOpen((prev) => !prev)
        return 'Device successfully added!'
      },
      error: (error) => {
        setDisabled(false)
        return error || 'Something went wrong.'
      },
    })
  };



  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          className="gap-2 items-center"
          disabled={disabled}
          variant="default"
        >
          Add Device
          <Plus size={16} />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>New Device</DialogTitle>
          <DialogDescription>
            To add a new device, enter the device name and mac address below. Click save when you are done.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="grid gap-4 py-4">
            <div className="flex flex-col gap-2">
              <div>
                <Label htmlFor="device_name" className="text-right">
                  Device Name
                </Label>
                <Input
                  placeholder="eg: Iphone X"
                  type="text"
                  {...register("name")}
                  id="device_name"
                  className="col-span-3"
                />
                <span className="text-red-500 text-sm">
                  {errors.name?.message}
                </span>
              </div>

              <div>
                <Label htmlFor="address" className="text-right">
                  Mac Address
                </Label>
                <Input
                  placeholder="Mac address of your device"
                  {...register("mac_address")}
                  id="mac_address"
                  className="col-span-3"
                />
                <span className="text-red-500 text-sm">
                  {errors.mac_address?.message}
                </span>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button disabled={disabled} type="submit">
              {disabled ? <Loader2 className="animate-spin" /> : "Save"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}