From 0ee51523ae19ca90c460d025924628ef1f62691a Mon Sep 17 00:00:00 2001
From: tyler-akamai <139489745+tyler-akamai@users.noreply.github.com>
Date: Thu, 24 Aug 2023 15:31:52 -0400
Subject: [PATCH] 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>
---
 .../pr-9555-tech-stories-1692282778803.md     |  5 ++++
 packages/manager/src/MainContent.tsx          |  2 +-
 .../ToastNotifications/ToastNotifications.tsx | 28 ++++++++-----------
 .../src/features/ToastNotifications/index.ts  |  2 --
 4 files changed, 17 insertions(+), 20 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-9555-tech-stories-1692282778803.md
 delete mode 100644 packages/manager/src/features/ToastNotifications/index.ts

diff --git a/packages/manager/.changeset/pr-9555-tech-stories-1692282778803.md b/packages/manager/.changeset/pr-9555-tech-stories-1692282778803.md
new file mode 100644
index 00000000000..9b01135c89c
--- /dev/null
+++ b/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))
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 1edd9b94104..08a6ff4ffbc 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/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';
diff --git a/packages/manager/src/features/ToastNotifications/ToastNotifications.tsx b/packages/manager/src/features/ToastNotifications/ToastNotifications.tsx
index ade1dc2556e..896e9b59f68 100644
--- a/packages/manager/src/features/ToastNotifications/ToastNotifications.tsx
+++ b/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 (
diff --git a/packages/manager/src/features/ToastNotifications/index.ts b/packages/manager/src/features/ToastNotifications/index.ts
deleted file mode 100644
index 2d169461c85..00000000000
--- a/packages/manager/src/features/ToastNotifications/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import ToastNotifications from './ToastNotifications';
-export default ToastNotifications;