From 27359bd45f9aa276743619be065e68fd7183b94e Mon Sep 17 00:00:00 2001
From: Camila Sosa Morales <camisosa@fleek.co>
Date: Fri, 16 Dec 2022 16:51:35 -0300
Subject: [PATCH] feat: add toast hook (#44)

* feat: add toast hook

* refactor: changes on useToast based on PR comments

* reactor: refactor on useToast
---
 ui/src/hooks/index.ts                |  1 +
 ui/src/hooks/use-toast.ts            |  9 +++++++
 ui/src/views/mint-site/mint-site.tsx | 37 ++++++++++------------------
 3 files changed, 23 insertions(+), 24 deletions(-)
 create mode 100644 ui/src/hooks/index.ts
 create mode 100644 ui/src/hooks/use-toast.ts

diff --git a/ui/src/hooks/index.ts b/ui/src/hooks/index.ts
new file mode 100644
index 0000000..c3d5b47
--- /dev/null
+++ b/ui/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './use-toast';
diff --git a/ui/src/hooks/use-toast.ts b/ui/src/hooks/use-toast.ts
new file mode 100644
index 0000000..f15bb0c
--- /dev/null
+++ b/ui/src/hooks/use-toast.ts
@@ -0,0 +1,9 @@
+import { useToast as useToastChakra } from '@chakra-ui/react';
+
+export const useToast = () => {
+  return useToastChakra({
+    duration: 3000,
+    isClosable: true,
+  });
+};
+
diff --git a/ui/src/views/mint-site/mint-site.tsx b/ui/src/views/mint-site/mint-site.tsx
index 62232de..a511f76 100644
--- a/ui/src/views/mint-site/mint-site.tsx
+++ b/ui/src/views/mint-site/mint-site.tsx
@@ -8,8 +8,6 @@ import {
   Button,
   FormErrorMessage,
   IconButton,
-  useToast,
-  UseToastOptions,
   Textarea,
   Grid,
   GridItem,
@@ -21,6 +19,7 @@ import { mintSiteNFT } from '@/mocks';
 import { getRepoAndCommit } from '@/utils';
 import { validateFields } from './mint-site.utils';
 import { InputFieldForm } from '@/components';
+import { useToast } from '@/hooks';
 
 interface FormValues {
   name: string;
@@ -43,22 +42,7 @@ const initialValues = {
 } as FormValues;
 
 export const MintSite = () => {
-  const toast = useToast();
-
-  //TODO add hook to show the toast
-  const showToast = (
-    title: string,
-    description: string,
-    status: UseToastOptions['status']
-  ) => {
-    toast({
-      title,
-      description,
-      status,
-      duration: 3000,
-      isClosable: true,
-    });
-  };
+  const setToastInfo = useToast();
 
   const handleSubmitForm = useCallback(async (values: FormValues) => {
     const {
@@ -85,13 +69,18 @@ export const MintSite = () => {
         repo,
       });
       //TODO connect with the integration
-      showToast('Success!', 'Your site has been minted.', 'success');
+      setToastInfo({
+        title: 'Success!',
+        description: 'Your site has been minted.',
+        status: 'success',
+      });
     } catch (err) {
-      showToast(
-        'Error!',
-        'We had an error while minting your site. Please try again later',
-        'error'
-      );
+      setToastInfo({
+        title: 'Error!',
+        description:
+          'We had an error while minting your site. Please try again later',
+        status: 'error',
+      });
     }
   }, []);