fix notification to use the App context

src/components/VirtualLab/ProjectTeamTable/index.tsx

@@ -14,7 +14,6 @@ import compact from 'lodash/compact';
 import CustomPopover from '@/features/entities/neuron-simulation/experiment/elements/popover';
 import AddMembersModal from '@/components/VirtualLab/create-entity-flows/project/add-members';
 import useUserPermissions from '@/hooks/useUserPermission';
-import useNotification from '@/hooks/notifications';
 import { MemberAvatarCasual } from '@/components/VirtualLab/create-entity-flows/common/member-avatar';
 import {
   cancelProjectInvite,
@@ -25,6 +24,8 @@ import { classNames } from '@/util/utils';
 import { extractInitials } from '@/util/slugify';
 import { tryCatch } from '@/api/utils';
 import { projectStatsAtomFamily } from '@/state/virtual-lab/projects';
+import { useAppNotification } from '@/components/notification';
+
 import type { Member, Role } from '@/api/virtual-lab-svc/queries/types';
 
 type Props = {
@@ -52,7 +53,8 @@ function RoleModifier({ user, ownerId, virtualLabId, projectId, onRemove }: Role
   const [loading, setLoading] = useState(false);
   const [removeLoading, seRemoveLoading] = useState(false);
   const refreshProjectStats = useSetAtom(projectStatsAtomFamily({ virtualLabId, projectId }));
-  const { error: notifyError, success: notifySuccess } = useNotification();
+
+  const { error: notifyError, success: notifySuccess } = useAppNotification();
 
   const onChange = async (_role: Role) => {
     setLoading(true);
@@ -68,24 +70,21 @@ function RoleModifier({ user, ownerId, virtualLabId, projectId, onRemove }: Role
       }
     );
     if (error) {
-      notifyError(
-        'Failed to update user role. Please try again or contact support if the issue persists.',
-        undefined,
-        'topRight',
-        true,
-        'user-role-update'
-      );
+      notifyError({
+        message:
+          'Failed to update user role. Please try again or contact support if the issue persists.',
+        placement: 'topRight',
+        key: 'user-role-update',
+      });
       return;
     }
     if (result.data) {
       updateRole(_role);
-      notifySuccess(
-        `User "${user.name}" role updated to ${get(find(roleOptions, { value: _role }), 'label')} successfully`,
-        undefined,
-        'topRight',
-        true,
-        'user-role-update'
-      );
+      notifySuccess({
+        message: `User "${user.name}" role updated to ${get(find(roleOptions, { value: _role }), 'label')} successfully`,
+        placement: 'topRight',
+        key: 'user-role-update',
+      });
     }
   };
 
@@ -103,23 +102,20 @@ function RoleModifier({ user, ownerId, virtualLabId, projectId, onRemove }: Role
       }
     );
     if (error) {
-      notifyError(
-        'Failed to cancel invite. Please try again or contact support if the issue persists.',
-        undefined,
-        'topRight',
-        true,
-        'user-cancel-invite'
-      );
+      notifyError({
+        message:
+          'Failed to cancel invite. Please try again or contact support if the issue persists.',
+        placement: 'topRight',
+        key: 'user-cancel-invite',
+      });
       return;
     }
     if (result.message) {
-      notifySuccess(
-        `Invite for ${user.email} cancelled successfully`,
-        undefined,
-        'topRight',
-        true,
-        'user-cancel-invite'
-      );
+      notifySuccess({
+        message: `Invite for ${user.email} cancelled successfully`,
+        placement: 'topRight',
+        key: 'user-cancel-invite',
+      });
       refreshProjectStats();
       onRemove(user.email);
     }
@@ -139,32 +135,27 @@ function RoleModifier({ user, ownerId, virtualLabId, projectId, onRemove }: Role
     );
     if (error) {
       if (get(error, 'cause.error_code') === 'FORBIDDEN_OPERATION') {
-        notifyError(
-          'You are not authorized to remove this user from the virtual lab.',
-          undefined,
-          'topRight',
-          true,
-          'user-remove-from-vlab'
-        );
+        notifyError({
+          message: 'You are not authorized to remove this user from the virtual lab.',
+          placement: 'topRight',
+          key: 'user-remove-from-vlab',
+        });
         return;
       }
-      notifyError(
-        'Failed to remove user from virtual lab. Please try again or contact support if the issue persists.',
-        undefined,
-        'topRight',
-        true,
-        'user-remove-from-vlab'
-      );
+      notifyError({
+        message:
+          'Failed to remove user from virtual lab. Please try again or contact support if the issue persists.',
+        placement: 'topRight',
+        key: 'user-remove-from-vlab',
+      });
       return;
     }
     if (result.message) {
-      notifySuccess(
-        `User "${user.name}" removed from virtual lab successfully`,
-        undefined,
-        'topRight',
-        true,
-        'user-remove-from-vlab'
-      );
+      notifySuccess({
+        message: `User "${user.name}" removed from virtual lab successfully`,
+        placement: 'topRight',
+        key: 'user-remove-from-vlab',
+      });
       refreshProjectStats();
       onRemove(user.id);
     }

src/components/VirtualLab/create-entity-flows/project/form.tsx

@@ -6,17 +6,16 @@ import { useParams, useRouter } from 'next/navigation';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { Form, ConfigProvider, Button } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useSession } from 'next-auth/react';
 import { unwrap } from 'jotai/utils';
