feature/IO-3103-Ant5-Notifications

client/src/components/eula/eula.component.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row } from "antd";
+import { Button, Card, Checkbox, Col, Form, Input, Modal, Row } from "antd";
 import Markdown from "react-markdown";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
@@ -12,6 +12,7 @@ import dayjs from "../../utils/day";
 
 import "./eula.styles.scss";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const Eula = ({ currentEula, currentUser, acceptEula }) => {
   const [formReady, setFormReady] = useState(false);
@@ -20,7 +21,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
   const [form] = Form.useForm();
   const markdownCardRef = useRef(null);
   const { t } = useTranslation();
-  const [api, contextHolder] = notification.useNotification();
+  const notification = useNotification();
 
   const handleScroll = useCallback(
     (e) => {
@@ -75,7 +76,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
       });
       acceptEula();
     } catch (err) {
-      api.error({
+      notification.error({
         message: t("eula.errors.acceptance.message"),
         description: t("eula.errors.acceptance.description"),
         placement: "bottomRight",
@@ -91,7 +92,6 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
 
   return (
     <>
-      {contextHolder}
       <Modal
         title={t("eula.titles.modal")}
         className="eula-modal"