feat: adding alerts and toasts

Author: diana-villalvazo-wgu

src/dateExtensions/DateExtensionsPage.test.tsx

@@ -1,9 +1,15 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import DateExtensionsPage from './DateExtensionsPage';
 import { useDateExtensions, useResetDateExtensionMutation } from './data/apiHook';
+import { renderWithAlertAndIntl } from '@src/testUtils';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+  }),
+}));
 
 jest.mock('./data/apiHook', () => ({
   useDateExtensions: jest.fn(),
@@ -34,28 +40,18 @@ describe('DateExtensionsPage', () => {
     });
   });
 
-  const RenderWithRouter = () => (
-    <IntlProvider messages={{}}>
-      <MemoryRouter initialEntries={['/course-v1:edX+DemoX+Demo_Course']}>
-        <Routes>
-          <Route path="/:courseId" element={<DateExtensionsPage />} />
-        </Routes>
-      </MemoryRouter>
-    </IntlProvider>
-  );
-
   it('renders page title', () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     expect(screen.getByRole('heading', { level: 3 })).toBeInTheDocument();
   });
 
   it('renders add extension button', () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     expect(screen.getByRole('button', { name: /add individual extension/i })).toBeInTheDocument();
   });
 
   it('renders date extensions list', () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     expect(screen.getByText('Ed Byun')).toBeInTheDocument();
     expect(screen.getByText('Three body diagrams')).toBeInTheDocument();
   });
@@ -65,18 +61,18 @@ describe('DateExtensionsPage', () => {
       data: { count: 0, results: [] },
       isLoading: true,
     });
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
   it('renders reset link for each row', () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     const resetLinks = screen.getAllByRole('button', { name: 'Reset Extensions' });
     expect(resetLinks).toHaveLength(mockDateExtensions.length);
   });
 
   it('opens reset modal when reset button is clicked', async () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     const user = userEvent.setup();
     const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
     await user.click(resetButton);
@@ -87,7 +83,7 @@ describe('DateExtensionsPage', () => {
   });
 
   it('calls reset mutation when confirm reset is clicked', async () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     const user = userEvent.setup();
     const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
     await user.click(resetButton);
@@ -97,7 +93,7 @@ describe('DateExtensionsPage', () => {
   });
 
   it('closes reset modal when cancel is clicked', async () => {
-    render(<RenderWithRouter />);
+    renderWithAlertAndIntl(<DateExtensionsPage />);
     const user = userEvent.setup();
     const resetButton = screen.getByRole('button', { name: 'Reset Extensions' });
     await user.click(resetButton);

src/dateExtensions/DateExtensionsPage.tsx

@@ -1,23 +1,24 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@openedx/frontend-base';
-import { AlertModal, Button, Toast } from '@openedx/paragon';
+import { Button } from '@openedx/paragon';
 import messages from './messages';
 import DateExtensionsList from './components/DateExtensionsList';
 import ResetExtensionsModal from './components/ResetExtensionsModal';
 import { LearnerDateExtension } from './types';
 import { useResetDateExtensionMutation } from './data/apiHook';
+import { useAlert } from '@src/providers/AlertProvider';
 
 const DateExtensionsPage = () => {
   const intl = useIntl();
   const { courseId } = useParams<{ courseId: string }>();
   const { mutate: resetMutation } = useResetDateExtensionMutation();
   const [isResetModalOpen, setIsResetModalOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<LearnerDateExtension | null>(null);
-  const [successMessage, setSuccessMessage] = useState<string>('');
-  const [errorMessage, setErrorMessage] = useState<string>('');
+  const { showToast, showModal, removeAlert, clearAlerts } = useAlert();
 
   const handleResetExtensions = (user: LearnerDateExtension) => {
+    clearAlerts();
     setIsResetModalOpen(true);
     setSelectedUser(user);
   };
@@ -28,11 +29,16 @@ const DateExtensionsPage = () => {
   };
 
   const handleErrorOnReset = (error: any) => {
-    setErrorMessage(error.message);
+    showModal({
+      confirmText: intl.formatMessage(messages.close),
+      message: error.message,
+      variant: 'default',
+      onConfirm: (id) => removeAlert(id)
+    });
   };
 
   const handleSuccessOnReset = (response: string) => {
-    setSuccessMessage(response);
+    showToast(response);
     handleCloseModal();
   };
 
@@ -67,12 +73,6 @@ const DateExtensionsPage = () => {
         onClose={handleCloseModal}
         onConfirmReset={handleConfirmReset}
       />
-      <Toast show={!!successMessage} onClose={() => setSuccessMessage('')} className="text-break">
-        {successMessage}
-      </Toast>
-      <AlertModal title={errorMessage} isOpen={!!errorMessage} footerNode={<Button onClick={() => setErrorMessage('')}>{intl.formatMessage(messages.close)}</Button>}>
-        {errorMessage}
-      </AlertModal>
     </div>
   );
 };

src/providers/AlertProvider.tsx

@@ -21,7 +21,7 @@ interface ModalAlert {
   isOpen: boolean,
   confirmText?: string,
   cancelText?: string,
-  onConfirm?: () => void,
+  onConfirm?: (id: string) => void,
   onCancel?: () => void,
 }
 
@@ -50,7 +50,7 @@ interface AlertContextType {
     variant?: 'default' | 'warning' | 'danger' | 'success',
     confirmText?: string,
     cancelText?: string,
-    onConfirm?: () => void,
+    onConfirm?: (id: string) => void,
     onCancel?: () => void,
   }) => void,
   showInlineAlert: (message: string, variant?: 'success' | 'danger' | 'warning' | 'info', dismissible?: boolean) => string,
@@ -103,7 +103,7 @@ export const AlertProvider: FC<AlertProviderProps> = ({ children }) => {
     variant?: 'default' | 'warning' | 'danger' | 'success',
     confirmText?: string,
     cancelText?: string,
-    onConfirm?: () => void,
+    onConfirm?: (id: string) => void,
     onCancel?: () => void,
   }) => {
     const id = `modal-${Date.now()}-${Math.random()}`;
@@ -136,7 +136,7 @@ export const AlertProvider: FC<AlertProviderProps> = ({ children }) => {
     setModals(prev => {
       const modal = prev.find(m => m.id === id);
       if (modal?.onConfirm) {
-        modal.onConfirm();
+        modal.onConfirm(id);
       }
       return prev.filter(m => m.id !== id);
     });

src/testUtils.tsx

@@ -1,10 +1,21 @@
 import { render } from '@testing-library/react';
 import { IntlProvider } from '@openedx/frontend-base';
+import { AlertProvider } from './providers/AlertProvider';
 
 export const renderWithIntl = (component) => {
   return render(<IntlProvider locale="en" messages={{}}>{ component }</IntlProvider>);
 };
 
+export const renderWithAlertAndIntl = (component) => {
+  return render(
+    <AlertProvider>
+      <IntlProvider locale="en" messages={{}}>
+        {component}
+      </IntlProvider>
+    </AlertProvider>
+  );
+};
+
 export const createQueryMock = (data: any = undefined, isLoading = false) => ({
   data,
   isLoading,