feat: add dialogs

Author: Throyer

web/src/hooks/alert.tsx

@@ -0,0 +1,112 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  PropsWithChildren,
+  ReactNode,
+  useRef
+} from "react";
+
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
+  Button,
+  ButtonProps,
+} from '@chakra-ui/react'
+
+export interface DialogProps {
+  title?: string | ReactNode;
+  accept?: {
+    title?: string;
+    onClick?: () => void;
+    options?: ButtonProps
+  },
+  decline?: {
+    title?: string;
+    onClick?: () => void;
+    options?: ButtonProps
+  },
+  content?: ReactNode;
+}
+
+interface DialogContextData {
+  show: (content: DialogProps) => void;
+}
+
+const DialogContext = createContext<DialogContextData>({} as DialogContextData);
+
+export const DialogProvider = ({ children }: PropsWithChildren) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const cancelRef = useRef()
+  const [dialog, setDialog] = useState<DialogProps | null>(null);
+
+  const show = (content: DialogProps) => {
+    setDialog(content);
+    onOpen();
+  }
+
+  return (
+    <DialogContext.Provider value={{ show }}>
+      {children}
+      {dialog && (
+        <AlertDialog
+          isOpen={isOpen}
+          leastDestructiveRef={cancelRef as any}
+          onClose={onClose}
+        >
+          <AlertDialogOverlay>
+            <AlertDialogContent>
+              {typeof dialog.title === 'string' ? (
+                <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+                  {dialog.title}
+                </AlertDialogHeader>
+              ) : dialog.title}
+
+              <AlertDialogBody>
+                {dialog.content}
+              </AlertDialogBody>
+
+              <AlertDialogFooter>
+                <Button
+                  ref={cancelRef as any}
+                  onClick={() => {
+                    onClose();
+                    dialog?.decline?.onClick && dialog?.decline?.onClick()
+                  }}
+                  {...dialog?.decline?.options}>
+                  {dialog.decline?.title || 'Yes'}
+                </Button>
+                <Button
+                  colorScheme='red'
+                  ml={3}
+                  onClick={() => {
+                    onClose()
+                    dialog?.accept?.onClick && dialog?.accept?.onClick()
+                  }}
+                  {...dialog?.accept?.options}>
+                  {dialog.accept?.title || 'No'}
+                </Button>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialogOverlay>
+        </AlertDialog>
+      )}
+    </DialogContext.Provider>
+  );
+}
+
+export function useDialog(): DialogContextData {
+  const context = useContext(DialogContext);
+
+  if (!context) {
+    throw new Error("o useDialog deve ser utilizado dentro de um DialogProvider");
+  }
+
+  return context;
+}

web/src/hooks/index.tsx

@@ -0,0 +1,11 @@
+import { ChakraProvider } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+import { DialogProvider } from "./alert";
+
+export const Providers = ({ children }: PropsWithChildren) => (
+  <ChakraProvider>
+    <DialogProvider>
+      {children}
+    </DialogProvider>
+  </ChakraProvider>
+)

web/src/main.tsx

@@ -4,14 +4,15 @@ import { ChakraProvider } from '@chakra-ui/react';
 
 import { App } from './App';
 import { BrowserRouter } from 'react-router-dom';
+import { Providers } from './hooks';
 
 const element = document.getElementById('root') as Element;
 const root = createRoot(element);
 
 root.render(
   <BrowserRouter>
-    <ChakraProvider>
+    <Providers>
       <App />
-    </ChakraProvider>
+    </Providers>
   </BrowserRouter>
 );

web/src/pages/users/index.tsx

@@ -23,10 +23,11 @@ import { Column } from "../../components/table/types";
 
 import { Roles } from "./components/roles";
 import { Status } from "./components/status";
+import { useDialog } from "../../hooks/alert";
 
 export const Users = () => {
 
-  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { show } = useDialog();
 
   const [{ page, size, totalPages }, setPagination] = useState<PaginationProps>({
     page: 0,
@@ -101,29 +102,19 @@ export const Users = () => {
             edit: { options: { disabled: loading } },
             remove: {
               options: { disabled: loading },
-              onClick: onOpen
+              onClick: (row) => show({
+                title: 'Delete user',
+                content: 'Are you sure? You can\'t undo this action afterwards.',
+                accept: {
+                  title: 'Delete',
+                  onClick: () => console.log('remove: ', row?.name)
+                },
+                decline: { title: 'Cancel' }
+              })
             },
           })
         ]}
       />
-
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Modal Title</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            bla bla bla
-          </ModalBody>
-
-          <ModalFooter>
-            <Button colorScheme='blue' mr={3} onClick={onClose}>
-              Close
-            </Button>
-            <Button variant='ghost'>Secondary Action</Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
     </Template>
   )
 }