feature/IO-3103-Ant5-Notifications

client/src/contexts/Notifications/notificationContext.jsx

@@ -0,0 +1,34 @@
+// NotificationProvider.jsx
+import React, { createContext, useContext } from "react";
+import { notification } from "antd";
+
+/**
+ * Create our NotificationContext to store the `api` object
+ * returned by notification.useNotification().
+ */
+const NotificationContext = createContext(null);
+
+/**
+ * A custom hook to make usage easier in child components.
+ */
+export const useNotification = () => {
+  return useContext(NotificationContext);
+};
+
+/**
+ * The Provider itself:
+ *  - Call notification.useNotification() to get [api, contextHolder].
+ *  - Render contextHolder somewhere high-level in your app (so the notifications mount properly).
+ *  - Provide `api` via the NotificationContext.
+ */
+export const NotificationProvider = ({ children }) => {
+  const [api, contextHolder] = notification.useNotification();
+
+  return (
+    <NotificationContext.Provider value={api}>
+      {/* contextHolder must be rendered in the DOM so notifications can appear */}
+      {contextHolder}
+      {children}
+    </NotificationContext.Provider>
+  );
+};