Changes in toast alert and alert

src/common/components/AlertMessage.jsx

@@ -1,38 +1,52 @@
 import { Box } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
 import Text from './Text';
 import Icon from './Icon';
 import useStyle from '../hooks/useStyle';
 import Heading from './Heading';
 
 function AlertMessage({
-  message, type, iconColor, withoutIcon, style, textStyle, full, textColor, dangerouslySetInnerHTML, title, children, ...rest
+  message, type, iconColor, withoutIcon, style, textStyle, full, textColor, dangerouslySetInnerHTML, title, children, onClose, ...rest
 }) {
   const { fontColor } = useStyle();
   const alertColors = {
-    soft: '#FFF4DC',
-    warning: '#FFB718',
-    success: '#25BF6C',
-    error: '#dc3545',
-    info: '#00A0E9',
+    soft: { background: '#FFF4DC' },
+    warning: { background: '#ffefcc', borderColor: '#FFB718' },
+    success: { background: '#e0ffe8', borderColor: '#00bb2d' },
+    error: { background: '#fee8e8', borderColor: '#EB5757' },
+    info: { background: '#37c0ff', borderColor: '#DADADA' },
   };
 
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    setVisible(true);
+  }, []);
+
+  const handleClose = () => {
+    setVisible(false);
+    if (onClose) onClose();
+  };
+
+  if (!visible) return null;
+
   return (message || children) && (
     <Box
       display="flex"
-      style={style}
+      style={{ ...style, position: 'fixed', top: '100px', left: '50%', transform: 'translateX(-50%)', zIndex: 999, width: '90%', textTransform: 'uppercase', borderRadius: '10px', maxWidth: '1200px' }}
       flexDirection="row"
-      backgroundColor={full ? alertColors[type] : 'transparent'}
+      backgroundColor={full ? alertColors[type].background : 'transparent'}
       border="2px solid"
-      borderColor={alertColors[type]}
+      borderColor={alertColors[type].borderColor}
       alignItems="center"
       padding="16px"
       borderRadius="16px"
       gridGap="16px"
       {...rest}
     >
       {!withoutIcon && (
-        <Icon icon={type} secondColor={rest.secondColor} color={iconColor || (full ? '#000' : '')} props={{ full: true }} style={{ minWidth: '18px' }} width="18px" height="18px" />
+        <Icon icon={type} secondColor={rest.secondColor} color={iconColor || (full ? alertColors[type]?.background : '')} props={{ full: true }} style={{ minWidth: '18px' }} width="18px" height="18px" />
       )}
       {children && children}
       {!children && (
@@ -59,6 +73,9 @@ function AlertMessage({
           </Box>
         </>
       )}
+      <button type="button" onClick={handleClose} style={{ position: 'absolute', right: '10px', top: '5px', background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer' }}>
+        X
+      </button>
     </Box>
   );
 }
@@ -75,6 +92,7 @@ AlertMessage.propTypes = {
   children: PropTypes.node,
   withoutIcon: PropTypes.bool,
   iconColor: PropTypes.string,
+  onClose: PropTypes.func,
 };
 
 AlertMessage.defaultProps = {
@@ -89,6 +107,7 @@ AlertMessage.defaultProps = {
   children: null,
   withoutIcon: false,
   iconColor: '',
+  onClose: null,
 };
 
 export default AlertMessage;

src/common/components/AttendanceModal/index.jsx

@@ -6,7 +6,7 @@ import {
   Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, Button, Box,
   NumberInput, NumberInputStepper, NumberDecrementStepper, NumberIncrementStepper, NumberInputField,
   FormControl, FormLabel, Flex, Grid, useCheckbox, useCheckboxGroup, Avatar,
-  useColorMode, useToast, Select, ModalCloseButton,
+  useColorMode, Select, ModalCloseButton,
 } from '@chakra-ui/react';
 import Icon from '../Icon';
 import Text from '../Text';
@@ -15,6 +15,7 @@ import ModalInfo from '../../../js_modules/moduleMap/modalInfo';
 import useStyle from '../../hooks/useStyle';
 import useCohortHandler from '../../hooks/useCohortHandler';
 import handlers from '../../handlers';
+import useCustomToast from '../../hooks/useCustomToast';
 
 function AttendanceModal({
   title, message, isOpen, onClose, students,
@@ -38,7 +39,7 @@ function AttendanceModal({
   const [openAttendanceTakenWarn, setOpenAttendanceTakenWarn] = useState(false);
   const [attendanceList, setAttendanceList] = useState({});
   const { colorMode } = useColorMode();
-  const toast = useToast();
+  const { createToast } = useCustomToast({ toastId: 'attendance-report-apply-modules ' });
 
   const { lightColor, borderColor } = useStyle();
 
@@ -58,7 +59,7 @@ function AttendanceModal({
         setAttendanceList(data);
       })
       .catch(() => {
-        toast({
+        createToast({
           position: 'top',
           title: t('alert-message:error-getting-previous-attendance'),
           status: 'error',
@@ -121,16 +122,16 @@ function AttendanceModal({
     handlers.saveCohortAttendancy({ cohortSlug: cohortSession.slug, students, checked, currentModule })
       .then((data) => {
         setAttendanceList(data);
-        toast({
+        createToast({
           position: 'top',
           title: t('alert-message:attendancy-reported'),
           status: 'success',
-          duration: 9000,
+          duration: 900,
           isClosable: true,
         });
       })
       .catch(() => {
-        toast({
+        createToast({
           position: 'top',
           title: t('alert-message:attendancy-report-error'),
           status: 'error',
@@ -156,7 +157,7 @@ function AttendanceModal({
           });
         })
         .catch(() => {
-          toast({
+          createToast({
             position: 'top',
             title: t('alert-message:error-updating-day-and-modules'),
             status: 'error',
@@ -168,7 +169,7 @@ function AttendanceModal({
         })
         .finally(() => setIsLoading(false));
     } else {
-      toast({
+      createToast({
         position: 'top',
         title: t('alert-message:error-updating-day-and-modules'),
         status: 'error',

src/common/components/CodeViewer.jsx

@@ -12,7 +12,6 @@ import {
   TabIndicator,
   Collapse,
   Tooltip,
-  useToast,
   CircularProgress,
 } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
@@ -26,6 +25,7 @@ import useAuth from '../hooks/useAuth';
 import useStyle from '../hooks/useStyle';
 import Text from './Text';
 import Icon from './Icon';
+import useCustomToast from '../hooks/useCustomToast';
 
 const notExecutables = ['css', 'shell', 'windows', 'mac', 'linux'];
 
@@ -66,7 +66,7 @@ function CodeViewer({ languagesData, allowNotLogged, fileContext, ...rest }) {
   const { hexColor } = useStyle();
   const { t } = useTranslation('code-viewer');
   const { isAuthenticated } = useAuth();
-  const toast = useToast();
+  const { createToast } = useCustomToast({ toastId: 'code-viewer-error-string' });
   const [initialTouchY, setInitialTouchY] = useState(null);
   const [tabIndex, setTabIndex] = useState(0);
   const [showModal, setShowModal] = useState(false);
@@ -190,7 +190,7 @@ function CodeViewer({ languagesData, allowNotLogged, fileContext, ...rest }) {
           currLanguage,
           ...languages.slice(tabIndex + 1),
         ]);
-        toast({
+        createToast({
           position: 'top',
           title: typeof e === 'string' ? e : t('error'),
           status: 'error',

src/common/components/CohortSideBar.jsx

@@ -5,7 +5,7 @@ import { memo, useState, useEffect } from 'react';
 // import { w3cwebsocket as W3CWebSocket } from 'websocket';
 import {
   Box, Heading, Divider, Grid, Tabs,
-  TabList, Tab, TabPanels, TabPanel, useToast, AvatarGroup, useMediaQuery, Flex,
+  TabList, Tab, TabPanels, TabPanel, AvatarGroup, useMediaQuery, Flex,
 } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 import { format, differenceInWeeks } from 'date-fns';
@@ -23,6 +23,7 @@ import useStyle from '../hooks/useStyle';
 import useCohortHandler from '../hooks/useCohortHandler';
 import useProgramList from '../store/actions/programListAction';
 import { isWindow } from '../../utils';
+import useCustomToast from '../hooks/useCustomToast';
 
 function ProfilesSection({
   title, paginationProps, isTeacherVersion, setAlumniGeeksList, profiles, wrapped, teacher, withoutPopover, showButton,
@@ -221,7 +222,7 @@ function CohortSideBar({
 }) {
   const { t } = useTranslation('dashboard');
   const router = useRouter();
-  const toast = useToast();
+  const { createToast } = useCustomToast({ toastId: 'cohort-side-bar-fetching-alumni-error' });
   const { slug } = router.query;
   const [alumniGeeksList, setAlumniGeeksList] = useState({});
   const [activeStudentsLoading, setActiveStudentsLoading] = useState(true);
@@ -278,7 +279,7 @@ function CohortSideBar({
             ),
           });
         }).catch(() => {
-          toast({
+          createToast({
             position: 'top',
             title: t('alert-message:error-fetching-alumni-geeks'),
             status: 'error',

src/common/components/ConnectGithubRigobot.jsx

@@ -3,7 +3,7 @@ import useTranslation from 'next-translate/useTranslation';
 import {
   Box, Button, Heading,
   InputGroup, InputLeftAddon, Modal, ModalBody, ModalCloseButton, ModalContent,
-  ModalHeader, ModalOverlay, Stack, Text, Tooltip, useToast,
+  ModalHeader, ModalOverlay, Stack, Text, Tooltip,
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import { useRouter } from 'next/router';
@@ -13,12 +13,13 @@ import bc from '../services/breathecode';
 import useAuth from '../hooks/useAuth';
 import Icon from './Icon';
 import useStyle from '../hooks/useStyle';
+import useCustomToast from '../hooks/useCustomToast';
 
 function ConnectGithubRigobot({ ...rest }) {
   const { t } = useTranslation('profile');
   const { user, isAuthenticatedWithRigobot, conntectToRigobot } = useAuth();
 
-  const toast = useToast();
+  const { createToast } = useCustomToast({ toastId: 'github-account-removed-error' });
   const router = useRouter();
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
@@ -165,7 +166,7 @@ function ConnectGithubRigobot({ ...rest }) {
                       setTimeout(() => {
                         router.reload();
                       }, 1000);
-                      toast({
+                      createToast({
                         position: 'top',
                         title: t('alert-message:any-removed', { any: 'GitHub' }),
                         description: t('alert-message:github-account-removed'),
@@ -175,7 +176,7 @@ function ConnectGithubRigobot({ ...rest }) {
                       });
                     })
                     .catch(() => {
-                      toast({
+                      createToast({
                         position: 'top',
                         title: t('alert-message:something-went-wrong'),
                         description: t('alert-message:error-removing-github'),

src/common/components/DirectAccessModal.jsx

@@ -1,4 +1,4 @@
-import { Box, Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text, useToast } from '@chakra-ui/react';
+import { Box, Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text } from '@chakra-ui/react';
 import { Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import useTranslation from 'next-translate/useTranslation';
@@ -12,6 +12,7 @@ import Heading from './Heading';
 import { setStorageItem, toCapitalize } from '../../utils';
 import { BREATHECODE_HOST } from '../../utils/variables';
 import { log } from '../../utils/logging';
+import useCustomToast from '../hooks/useCustomToast';
 
 function DirectAccessModal({ title, modalIsOpen }) {
   const { t } = useTranslation('profile');
@@ -22,7 +23,7 @@ function DirectAccessModal({ title, modalIsOpen }) {
   const router = useRouter();
   const locale = router?.locale;
   // const technology = router?.query?.technology || 'Python';
-  const toast = useToast();
+  const { createToast } = useCustomToast({ toastId: 'email-subscribed' });
 
   const [formProps, setFormProps] = useState({
     first_name: '',
@@ -62,7 +63,7 @@ function DirectAccessModal({ title, modalIsOpen }) {
       router.push('/thank-you');
     }
     if (resp.status >= 400) {
-      toast({
+      createToast({
         position: 'top',
         title: t('alert-message:email-already-subscribed'),
         status: 'warning',