Issue #PS-390 fix: Fixed toast message

tekdi · Jun 14, 2024 · 68369bc · 68369bc
1 parent f069823
commit 68369bc
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18",
     "react-ga4": "^2.1.0",
+    "react-toastify": "^10.0.5",
     "sharp": "^0.33.3"
   },
   "devDependencies": {

diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Fade, Modal, Typography } from '@mui/material';
 import React, { useEffect } from 'react';
-import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
+import ToastMessage from '@/components/ToastMessage';
 import {
   attendanceStatusList,
   bulkAttendance,
@@ -19,16 +19,14 @@ import Loader from './Loader';
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import { showToastMessage } from './Toastify';
 
-interface State extends SnackbarOrigin {
-  openModal: boolean;
-}
 interface MarkBulkAttendanceProps {
   open: boolean;
   onClose: () => void;
   classId: string;
   selectedDate: Date;
-  onSaveSuccess: () => void;
+  onSaveSuccess?: (isModified?: boolean) => void;
 }
 
 const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
@@ -41,24 +39,15 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
   const { t } = useTranslation();
   const theme = useTheme<any>();
   const [loading, setLoading] = React.useState(false);
-  //   const [open, setOpen] = React.useState(false);
   const [showUpdateButton, setShowUpdateButton] = React.useState(false);
   const [cohortMemberList, setCohortMemberList] = React.useState<Array<{}>>([]);
   const [presentCount, setPresentCount] = React.useState(0);
   const [absentCount, setAbsentCount] = React.useState(0);
   const [bulkAttendanceStatus, setBulkAttendanceStatus] = React.useState('');
-  const [isError, setIsError] = React.useState<any>('');
   const [isAllAttendanceMarked, setIsAllAttendanceMarked] =
     React.useState(false);
   const [numberOfCohortMembers, setNumberOfCohortMembers] = React.useState(0);
-  const [state, setState] = React.useState<State>({
-    openModal: false,
-    vertical: 'top',
-    horizontal: 'center',
-  });
-  const { vertical, horizontal, openModal } = state;
 
-  //   const handleModalToggle = () => setOpen(!open);
   const modalContainer = {
     position: 'absolute',
     top: '50%',
@@ -82,7 +71,6 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
     setBulkAttendanceStatus(
       isAllPresent ? 'present' : isAllAbsent ? 'absent' : ''
     );
-    ``;
   };
 
   const submitBulkAttendanceAction = (
@@ -277,33 +265,38 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
         try {
           const response = await bulkAttendance(data);
           const resp = response?.data;
+
           if (resp) {
             setShowUpdateButton(true);
-            onClose();
             setLoading(false);
-            isError(false);
           }
           if (onSaveSuccess) {
-            onSaveSuccess();
+            if (presentCount === 0 && absentCount === 0) {
+              onSaveSuccess(false);
+            } else {
+              onSaveSuccess(true);
+            }
+
+            onClose();
           }
         } catch (error) {
-          console.error('Error fetching  cohort list:', error);
+          console.error('Error fetching cohort list:', error);
           setLoading(false);
-          setIsError(true);
+          showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
         }
-        handleClick({ vertical: 'bottom', horizontal: 'center' })();
+        // handleClick({ vertical: 'bottom', horizontal: 'center' })();
       };
       markBulkAttendance();
     }
   };
 
-  const handleClick = (newState: SnackbarOrigin) => () => {
-    setState({ ...newState, openModal: true });
-  };
+  // const handleClick = (newState: SnackbarOrigin) => () => {
+  // setState({ ...newState, openModal: true });
+  // };
 
