feat: method POST to check the provider connection is working

This commit is contained in:
Pablo Lara
2024-08-04 18:55:20 +02:00
parent 485482c868
commit ffb91d2733
8 changed files with 122 additions and 33 deletions
+27 -3
View File
@@ -21,6 +21,7 @@ export const getProvider = async () => {
}
};
export const addProvider = async (formData: FormData) => {
const keyServer = process.env.LOCAL_SERVER_URL;
@@ -58,26 +59,49 @@ export const addProvider = async (formData: FormData) => {
revalidatePath("/providers")
};
export const checkConnectionProvider = async (formData: FormData) => {
const keyServer = process.env.LOCAL_SERVER_URL;
const providerId = formData.get("id");
try {
const response = await fetch(`${keyServer}/providers/${providerId}/connection`, {
method: "POST",
headers: {
"X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`,
},
});
const data = await response.json();
revalidatePath("/providers")
return parseStringify(data);
} catch (error) {
return {
error: getErrorMessage(error),
}
}
};
export const deleteProvider = async (formData: FormData) => {
const keyServer = process.env.LOCAL_SERVER_URL;
const providerId = formData.get("id");
try {
await fetch(`${keyServer}/providers/${providerId}`, {
const response = await fetch(`${keyServer}/providers/${providerId}`, {
method: "DELETE",
headers: {
"X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`,
},
});
const data = await response.json();
revalidatePath("/providers")
return parseStringify(data);
} catch (error) {
return {
error: getErrorMessage(error),
}
}
revalidatePath("/providers")
};
export const getErrorMessage = (error: unknown): string => {
let message: string;
+20
View File
@@ -328,6 +328,26 @@ export const DeleteIcon: React.FC<IconSvgProps> = ({
</svg>
);
export const CheckIcon: React.FC<IconSvgProps> = ({
size = 48,
width,
height,
...props
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 2048 2048"
{...props}
>
<path
fill="currentColor"
d="M2048 1024q0 142-36 272t-103 245t-160 207t-208 160t-245 103t-272 37q-142 0-272-36t-245-103t-207-160t-160-208t-103-245t-37-272q0-141 36-272t103-245t160-207t208-160T752 37t272-37q141 0 272 36t245 103t207 160t160 208t103 245t37 272m-1024 896q123 0 237-32t214-90t182-141t140-181t91-214t32-238q0-123-32-237t-90-214t-141-182t-181-140t-214-91t-238-32q-124 0-238 32t-213 90t-182 141t-140 181t-91 214t-32 238q0 124 32 238t90 213t141 182t181 140t214 91t238 32m0-512q55 0 107-15t98-45t81-69t61-91l116 56q-32 67-80 121t-109 92t-130 58t-144 21q-110 0-210-45t-174-128v173H512v-384h384v128H738q54 60 129 94t157 34m384-723V512h128v384h-384V768h158q-54-60-129-94t-157-34q-55 0-107 15t-98 45t-81 69t-61 91l-116-56q32-67 80-121t109-92t130-58t144-21q110 0 210 45t174 128"
/>
</svg>
);
export const RocketIcon: React.FC<IconSvgProps> = ({
size = 24,
width,
+2
View File
@@ -1,6 +1,8 @@
export * from "./providers/AddProvider";
export * from "./providers/ButtonAddProvider";
export * from "./providers/ButtonCheckConnectionProvider";
export * from "./providers/ButtonDeleteProvider";
export * from "./providers/CheckConnectionProvider";
export * from "./providers/DateWithTime";
export * from "./providers/ProviderInfo";
export * from "./providers/ScanStatus";
+3 -3
View File
@@ -13,9 +13,9 @@ export const AddProvider = () => {
// reset the form
ref.current?.reset();
// client-side validation
const result = await addProvider(formData)
if (result?.errors) {
result.errors.forEach((error: { detail: string }) => {
const data = await addProvider(formData)
if (data?.errors) {
data.errors.forEach((error: { detail: string }) => {
let errorMessage = `${error.detail}`;
// show error
toast({
@@ -0,0 +1,21 @@
"use client";
import { Button } from "@nextui-org/react";
import React from "react";
import { useFormStatus } from "react-dom";
import { CheckIcon } from "../icons";
export const ButtonCheckConnectionProvider = () => {
const { pending } = useFormStatus();
return (
<Button
variant="light"
spinner={pending ? "Checking..." : " Check"}
type="submit"
area-disabled={pending}
>
<CheckIcon size={20} /> Check connection
</Button>
);
};
@@ -0,0 +1,40 @@
"use client";
import { useRef } from "react";
import { checkConnectionProvider } from "@/actions";
import { useToast } from "../ui/toast";
import { ButtonCheckConnectionProvider } from "./ButtonCheckConnectionProvider";
export const CheckConnectionProvider = ({ id }: { id: string }) => {
const ref = useRef<HTMLFormElement>(null);
const { toast } = useToast();
async function clientAction(formData: FormData) {
// reset the form
ref.current?.reset();
// client-side validation
const data = await checkConnectionProvider(formData);
if (data?.errors && data.errors.length > 0) {
const error = data.errors[0];
const errorMessage = `${error.detail}`;
// show error
toast({
title: "Wops! Something went wrong",
description: errorMessage,
});
} else {
toast({
title: "Success!",
description: "The connection was updated successfully.",
});
}
}
return (
<form ref={ref} action={clientAction} className="flex gap-x-2">
<input type="hidden" name="id" value={id} />
<ButtonCheckConnectionProvider />
</form>
);
};
+7 -25
View File
@@ -11,19 +11,18 @@ export const DeleteProvider = ({ id }: { id: string }) => {
const ref = useRef<HTMLFormElement>(null);
const { toast } = useToast();
// const [state, formAction] = useFormState(deleteProvider, initialState);
async function clientAction(formData: FormData) {
// reset the form
ref.current?.reset();
// client-side validation
const result = await deleteProvider(formData);
if (result?.error) {
const error = result.error;
//show error
const data = await deleteProvider(formData);
if (data?.errors && data.errors.length > 0) {
const error = data.errors[0];
const errorMessage = `${error.detail}`;
// show error
toast({
title: `${error}`,
description: "There was a problem with your request.",
title: "Wops! Something went wrong",
description: errorMessage,
});
} else {
toast({
@@ -35,24 +34,7 @@ export const DeleteProvider = ({ id }: { id: string }) => {
return (
<form ref={ref} action={clientAction} className="flex gap-x-2">
<input type="hidden" name="id" value={id} />
<ButtonDeleteProvider />
{/* <p aria-live="polite" className="sr-only" role="status">
{state?.message}
</p> */}
</form>
);
};
// const [state, formAction] = useFormState(deleteTodo, initialState);
// return (
// <form action={formAction}>
// <input type="hidden" name="id" value={id} />
// <input type="hidden" name="todo" value={todo} />
// <DeleteButton />
// <p aria-live="polite" className="sr-only" role="status">
// {state?.message}
// </p>
// </form>
// );
@@ -17,6 +17,7 @@ import { ProviderProps } from "@/types";
import { DateWithTime } from "../DateWithTime";
import { ProviderInfo } from "../ProviderInfo";
import { DeleteProvider } from "../DeleteProvider";
import { CheckConnectionProvider } from "../CheckConnectionProvider";
const getProviderData= (row: { original: ProviderProps }) => {
return row.original;
@@ -100,8 +101,7 @@ export const ColumnsProviders: ColumnDef<ProviderProps>[] = [
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem>Check connection</DropdownItem>
<DropdownItem>Manage</DropdownItem>
<DropdownItem><CheckConnectionProvider id={id} /></DropdownItem>
<DropdownItem>
<DeleteProvider id={id} />
</DropdownItem>