feat: adding comments integration

Author: felipebrsk

DONE.md

@@ -149,6 +149,10 @@
   - [x] Heart games
   - [x] Heart comments and replies
   - [x] Heart blog posts
+- [x] Integrating comments
+  - [x] Create comments
+  - [x] Delete comment
+- [x] Integrate the search page
 
 ### Post MVP
 

src/components/ActionDialog/ActionDialog.test.tsx

@@ -0,0 +1,84 @@
+import { Button } from '@mui/material'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import toast from 'react-hot-toast'
+
+import ActionDialog, { ActionDialogProps } from './ActionDialog'
+
+jest.mock('react-hot-toast', () => ({
+  success: jest.fn(),
+  error: jest.fn(),
+}))
+
+const renderActionDialog = (props: Partial<ActionDialogProps> = {}) => {
+  const defaultProps: ActionDialogProps = {
+    title: 'Test Dialog',
+    confirmAction: jest.fn(),
+    trigger: <Button>Open</Button>,
+    ...props,
+  }
+
+  return render(<ActionDialog {...defaultProps} />)
+}
+
+describe('ActionDialog', () => {
+  it('should render the trigger button and not show the dialog initially', () => {
+    renderActionDialog()
+
+    expect(screen.getByText('Open')).toBeInTheDocument()
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('should open the dialog when the trigger button is clicked', () => {
+    renderActionDialog()
+
+    fireEvent.click(screen.getByText('Open'))
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Test Dialog')).toBeInTheDocument()
+  })
+
+  it('should close the dialog when the cancel button is clicked', async () => {
+    renderActionDialog()
+
+    fireEvent.click(screen.getByText('Open'))
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Cancelar'))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    })
+  })
+
+  it('should call the confirm action when the confirm button is clicked', async () => {
+    const mockConfirmAction = jest.fn().mockResolvedValueOnce(null)
+    renderActionDialog({ confirmAction: mockConfirmAction })
+
+    fireEvent.click(screen.getByText('Open'))
+
+    fireEvent.click(screen.getByText('Confirm'))
+
+    await waitFor(() => {
+      expect(mockConfirmAction).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should show an error toast if confirmation fails', async () => {
+    const mockConfirmAction = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('Error'))
+    renderActionDialog({ confirmAction: mockConfirmAction })
+
+    fireEvent.click(screen.getByText('Open'))
+
+    fireEvent.click(screen.getByText('Confirm'))
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Ops! Algo deu errado')
+    })
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+})

src/components/ActionDialog/ActionDialog.tsx

@@ -0,0 +1,180 @@
+import { LoadingButton as Button } from '@mui/lab'
+import {
+  Alert,
+  AlertProps,
+  Box,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogProps,
+  DialogTitle,
+  Divider,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/material'
+import {
+  cloneElement,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react'
+import toast from 'react-hot-toast'
+import { IoClose } from 'react-icons/io5'
+
+export interface ActionDialogProps {
+  children?: ReactNode
+  successMessage?: string
+  confirmAction: () => Promise<unknown> | void
+  trigger: ReactElement
+  confirmText?: string
+  description?: string
+  dialogProps?: DialogProps
+  title: string
+  isSuccess?: boolean
+  isLoading?: boolean
+  alert?: AlertProps
+}
+
+function ActionDialog(props: ActionDialogProps) {
+  const {
+    alert,
+    children,
+    confirmAction,
+    confirmText = 'Confirm',
+    description,
+    dialogProps,
+    title,
+    trigger = <Button>Open</Button>,
+    successMessage,
+    isSuccess = false,
+    isLoading = false,
+  } = props
+
+  const [open, setOpen] = useState(false)
+
+  const handleOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      if (successMessage) toast.success(successMessage)
+      setOpen(false)
+    }
+  }, [isSuccess, successMessage])
+
+  const handleConfirm = async () => {
+    try {
+      await confirmAction()
+    } catch (e) {
+      console.log(e)
+      toast.error('Ops! Algo deu errado')
+    }
+  }
+
+  return (
+    <Box>
+      {cloneElement(trigger, { onClick: handleOpen })}
+
+      <Dialog
+        onClose={handleClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        maxWidth="md"
+        fullWidth
+        TransitionProps={{
+          onExited: () => setOpen(false),
+        }}
+        {...dialogProps}
+        open={open}
+        PaperProps={{
+          sx: {
+            borderRadius: 3,
+            p: 2,
+            transition: 'all 0.3s ease-in-out',
+            transform: 'scale(0.95)',
+            animation: 'scale-in 0.3s ease-in-out forwards',
+            '@keyframes scale-in': {
+              '0%': { transform: 'scale(0.95)', opacity: 0 },
+              '100%': { transform: 'scale(1)', opacity: 1 },
+            },
+          },
+        }}>
+        <DialogTitle
+          component="div"
+          id="alert-dialog-title"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            mb: 1,
+          }}>
+          <Typography variant="h6" fontWeight="bold">
+            {title}
+          </Typography>
+          <IconButton
+            aria-label="close"
+            onClick={handleClose}
+            sx={{
+              color: (theme) => theme.palette.grey[500],
+              transition: 'color 0.2s',
+              '&:hover': {
+                color: (theme) => theme.palette.grey[700],
+              },
+            }}>
+            <IoClose />
+          </IconButton>
+        </DialogTitle>
+
+        <DialogContent>
+          {description && (
+            <DialogContentText sx={{ mb: 3 }}>
+              {description}
+            </DialogContentText>
+          )}
+          {alert && <Alert {...alert} sx={{ mb: 2, borderRadius: 2 }} />}
+          <Box mb={3}>{children}</Box>
+          <Divider />
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            justifyContent="space-between"
+            spacing={2}
+            mt={3}>
+            <Button
+              onClick={handleClose}
+              variant="outlined"
+              color="error"
+              sx={{
+                flexGrow: 1,
+                textTransform: 'uppercase',
+              }}>
+              Cancelar
+            </Button>
+
+            <Button
+              loading={isLoading}
+              onClick={handleConfirm}
+              variant="outlined"
+              color="success"
+              sx={{
+                flexGrow: 1,
+                textTransform: 'uppercase',
+                minWidth: '150px',
+                position: 'relative',
+              }}>
+              {confirmText}
+            </Button>
+          </Stack>
+        </DialogContent>
+      </Dialog>
+    </Box>
+  )
+}
+
+export default ActionDialog

src/components/ActionDialog/ActiongDialog.stories.tsx

@@ -0,0 +1,31 @@
+import { Button } from '@mui/material'
+import { Meta, StoryObj } from '@storybook/react'
+import { Provider } from 'react-redux'
+
+import store from '@/store'
+
+import ActionDialog, { ActionDialogProps } from './ActionDialog'
+
+const meta: Meta<typeof ActionDialog> = {
+  title: 'Components/ActionDialog',
+  component: ActionDialog,
+  args: {
+    confirmAction: () => console.log('confirmed action'),
+    children: <>This is just a dialog story.</>,
+    title: 'This is a storybook for ActionDialog',
+    trigger: <Button variant="contained">Open dialog</Button>,
+  },
+  argTypes: {},
+}
+
+export const Default: Story = {
+  render: (args) => (
+    <Provider store={store}>
+      <ActionDialog {...args} />
+    </Provider>
+  ),
+}
+
+type Story = StoryObj<ActionDialogProps>
+
+export default meta

src/components/ActionDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './ActionDialog'