-  const handleClose = () => {
-    setState({ ...state, openModal: false });
-  };
+  // const handleClose = () => {
+  // setState({ ...state, openModal: false });
+  // };
 
   return (
     <Box>
@@ -504,33 +497,6 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
           </Box>
         </Fade>
       </Modal>
-      {!isError ? (
-        <Snackbar
-          anchorOrigin={{ vertical, horizontal }}
-          open={openModal}
-          onClose={handleClose}
-          className="sample"
-          autoHideDuration={5000}
-          key={vertical + horizontal}
-          message={
-            presentCount == 0 && absentCount == 0
-              ? t('ATTENDANCE.ATTENDANCE_MARKED_SUCCESSFULLY')
-              : t('ATTENDANCE.ATTENDANCE_MODIFIED_SUCCESSFULLY')
-          }
-          // action={action}
-        />
-      ) : (
-        <Snackbar
-          anchorOrigin={{ vertical, horizontal }}
-          open={openModal}
-          onClose={handleClose}
-          className="sample"
-          autoHideDuration={5000}
-          key={vertical + horizontal}
-          message={t('COMMON.SOMETHING_WENT_WRONG')}
-          // action={action}
-        />
-      )}
     </Box>
   );
 };

diff --git a/src/components/ToastMessage.tsx b/src/components/ToastMessage.tsx
@@ -18,9 +18,11 @@ const DEFAULT_POSITION: Pick<State, 'vertical' | 'horizontal'> = {
 function ToastMessage({
   message,
   type = 'error',
+  onClose
 }: {
   message: string;
   type?: ToastTypes;
+  onClose?: () => void;
 }) {
   const [state, setState] = React.useState<State>({
     openModal: true,
@@ -30,6 +32,7 @@ function ToastMessage({
 
   const handleClose = () => {
     setState({ ...state, openModal: false });
+    onClose && onClose();
   };
 
   return (
@@ -38,6 +41,7 @@ function ToastMessage({
       open={state.openModal}
       onClose={handleClose}
       autoHideDuration={toastAutoHideDuration}
+      disableWindowBlurListener={true}
       key={'key_' + generateRandomString(3)}
     >
       <Alert severity={type} variant="filled" sx={{ width: '100%' }}>

diff --git a/src/components/Toastify.js b/src/components/Toastify.js
@@ -0,0 +1,58 @@
+import { toast } from 'react-toastify';
+
+const options = {
+  position: 'bottom-center',
+  hideProgressBar: true,
+  closeButton: false,
+  autoClose: 3000
+};
+
+export const showToastMessage = (message, type='success') => {
+  const commonOptions = {
+    ...options,
+    style: {
+      color: '#fff'
+    }
+  };
+
+  switch(type) {
+    case 'error':
+      toast.error(message, {
+        ...commonOptions,
+        style: {
+          ...commonOptions.style,
+          background: '#FF0000'
+        }
+      });
+      break;
+    case 'success':
+      toast.success(message, {
+        ...commonOptions,
+        style: {
+          ...commonOptions.style,
+          background: '#019722'
+        }
+      });
+      break;
+    case 'info':
+      toast.info(message, {
+        ...commonOptions,
+        style: {
+          ...commonOptions.style,
+          background: '#017AFF'
+        }
+      });
+      break;
+    case 'warning':
+      toast.warning(message, {
+        ...commonOptions,
+        style: {
+          ...commonOptions.style,
+          background: '#FFA500'
+        }
+      });
+      break;
+    default:
+      throw new Error(`Unknown toast type: ${type}`);
+  }
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -21,6 +21,8 @@ import customTheme from '../styles/customStyles';
 import { telemetryFactory } from '../utils/telemetry';
 import { useRouter } from 'next/router';
 import { initGA, logPageView } from '../utils/googleAnalytics';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
 const poppins = Poppins({
@@ -123,6 +125,7 @@ function App({ Component, pageProps }: AppProps) {
         {/* <ModeToggle /> */}
         <Container maxWidth="md" style={{ padding: 0 }}>
           <Component {...pageProps} />
+          <ToastContainer position="bottom-left" autoClose={3000} />
         </Container>
       </CssVarsProvider>
     </>