sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-01 03:05:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement add device functionality with validation and error handling; refactor related components for improved state management
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 11m49s
Details

Browse Source
This commit is contained in:
i701
2025-06-25 20:10:32 +05:00
parent 406733b360
commit d2b281281f
3 changed files with 115 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
components/user/add-device-dialog.tsx
View File

@ -1,85 +1,60 @@
"use client";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
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 { addDevice } from "@/queries/devices";
import { tryCatch } from "@/utils/tryCatch";
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 { useActionState, useEffect, useState } from "react"; // Import useActionState
import { toast } from "sonner";
import { z } from "zod";
import { GetMacAccordion } from "../how-to-get-mac";
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",
),
});
import { addDeviceAction } from "@/queries/devices";
const [disabled, setDisabled] = useState(false);
export type AddDeviceFormState = {
message: string;
fieldErrors?: {
name?: string[];
mac_address?: string[];
};
payload?: FormData;
};
export const initialState: AddDeviceFormState = {
message: "",
fieldErrors: {},
};
export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
const [open, setOpen] = useState(false);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
});
const [state, formAction, pending] = useActionState(
addDeviceAction,
initialState
);
useEffect(() => {
if (state.message && state !== initialState) {
if (state.fieldErrors && Object.keys(state.fieldErrors).length > 0) {
toast.error(state.message);
} else if (state.message.includes("success")) {
toast.success(state.message);
setOpen(false);
} else {
toast.error(state.message);
}
}
}, [state]);
if (!user_id) {
return null;
}
const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (data) => {
console.log(data);
setDisabled(true);
const [error, response] = await tryCatch(
addDevice({
mac: data.mac_address,
name: data.name,
}),
);
if (error) {
toast.error(error.message || "Something went wrong.");
setDisabled(false);
} else {
console.log(response);
setOpen(false);
setDisabled(false);
toast.success("Device successfully added!");
reset();
}
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button
className="gap-2 items-center"
disabled={disabled}
variant="default"
>
<Button className="gap-2 items-center" disabled={pending} variant="default">
Add Device
<Plus size={16} />
</Button>
@ -93,7 +68,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
</DialogDescription>
<GetMacAccordion />
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<form action={formAction}>
<div className="grid gap-4 py-4">
<div className="flex flex-col gap-2">
<div>
@ -103,38 +78,44 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
<Input
placeholder="eg: iPhone X"
type="text"
{...register("name")}
defaultValue={(state?.payload?.get("name") || "") as string}
name="name"
id="device_name"
className="col-span-3"
/>
<span className="text-red-500 text-sm">
{errors.name?.message}
</span>
{state.fieldErrors?.name && (
<span className="text-red-500 text-sm">
{state.fieldErrors.name[0]}
</span>
)}
</div>
<div>
<Label htmlFor="address" className="text-right">
<Label htmlFor="mac_address" className="text-right">
Mac Address
</Label>
<Input
placeholder="Mac address of your device"
{...register("mac_address")}
name="mac_address"
defaultValue={(state?.payload?.get("mac_address") || "") as string}
id="mac_address"
className="col-span-3"
/>
<span className="text-red-500 text-sm">
{errors.mac_address?.message}
</span>
{state.fieldErrors?.mac_address && (
<span className="text-red-500 text-sm">
{state.fieldErrors.mac_address[0]}
</span>
)}
</div>
</div>
</div>
<DialogFooter>
<Button disabled={disabled} type="submit">
{disabled ? <Loader2 className="animate-spin" /> : "Save"}
<Button disabled={pending} type="submit">
{pending ? <Loader2 className="animate-spin" /> : "Save"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}
}