From 485482c86811396f5a2b80929a31d2b7365557eb Mon Sep 17 00:00:00 2001 From: Pablo Lara Date: Sun, 4 Aug 2024 18:18:53 +0200 Subject: [PATCH] feat: GET and POST provider are working as expected and the error is shown correctly --- actions/providers.ts | 12 +--- components/icons/Icons.tsx | 24 ++++++++ components/index.ts | 2 + components/providers/AddProvider.tsx | 27 +++++---- components/providers/ButtonAddProvider.tsx | 6 +- components/providers/ButtonDeleteProvider.tsx | 21 +++++++ components/providers/DeleteProvider.tsx | 58 +++++++++++++++++++ .../providers/table/ColumnsProviders.tsx | 21 ++++--- components/ui/toast/use-toast.ts | 2 +- 9 files changed, 139 insertions(+), 34 deletions(-) create mode 100644 components/providers/ButtonDeleteProvider.tsx create mode 100644 components/providers/DeleteProvider.tsx diff --git a/actions/providers.ts b/actions/providers.ts index 931345ce41..85674a1545 100644 --- a/actions/providers.ts +++ b/actions/providers.ts @@ -13,8 +13,8 @@ export const getProvider = async () => { "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`, }, }); - const data = await providers.json(); + revalidatePath("/providers") return parseStringify(data); } catch (error) { return undefined; @@ -47,10 +47,8 @@ export const addProvider = async (formData: FormData) => { }), }); const data = await response.json(); - - if (!response.ok) { - throw new Error(data.message || "Request error"); - } + revalidatePath("/providers") + return parseStringify(data); } catch (error) { console.error(error) return { @@ -58,7 +56,6 @@ export const addProvider = async (formData: FormData) => { } } revalidatePath("/providers") - }; export const deleteProvider = async (formData: FormData) => { @@ -73,15 +70,12 @@ export const deleteProvider = async (formData: FormData) => { "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`, }, }); - } catch (error) { - console.error(error) return { error: getErrorMessage(error), } } revalidatePath("/providers") - }; export const getErrorMessage = (error: unknown): string => { diff --git a/components/icons/Icons.tsx b/components/icons/Icons.tsx index 77b070e067..55b52918f6 100644 --- a/components/icons/Icons.tsx +++ b/components/icons/Icons.tsx @@ -304,6 +304,30 @@ export const WifiPendingIcon: React.FC = ({ ); +export const DeleteIcon: React.FC = ({ + size = 24, + width, + height, + ...props +}) => ( + +); + export const RocketIcon: React.FC = ({ size = 24, width, diff --git a/components/index.ts b/components/index.ts index 75ebceb23b..b970de3682 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,4 +1,6 @@ export * from "./providers/AddProvider"; +export * from "./providers/ButtonAddProvider"; +export * from "./providers/ButtonDeleteProvider"; 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 2e9fa24a69..8c7fbf74cc 100644 --- a/components/providers/AddProvider.tsx +++ b/components/providers/AddProvider.tsx @@ -2,34 +2,35 @@ import { addProvider } from "@/actions"; import { useRef } from "react"; +import { useToast } from "../ui/toast"; import { ButtonAddProvider } from "./ButtonAddProvider"; -import { toast, useToast } from "../ui/toast"; -import { ToastAction } from "@radix-ui/react-toast"; export const AddProvider = () => { const ref = useRef(null) const { toast } = useToast() + async function clientAction(formData:FormData) { // reset the form ref.current?.reset(); // client-side validation const result = await addProvider(formData) - if (result?.error) { - - const error = result.error - //show error - toast({ - title: `${error}`, - description: "There was a problem with your request.", - }) + if (result?.errors) { + result.errors.forEach((error: { detail: string }) => { + let errorMessage = `${error.detail}`; + // show error + toast({ + title: "Wops! Something went wrong", + description: errorMessage, + }); + }); } else { toast({ title: "Success!", description: "The provider was added successfully.", - }) + }); } - } + return (
{ className="py-2 px-3 rounded-sm" /> - - ); }; diff --git a/components/providers/ButtonAddProvider.tsx b/components/providers/ButtonAddProvider.tsx index 4a4b759649..d4b82e1064 100644 --- a/components/providers/ButtonAddProvider.tsx +++ b/components/providers/ButtonAddProvider.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Button } from "@nextui-org/react"; import React from "react"; import { useFormStatus } from "react-dom"; @@ -5,6 +7,8 @@ import { useFormStatus } from "react-dom"; export const ButtonAddProvider = () => { const { pending } = useFormStatus(); return ( - + ); }; diff --git a/components/providers/ButtonDeleteProvider.tsx b/components/providers/ButtonDeleteProvider.tsx new file mode 100644 index 0000000000..797e1a5022 --- /dev/null +++ b/components/providers/ButtonDeleteProvider.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { Button } from "@nextui-org/react"; +import React from "react"; +import { useFormStatus } from "react-dom"; + +import { DeleteIcon } from "../icons"; + +export const ButtonDeleteProvider = () => { + const { pending } = useFormStatus(); + return ( + + ); +}; diff --git a/components/providers/DeleteProvider.tsx b/components/providers/DeleteProvider.tsx new file mode 100644 index 0000000000..72812fdc13 --- /dev/null +++ b/components/providers/DeleteProvider.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { useRef } from "react"; + +import { deleteProvider } from "@/actions"; + +import { useToast } from "../ui/toast"; +import { ButtonDeleteProvider } from "./ButtonDeleteProvider"; + +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 + toast({ + title: `${error}`, + description: "There was a problem with your request.", + }); + } else { + toast({ + title: "Success!", + description: "The provider was removed successfully.", + }); + } + } + 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 52204e5164..82529c2cab 100644 --- a/components/providers/table/ColumnsProviders.tsx +++ b/components/providers/table/ColumnsProviders.tsx @@ -16,9 +16,10 @@ import { ProviderProps } from "@/types"; import { DateWithTime } from "../DateWithTime"; import { ProviderInfo } from "../ProviderInfo"; +import { DeleteProvider } from "../DeleteProvider"; -const getProviderAttributes = (row: { original: ProviderProps }) => { - return row.original.attributes; +const getProviderData= (row: { original: ProviderProps }) => { + return row.original; }; export const ColumnsProviders: ColumnDef[] = [ @@ -30,8 +31,7 @@ export const ColumnsProviders: ColumnDef[] = [ accessorKey: "account", header: "Account", cell: ({ row }) => { - const { connection, provider, alias, provider_id } = - getProviderAttributes(row); + const { attributes: { connection, provider, alias, provider_id } } = getProviderData(row); return ( [] = [ accessorKey: "lastScan", header: "Last Scan", cell: ({ row }) => { - const { updated_at } = getProviderAttributes(row); + const { attributes: {updated_at} } = getProviderData(row); return ; }, }, @@ -62,7 +62,7 @@ export const ColumnsProviders: ColumnDef[] = [ accessorKey: "nextScan", header: "Next Scan", cell: ({ row }) => { - const { updated_at } = getProviderAttributes(row); + const { attributes: {updated_at} } = getProviderData(row); const nextDay = add(new Date(updated_at), { hours: 24, }); @@ -81,7 +81,7 @@ export const ColumnsProviders: ColumnDef[] = [ accessorKey: "added", header: "Added", cell: ({ row }) => { - const { inserted_at } = getProviderAttributes(row); + const { attributes: {inserted_at} } = getProviderData(row); return ; }, }, @@ -89,7 +89,8 @@ export const ColumnsProviders: ColumnDef[] = [ accessorKey: "actions", header: () =>
Actions
, id: "actions", - cell: () => { + cell: ({ row }) => { + const { id } = getProviderData(row); return (
@@ -101,7 +102,9 @@ export const ColumnsProviders: ColumnDef[] = [ Check connection Manage - Delete + + +
diff --git a/components/ui/toast/use-toast.ts b/components/ui/toast/use-toast.ts index f6c7b68058..1a7c514a81 100644 --- a/components/ui/toast/use-toast.ts +++ b/components/ui/toast/use-toast.ts @@ -5,7 +5,7 @@ import * as React from "react"; import type { ToastActionElement, ToastProps } from "@/components"; -const TOAST_LIMIT = 1; +const TOAST_LIMIT = 6; const TOAST_REMOVE_DELAY = 1000000; type ToasterToast = ToastProps & {