feat: success message toast

Author: diana-villalvazo-wgu

src/data/apiHook.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { getCourseInfo, getDateExtensions, resetDateExtension, PaginationQueryKeys } from './api';
 import { appId } from '../constants';
 
@@ -25,8 +25,12 @@ export const useDateExtensions = (courseId: string, pagination: PaginationQueryK
 );
 
 export const useResetDateExtensionMutation = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: ({ courseId, userId }: { courseId: string, userId: number }) =>
       resetDateExtension(courseId, userId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: dateExtensionsQueryKeys.all });
+    },
   });
 };

src/dateExtensions/DateExtensionsPage.tsx

@@ -1,35 +1,54 @@
 import { useState } from 'react';
+import { useParams } from 'react-router-dom';
 import { useIntl } from '@openedx/frontend-base';
-import { Button, Container } from '@openedx/paragon';
+import { AlertModal, Button, Container, Toast } 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';
 
 // const successMessage = 'Successfully reset due date for student Phu Nguyen for A subsection with two units (block-v1:SchemaAximWGU+WGU101+1+type@sequential+block@3984030755104708a86592cf23fb1ae4) to 2025-08-21 00:00';
 
 const DateExtensionsPage = () => {
   const intl = useIntl();
+  const { courseId } = useParams<{ courseId: string }>();
+  const { mutate: resetMutation } = useResetDateExtensionMutation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<LearnerDateExtension | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<string>('');
 
   const handleResetExtensions = (user: LearnerDateExtension) => {
     setIsModalOpen(true);
     setSelectedUser(user);
   };
 
-  const handleConfirmReset = () => {
-    if (selectedUser) {
-      // Call the API to reset the extensions for the selected user
-      console.log(`Resetting extensions for user: ${selectedUser.username}`);
-    }
+  const handleCloseModal = () => {
     setIsModalOpen(false);
     setSelectedUser(null);
   };
 
-  const handleCancelReset = () => {
-    setIsModalOpen(false);
-    setSelectedUser(null);
+  const handleErrorOnReset = (error: any) => {
+    setErrorMessage(error.message);
+  };
+
+  const handleSuccessOnReset = (response: any) => {
+    const { message } = response;
+    setSuccessMessage(message);
+    handleCloseModal();
+  };
+
+  const handleConfirmReset = async () => {
+    if (selectedUser && courseId) {
+      resetMutation({
+        courseId,
+        userId: selectedUser.id
+      }, {
+        onError: handleErrorOnReset,
+        onSuccess: handleSuccessOnReset
+      });
+    }
   };
 
   return (
@@ -44,10 +63,16 @@ const DateExtensionsPage = () => {
         isOpen={isModalOpen}
         message={intl.formatMessage(messages.resetConfirmationMessage)}
         title={intl.formatMessage(messages.resetConfirmationHeader, { username: selectedUser?.username })}
-        onCancelReset={handleCancelReset}
-        onClose={handleCancelReset}
+        onCancelReset={handleCloseModal}
+        onClose={handleCloseModal}
         onConfirmReset={handleConfirmReset}
       />
+      <Toast show={!!successMessage} onClose={() => {}} className="text-break">
+        {successMessage}
+      </Toast>
+      <AlertModal isOpen={!!errorMessage} footerNode={<Button onClick={() => setErrorMessage('')}>{intl.formatMessage(messages.close)}</Button>}>
+        {errorMessage}
+      </AlertModal>
     </Container>
   );
 };

src/dateExtensions/messages.ts

@@ -61,6 +61,11 @@ const messages = defineMessages({
     defaultMessage: 'Reset Due Date for Student',
     description: 'Label for the confirm button in the reset modal',
   },
+  close: {
+    id: 'instruct.dateExtensions.page.resetModal.close',
+    defaultMessage: 'Close',
+    description: 'Label for the close button in the reset modal',
+  },
 });
 
 export default messages;

src/main.scss

@@ -2,3 +2,8 @@
 @import "@edx/brand/paragon/variables";
 @import "@openedx/paragon/scss/core/core";
 @import "@edx/brand/paragon/overrides";
+
+.toast-container {
+    left: unset;
+    right: 1.25rem;
+}