refactor: [M3-5181] - React Query for Events

packages/api-v4/.changeset/pr-9949-fixed-1706018014628.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Fixed
+---
+
+Removed incorrect `_initial` property on `Event` type ([#9949](https://github.com/linode/manager/pull/9949))

packages/api-v4/src/account/types.ts

@@ -410,7 +410,6 @@ export interface Event {
   time_remaining: null | string;
   username: string | null;
   secondary_entity: Entity | null;
-  _initial?: boolean;
   message: string | null;
 }
 /**

packages/manager/.changeset/pr-9949-tech-stories-1706017963330.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+React Query for Events ([#9949](https://github.com/linode/manager/pull/9949))

packages/manager/package.json

@@ -69,7 +69,6 @@
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "rxjs": "^5.5.6",
     "sanitize-html": "^2.11.0",
     "search-string": "^3.1.0",
     "simple-git": "^3.19.0",

packages/manager/src/App.tsx

@@ -14,11 +14,9 @@ import { GoTo } from './GoTo';
 import { MainContent } from './MainContent';
 import { SplashScreen } from './components/SplashScreen';
 import { useAdobeAnalytics } from './hooks/useAdobeAnalytics';
-import { useEventHandlers } from './hooks/useEventHandlers';
-import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 import { useInitialRequests } from './hooks/useInitialRequests';
 import { useNewRelic } from './hooks/useNewRelic';
-import { useToastNotifications } from './hooks/useToastNotifications';
+import { useEventsPoller } from './queries/events/events';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 
 // Ensure component's display name is 'App'
@@ -31,14 +29,6 @@ const BaseApp = withDocumentTitleProvider(
 
       const { areFeatureFlagsLoading } = useSetupFeatureFlags();
 
-      const { goToOpen, setGoToOpen } = useGlobalKeyboardListener();
-
-      useEventHandlers();
-      useToastNotifications();
-
-      useAdobeAnalytics();
-      useNewRelic();
-
       if (isLoading || areFeatureFlagsLoading) {
         return <SplashScreen />;
       }
@@ -56,11 +46,19 @@ const BaseApp = withDocumentTitleProvider(
               Opens an external site in a new window
             </span>
           </div>
-          <GoTo onClose={() => setGoToOpen(false)} open={goToOpen} />
+          <GoTo />
           <DocumentTitleSegment segment="Akamai Cloud Manager" />
           <MainContent />
+          <GlobalListeners />
         </ErrorBoundary>
       );
     })
   )
 );
+
+const GlobalListeners = () => {
+  useEventsPoller();
+  useAdobeAnalytics();
+  useNewRelic();
+  return null;
+};

packages/manager/src/GoTo.tsx

@@ -1,13 +1,14 @@
 import Dialog from '@mui/material/Dialog';
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
+import { makeStyles } from 'tss-react/mui';
 
 import EnhancedSelect, { Item } from 'src/components/EnhancedSelect/Select';
 
 import { useAccountManagement } from './hooks/useAccountManagement';
 import { useFlags } from './hooks/useFlags';
+import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   input: {
@@ -53,20 +54,21 @@ const useStyles = makeStyles()((theme: Theme) => ({
   },
 }));
 
-interface Props {
-  onClose: () => void;
-  open: boolean;
-}
-
-export const GoTo = React.memo((props: Props) => {
+export const GoTo = React.memo(() => {
   const { classes } = useStyles();
   const routerHistory = useHistory();
   const { _hasAccountAccess, _isManagedAccount } = useAccountManagement();
   const flags = useFlags();
 
+  const { goToOpen, setGoToOpen } = useGlobalKeyboardListener();
+
+  const onClose = () => {
+    setGoToOpen(false);
+  };
+
   const onSelect = (item: Item<string>) => {
     routerHistory.push(item.value);
-    props.onClose();
+    onClose();
   };
 
   const links = React.useMemo(
@@ -169,8 +171,8 @@ export const GoTo = React.memo((props: Props) => {
   return (
     <Dialog
       classes={dialogClasses}
-      onClose={props.onClose}
-      open={props.open}
+      onClose={onClose}
+      open={goToOpen}
       title="Go To..."
     >
       {/* I was about to put a "@todo" item for mobile display, but realized

packages/manager/src/MainContent.tsx

@@ -159,8 +159,10 @@ const Help = React.lazy(() =>
 const SearchLanding = React.lazy(
   () => import('src/features/Search/SearchLanding')
 );
-const EventsLanding = React.lazy(
-  () => import('src/features/Events/EventsLanding')
+const EventsLanding = React.lazy(() =>
+  import('src/features/Events/EventsLanding').then((module) => ({
+    default: module.EventsLanding,
+  }))
 );
 const AccountActivationLanding = React.lazy(
   () => import('src/components/AccountActivation/AccountActivationLanding')