mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-10-06 22:51:37 +00:00
chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 12m20s
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 12m20s
This commit is contained in:
@@ -6,12 +6,12 @@ import { useActionState, useEffect, useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Device } from "@/lib/backend-types";
|
||||
@@ -21,151 +21,151 @@ import { TextShimmer } from "./ui/text-shimmer";
|
||||
import { Textarea } from "./ui/textarea";
|
||||
|
||||
export type BlockDeviceFormState = {
|
||||
message: string;
|
||||
success: boolean;
|
||||
fieldErrors?: {
|
||||
reason_for_blocking?: string[];
|
||||
};
|
||||
payload?: FormData;
|
||||
message: string;
|
||||
success: boolean;
|
||||
fieldErrors?: {
|
||||
reason_for_blocking?: string[];
|
||||
};
|
||||
payload?: FormData;
|
||||
};
|
||||
|
||||
const initialState: BlockDeviceFormState = {
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
};
|
||||
|
||||
export default function BlockDeviceDialog({
|
||||
device,
|
||||
admin,
|
||||
parentalControl = false,
|
||||
device,
|
||||
admin,
|
||||
parentalControl = false,
|
||||
}: {
|
||||
device: Device;
|
||||
type: "block" | "unblock";
|
||||
admin?: boolean;
|
||||
parentalControl?: boolean;
|
||||
device: Device;
|
||||
type: "block" | "unblock";
|
||||
admin?: boolean;
|
||||
parentalControl?: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
blockDeviceAction,
|
||||
initialState,
|
||||
);
|
||||
const [isTransitioning, startTransition] = useTransition();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
blockDeviceAction,
|
||||
initialState,
|
||||
);
|
||||
const [isTransitioning, startTransition] = useTransition();
|
||||
|
||||
const handleSimpleBlock = () => {
|
||||
startTransition(() => {
|
||||
const formData = new FormData();
|
||||
formData.append("deviceId", String(device.id));
|
||||
formData.append("reason_for_blocking", "");
|
||||
formData.append("action", "simple-block");
|
||||
formData.append("blocked_by", "PARENT");
|
||||
const handleSimpleBlock = () => {
|
||||
startTransition(() => {
|
||||
const formData = new FormData();
|
||||
formData.append("deviceId", String(device.id));
|
||||
formData.append("reason_for_blocking", "");
|
||||
formData.append("action", "simple-block");
|
||||
formData.append("blocked_by", "PARENT");
|
||||
|
||||
formAction(formData);
|
||||
});
|
||||
};
|
||||
formAction(formData);
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnblock = () => {
|
||||
startTransition(() => {
|
||||
const formData = new FormData();
|
||||
formData.append("deviceId", String(device.id));
|
||||
formData.append("reason_for_blocking", "");
|
||||
formData.append("action", "unblock");
|
||||
formData.append("blocked_by", "PARENT");
|
||||
const handleUnblock = () => {
|
||||
startTransition(() => {
|
||||
const formData = new FormData();
|
||||
formData.append("deviceId", String(device.id));
|
||||
formData.append("reason_for_blocking", "");
|
||||
formData.append("action", "unblock");
|
||||
formData.append("blocked_by", "PARENT");
|
||||
|
||||
formAction(formData);
|
||||
});
|
||||
};
|
||||
formAction(formData);
|
||||
});
|
||||
};
|
||||
|
||||
// Show toast notifications based on state changes
|
||||
useEffect(() => {
|
||||
if (state.message) {
|
||||
if (state.success) {
|
||||
toast.success(state.message);
|
||||
if (open) setOpen(false);
|
||||
} else {
|
||||
toast.error(state.message);
|
||||
}
|
||||
}
|
||||
}, [state, open]);
|
||||
// Show toast notifications based on state changes
|
||||
useEffect(() => {
|
||||
if (state.message) {
|
||||
if (state.success) {
|
||||
toast.success(state.message);
|
||||
if (open) setOpen(false);
|
||||
} else {
|
||||
toast.error(state.message);
|
||||
}
|
||||
}
|
||||
}, [state, open]);
|
||||
|
||||
const isLoading = isPending || isTransitioning;
|
||||
const isLoading = isPending || isTransitioning;
|
||||
|
||||
// If device is blocked and user is not admin, show unblock button
|
||||
if (device.blocked && parentalControl) {
|
||||
return (
|
||||
<Button onClick={handleUnblock} disabled={isLoading}>
|
||||
{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
// If device is blocked and user is not admin, show unblock button
|
||||
if (device.blocked && parentalControl) {
|
||||
return (
|
||||
<Button onClick={handleUnblock} disabled={isLoading}>
|
||||
{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// If device is not blocked and user is not admin, show simple block button
|
||||
if ((!device.blocked && parentalControl) || !admin) {
|
||||
return (
|
||||
<Button
|
||||
onClick={handleSimpleBlock}
|
||||
disabled={isLoading}
|
||||
variant="destructive"
|
||||
>
|
||||
<ShieldBan />
|
||||
{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
// If device is not blocked and user is not admin, show simple block button
|
||||
if ((!device.blocked && parentalControl) || !admin) {
|
||||
return (
|
||||
<Button
|
||||
onClick={handleSimpleBlock}
|
||||
disabled={isLoading}
|
||||
variant="destructive"
|
||||
>
|
||||
<ShieldBan />
|
||||
{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// If user is admin, show block with reason dialog
|
||||
return (
|
||||
<div>
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={isLoading} variant="destructive">
|
||||
<OctagonX />
|
||||
Block
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Block 🚫</DialogTitle>
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
Please provide a reason for blocking this device
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={formAction} className="space-y-4">
|
||||
<input type="hidden" name="deviceId" value={String(device.id)} />
|
||||
<input type="hidden" name="action" value="block" />
|
||||
<input type="hidden" name="blocked_by" value="ADMIN" />
|
||||
// If user is admin, show block with reason dialog
|
||||
return (
|
||||
<div>
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={isLoading} variant="destructive">
|
||||
<OctagonX />
|
||||
Block
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Block 🚫</DialogTitle>
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
Please provide a reason for blocking this device
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={formAction} className="space-y-4">
|
||||
<input type="hidden" name="deviceId" value={String(device.id)} />
|
||||
<input type="hidden" name="action" value="block" />
|
||||
<input type="hidden" name="blocked_by" value="ADMIN" />
|
||||
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<Label htmlFor="reason_for_blocking" className="text-right">
|
||||
Reason for blocking
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={10}
|
||||
name="reason_for_blocking"
|
||||
id="reason_for_blocking"
|
||||
defaultValue={
|
||||
(state?.payload?.get("reason_for_blocking") || "") as string
|
||||
}
|
||||
className={cn(
|
||||
"col-span-5 mt-2",
|
||||
state.fieldErrors?.reason_for_blocking &&
|
||||
"ring-2 ring-red-500",
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm text-red-500">
|
||||
{state.fieldErrors?.reason_for_blocking?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="destructive" disabled={isLoading} type="submit">
|
||||
{isLoading ? "Blocking..." : "Block"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<Label htmlFor="reason_for_blocking" className="text-right">
|
||||
Reason for blocking
|
||||
</Label>
|
||||
<Textarea
|
||||
rows={10}
|
||||
name="reason_for_blocking"
|
||||
id="reason_for_blocking"
|
||||
defaultValue={
|
||||
(state?.payload?.get("reason_for_blocking") || "") as string
|
||||
}
|
||||
className={cn(
|
||||
"col-span-5 mt-2",
|
||||
state.fieldErrors?.reason_for_blocking &&
|
||||
"ring-2 ring-red-500",
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm text-red-500">
|
||||
{state.fieldErrors?.reason_for_blocking?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="destructive" disabled={isLoading} type="submit">
|
||||
{isLoading ? "Blocking..." : "Block"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user