From ffb91d27330d4d6cde80a7dd304b91ddf9e5fadc Mon Sep 17 00:00:00 2001 From: Pablo Lara Date: Sun, 4 Aug 2024 18:55:20 +0200 Subject: [PATCH] feat: method POST to check the provider connection is working --- actions/providers.ts | 30 ++++++++++++-- components/icons/Icons.tsx | 20 ++++++++++ components/index.ts | 2 + components/providers/AddProvider.tsx | 6 +-- .../ButtonCheckConnectionProvider.tsx | 21 ++++++++++ .../providers/CheckConnectionProvider.tsx | 40 +++++++++++++++++++ components/providers/DeleteProvider.tsx | 32 ++++----------- .../providers/table/ColumnsProviders.tsx | 4 +- 8 files changed, 122 insertions(+), 33 deletions(-) create mode 100644 components/providers/ButtonCheckConnectionProvider.tsx create mode 100644 components/providers/CheckConnectionProvider.tsx diff --git a/actions/providers.ts b/actions/providers.ts index 85674a1545..27a01e688a 100644 --- a/actions/providers.ts +++ b/actions/providers.ts @@ -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; diff --git a/components/icons/Icons.tsx b/components/icons/Icons.tsx index 55b52918f6..647589639c 100644 --- a/components/icons/Icons.tsx +++ b/components/icons/Icons.tsx @@ -328,6 +328,26 @@ export const DeleteIcon: React.FC = ({ ); +export const CheckIcon: React.FC = ({ + size = 48, + width, + height, + ...props +}) => ( + + + +); + export const RocketIcon: React.FC = ({ size = 24, width, diff --git a/components/index.ts b/components/index.ts index b970de3682..be49cd41db 100644 --- a/components/index.ts +++ b/components/index.ts @@ -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"; diff --git a/components/providers/AddProvider.tsx b/components/providers/AddProvider.tsx index 8c7fbf74cc..c53e267e01 100644 --- a/components/providers/AddProvider.tsx +++ b/components/providers/AddProvider.tsx @@ -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({ diff --git a/components/providers/ButtonCheckConnectionProvider.tsx b/components/providers/ButtonCheckConnectionProvider.tsx new file mode 100644 index 0000000000..9c3076de78 --- /dev/null +++ b/components/providers/ButtonCheckConnectionProvider.tsx @@ -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 ( + + ); +}; diff --git a/components/providers/CheckConnectionProvider.tsx b/components/providers/CheckConnectionProvider.tsx new file mode 100644 index 0000000000..c8f1b190b7 --- /dev/null +++ b/components/providers/CheckConnectionProvider.tsx @@ -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(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 ( +
+ + + + ); +}; diff --git a/components/providers/DeleteProvider.tsx b/components/providers/DeleteProvider.tsx index 72812fdc13..8a269e13d7 100644 --- a/components/providers/DeleteProvider.tsx +++ b/components/providers/DeleteProvider.tsx @@ -11,19 +11,18 @@ export const DeleteProvider = ({ id }: { id: string }) => { const ref = useRef(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 (
- - {/*

- {state?.message} -

*/} ); }; - -// const [state, formAction] = useFormState(deleteTodo, initialState); - -// return ( -//
-// -// -// -//

-// {state?.message} -//

-// -// ); diff --git a/components/providers/table/ColumnsProviders.tsx b/components/providers/table/ColumnsProviders.tsx index 82529c2cab..e07ad2f299 100644 --- a/components/providers/table/ColumnsProviders.tsx +++ b/components/providers/table/ColumnsProviders.tsx @@ -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[] = [ - Check connection - Manage +