refactor: [M3-6285] - SRC > Features > ToastNotifications (#9555)

* initial migration changes

* Added changeset: SRC > Features > ToastNotifications MUI v5 migration

* removed default export

* updated useEffect dependency array

* deleted unnecessary comment

* replaced ToastNotification withSnackbar to useSnackbar

---------

Co-authored-by: TylerWJ <tylerwjones99@gmail.com>

packages/manager/.changeset/pr-9555-tech-stories-1692282778803.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+SRC > Features > ToastNotifications MUI v5 migration ([#9555](https://github.com/linode/manager/pull/9555))

packages/manager/src/MainContent.tsx

@@ -24,7 +24,7 @@ import {
   notificationContext,
   useNotificationContext,
 } from 'src/features/NotificationCenter/NotificationContext';
-import ToastNotifications from 'src/features/ToastNotifications';
+import { ToastNotifications } from 'src/features/ToastNotifications/ToastNotifications';
 import { TopMenu } from 'src/features/TopMenu/TopMenu';
 import VolumeDrawer from 'src/features/Volumes/VolumeDrawer';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';

packages/manager/src/features/ToastNotifications/ToastNotifications.tsx

@@ -1,7 +1,6 @@
 import { Event, EventStatus } from '@linode/api-v4/lib/account/types';
-import { WithSnackbarProps, withSnackbar } from 'notistack';
+import { WithSnackbarProps, useSnackbar } from 'notistack';
 import * as React from 'react';
-import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/bufferTime';
 import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/map';
@@ -70,12 +69,12 @@ export const getLabel = (event: Event) => event.entity?.label ?? '';
 export const getSecondaryLabel = (event: Event) =>
   event.secondary_entity?.label ?? '';
 
-class ToastNotifications extends React.PureComponent<WithSnackbarProps, {}> {
-  componentDidMount() {
-    this.subscription = events$
+export const ToastNotifications = () => {
+  const { enqueueSnackbar } = useSnackbar();
+  React.useEffect(() => {
+    const subscription = events$
       .filter(({ event }) => !event._initial)
       .map(({ event }) => {
-        const { enqueueSnackbar } = this.props;
         const label = getLabel(event);
         const secondaryLabel = getSecondaryLabel(event);
         switch (event.action) {
@@ -282,19 +281,14 @@ class ToastNotifications extends React.PureComponent<WithSnackbarProps, {}> {
           return;
         }
       });
-  }
-
-  componentWillUnmount() {
-    this.subscription.unsubscribe();
-  }
-  render() {
-    return null;
-  }
 
-  subscription: Subscription;
-}
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
 
-export default withSnackbar(ToastNotifications);
+  return null;
+};
 
 const formatLink = (text: string, link: string, handleClick?: any) => {
   return (