-import { useAtomValue, useSetAtom } from 'jotai';
+
 import uniqBy from 'lodash/uniqBy';
 import reject from 'lodash/reject';
 import find from 'lodash/find';
-
 import VirtualLabsList from '@/components/VirtualLab/create-entity-flows/project/vlabs-list';
 import Overview from '@/components/VirtualLab/create-entity-flows/project/overview';
 import Footer from '@/components/VirtualLab/create-entity-flows/project/footer';
-import useNotification from '@/hooks/notifications';
 
 import type {
   ProjectFlowSteps,
@@ -32,6 +31,7 @@ import { virtualLabDetailAtomFamily, virtualLabMembersAtomFamily } from '@/state
 import { createProject } from '@/api/virtual-lab-svc/queries/project';
 import { generateVlProjectUrl } from '@/util/virtual-lab/urls';
 import { Member, Role } from '@/api/virtual-lab-svc/queries/types';
+import { useAppNotification } from '@/components/notification';
 import { ProjectPayload } from '@/api/virtual-lab-svc/types';
 import { classNames } from '@/util/utils';
 import { tryCatch } from '@/api/utils';
@@ -44,7 +44,7 @@ type Props = {
 };
 
 export default function CreationForm({ step, steps, onCancel, onStepChange }: Props) {
-  const notify = useNotification();
+  const { success: notifySuccess, error: notifyError } = useAppNotification();
   const { data } = useSession();
 
   const { push: navigate } = useRouter();
@@ -124,20 +124,16 @@ export default function CreationForm({ step, steps, onCancel, onStepChange }: Pr
       };
       const { data: resultCreation, error } = await tryCatch(createProject(id, formValues));
       if (error || !resultCreation || !resultCreation.data) {
-        notify.error(
-          'Project creation failed. Please check your details and try again.',
-          undefined,
-          'topRight',
-          undefined
-        );
+        notifyError({
+          message: 'Project creation failed. Please check your details and try again.',
+          placement: 'topRight',
+        });
       }
       if (resultCreation && resultCreation.data) {
-        notify.success(
-          `Your Project ${values.name} has been created successfully and is now ready to use.`,
-          undefined,
-          'topRight',
-          undefined
-        );
+        notifySuccess({
+          message: `Your Project ${values.name} has been created successfully and is now ready to use.`,
+          placement: 'topRight',
+        });
         refreshProjects();
         virtualLabDetailAtomFamily.remove(virtualLabId);
         navigate(`${generateVlProjectUrl(id, resultCreation.data.project.id)}/home`);

src/components/VirtualLab/create-entity-flows/virtual-lab/content.tsx

@@ -7,16 +7,16 @@ import { motion } from 'framer-motion';
 import { useSession } from 'next-auth/react';
 
 import Overview from '@/components/VirtualLab/create-entity-flows/virtual-lab/overview';
-import useNotification from '@/hooks/notifications';
 import { CreateVirtualLabFooter } from '@/components/VirtualLab/create-entity-flows/virtual-lab/footer';
+import { useAppNotification } from '@/components/notification';
 
 import { createVirtualLab } from '@/api/virtual-lab-svc/queries/virtual-lab';
 import { VirtualLabPayload } from '@/api/virtual-lab-svc/types';
 import { tryCatch } from '@/api/utils';
 
 export default function CreateVirtualLabForm() {
   const { data } = useSession();
-  const notify = useNotification();
+  const notify = useAppNotification();
   const { push: navigate } = useRouter();
   const [form] = Form.useForm<VirtualLabPayload>();
   const [isFormValid, setIsFormValid] = useState(false);
@@ -47,20 +47,16 @@ export default function CreateVirtualLabForm() {
     startTransition(async () => {
       const { data: result, error } = await tryCatch(createVirtualLab(values));
       if (error || !result || !result.data) {
-        notify.error(
-          'Virtual Lab creation failed. Please check your details and try again.',
-          undefined,
-          'topRight',
-          undefined
-        );
+        notify.error({
+          message: 'Virtual Lab creation failed. Please check your details and try again.',
+          placement: 'topRight',
+        });
       }
       if (result && result.data) {
-        notify.success(
-          'Your Virtual Lab has been created successfully and is now ready to use.',
-          undefined,
-          'topRight',
-          undefined
-        );
+        notify.success({
+          message: 'Your Virtual Lab has been created successfully and is now ready to use.',
+          placement: 'topRight',
+        });
         resetForm();
         navigate(`/app/virtual-lab/lab/${result.data.virtual_lab.id}/overview`);
       }

src/components/neuron-viewer/index.tsx

@@ -12,7 +12,7 @@ import { secNamesAtom } from '@/state/simulate/single-neuron';
 import { DEFAULT_CURRENT_INJECTION_CONFIG } from '@/constants/simulate/single-neuron';
 import { recordingSourceForSimulationAtom } from '@/state/simulate/categories/recording-source-for-simulation';
 import { currentInjectionSimulationConfigAtom } from '@/state/simulate/categories/current-injection-simulation';
-import useNotification from '@/hooks/notifications';
+import { useAppNotification } from '@/components/notification';
 
 type Props = {
   virtualLabId: string;
@@ -57,7 +57,7 @@ export default function NeuronViewer({
   const containerRef = useRef<HTMLDivElement>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const setSecNames = useSetAtom(secNamesAtom);
-  const { error: notifyError } = useNotification();
+  const { error: notifyError } = useAppNotification();
 
   const setSectionsAndSegments = useCallback(
     (morphology: Morphology) => {
@@ -98,13 +98,8 @@ export default function NeuronViewer({
   });
 
   if (error) {
-    notifyError(
-      `Morphology initialization error: ${error}`,
-      undefined,
-      'topRight',
-      undefined,
-      error
-    );
+    notifyError({ message: `Morphology initialization error: ${error}`, placement: 'topRight' });
+    return;
   }
 
   useNeuronViewerEvents({

src/components/notification/index.tsx

@@ -0,0 +1,18 @@
+import { App } from 'antd';
+
+export function useAppNotification() {
+  const { notification } = App.useApp();
+  return notification;
+}
+
+export function useAppMessage() {
+  const { message } = App.useApp();
+
+  return message;
+}
+
+export function useAppModal() {
+  const { modal } = App.useApp();
+
+  return modal;
+}