refactor alerts

src/App.tsx

@@ -1,22 +1,14 @@
 import React, { useContext } from 'react';
-import {
-  Page,
-  PageSection,
-  Button,
-  AlertVariant,
-} from '@patternfly/react-core';
 
 import { ClientList } from './clients/ClientList';
 import { DataLoader } from './components/data-loader/DataLoader';
 import { HttpClientContext } from './http-service/HttpClientContext';
 import { Client } from './clients/client-model';
+import { Page, PageSection } from '@patternfly/react-core';
 import { Header } from './PageHeader';
 import { PageNav } from './PageNav';
-import { AlertPanel } from './components/alert/AlertPanel';
-import { useAlerts, withAlerts } from './components/alert/Alerts';
 
-const AppComponent = () => {
+export const App = () => {
-  const [alerts, add, hide] = useAlerts();
   const httpClient = useContext(HttpClientContext);
 
   const loader = async () => {
@@ -27,18 +19,10 @@ const AppComponent = () => {
   return (
     <Page header={<Header />} sidebar={<PageNav />}>
       <PageSection>
-        <AlertPanel alerts={alerts} onCloseAlert={hide} />
         <DataLoader loader={loader}>
           {(clients) => <ClientList clients={clients} />}
         </DataLoader>
-        <Button
-          onClick={() => add('Crazy stuff happened', AlertVariant.danger)}
-        >
-          Click
-        </Button>
       </PageSection>
     </Page>
   );
 };
-
-export const App = withAlerts(AppComponent);

src/components/alert/Alerts.tsx

@@ -1,48 +1,24 @@
-import React, {
+import { useState } from 'react';
-  useState,
-  FunctionComponent,
-  useContext,
-  Dispatch,
-  SetStateAction,
-} from 'react';
 import { AlertType } from './AlertPanel';
 import { AlertVariant } from '@patternfly/react-core';
 
-const AlertsContext = React.createContext<
-  [AlertType[], Dispatch<SetStateAction<AlertType[]>>] | undefined
->(undefined);
-
-export function withAlerts(WrappedComponent: FunctionComponent) {
-  return function (props: any) {
-    const state = useState<AlertType[]>([]);
-
-    return (
-      <AlertsContext.Provider value={state}>
-        <WrappedComponent {...props} />
-      </AlertsContext.Provider>
-    );
-  };
-}
-
 export function useAlerts(): [
-  AlertType[],
   (message: string, type: AlertVariant) => void,
+  AlertType[],
   (key: number) => void
 ] {
+  const [alerts, setAlerts] = useState<AlertType[]>([]);
   const createId = () => new Date().getTime();
-  const [alerts, setAlerts] = useContext(AlertsContext)!;
 
   const hideAlert = (key: number) => {
-    setAlerts([...alerts.filter((el) => el.key !== key)]);
+    setAlerts((alerts) => [...alerts.filter((el) => el.key !== key)]);
   };
 
-  const add = (message: string, type: AlertVariant) => {
+  const add = (message: string, variant: AlertVariant) => {
     const key = createId();
-    setAlerts([...alerts, { key, message, variant: type }]);
+    setAlerts([...alerts, { key, message, variant }]);
-    if (type !== AlertVariant.danger) {
+    setTimeout(() => hideAlert(key), 8000);
-      setTimeout(() => hideAlert(key), 8000);
-    }
   };
 
-  return [alerts, add, hideAlert];
+  return [add, alerts, hideAlert];
 }