Notifications context

packages/files-ui/src/App.tsx

@@ -16,6 +16,7 @@ import { FilesApiProvider }  from "./Contexts/FilesApiContext"
 import { UserProvider } from "./Contexts/UserContext"
 import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
+import { NotificationsProvider } from "./Contexts/NotificationsContext"
 
 if (
   process.env.NODE_ENV === "production" &&
@@ -121,19 +122,21 @@ const App = () => {
                   enableLogging={directAuthNetwork !== "mainnet"}
                   network={directAuthNetwork}
                 >
-                  <UserProvider>
-                    <FilesProvider>
-                      <BillingProvider>
-                        <Router>
-                          <PosthogProvider>
-                            <AppWrapper>
-                              <FilesRoutes />
-                            </AppWrapper>
-                          </PosthogProvider>
-                        </Router>
-                      </BillingProvider>
-                    </FilesProvider>
-                  </UserProvider>
+                  <NotificationsProvider>
+                    <UserProvider>
+                      <FilesProvider>
+                        <BillingProvider>
+                          <Router>
+                            <PosthogProvider>
+                              <AppWrapper>
+                                <FilesRoutes />
+                              </AppWrapper>
+                            </PosthogProvider>
+                          </Router>
+                        </BillingProvider>
+                      </FilesProvider>
+                    </UserProvider>
+                  </NotificationsProvider>
                 </ThresholdKeyProvider>
               </FilesApiProvider>
             </Web3Provider>

packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { Button, BellIcon, MenuDropdown } from "@chainsafe/common-components"
 import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import NotificationList from "./NotificationList"
+import { useNotifications } from "../../../Contexts/NotificationsContext"
 
 const useStyles = makeStyles(({ palette, constants }: ITheme) =>
   createStyles({
@@ -31,17 +32,15 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
 )
 
 export interface Notification {
+  id: string
   title: string
   createdAt: number
   onClick?: () => void
 }
 
-interface INotificationsDropdownProps {
-  notifications: Notification[]
-}
-
-const NotificationsDropdown = ({ notifications }: INotificationsDropdownProps) => {
+const NotificationsDropdown = () => {
   const classes = useStyles()
+  const { notifications } = useNotifications()
 
   return (
     <MenuDropdown

packages/files-ui/src/Components/Layouts/AppHeader.tsx

@@ -203,9 +203,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 </Button>
               </section>
               <section>
-                <NotificationsDropdown
-                  notifications={[]}
-                />
+                <NotificationsDropdown />
               </section>
             </section>
           ) : (

packages/files-ui/src/Contexts/NotificationsContext.tsx

@@ -0,0 +1,56 @@
+import  React, { ReactNode, useCallback, useState } from "react"
+import { Notification } from "../Components/Elements/Notifications/NotificationsDropdown"
+import { v4 as uuidv4 } from "uuid"
+
+type NotificationsContextProps = {
+  children: ReactNode | ReactNode[]
+}
+
+interface INotificationsContext {
+  notifications: Notification[]
+  addNotification: (notification: Omit<Notification, "id">) => string
+  removeNotification: (id: string) => void
+}
+
+const NotificationsContext = React.createContext<INotificationsContext | undefined>(
+  undefined
+)
+
+const NotificationsProvider = ({ children }: NotificationsContextProps) => {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+
+  const addNotification = useCallback((notification: Omit<Notification, "id">) => {
+    const id = uuidv4()
+    setNotifications([...notifications, {
+      id,
+      ...notification
+    }])
+    return id
+  }, [notifications])
+
+  const removeNotification = useCallback((id: string) => {
+    setNotifications(notifications.filter((notification) => notification.id !== id))
+  }, [notifications])
+
+  return (
+    <NotificationsContext.Provider
+      value={{
+        notifications,
+        addNotification,
+        removeNotification
+      }}
+    >
+      {children}
+    </NotificationsContext.Provider>
+  )
+}
+
+const useNotifications = () => {
+  const context = React.useContext(NotificationsContext)
+  if (context === undefined) {
+    throw new Error("useNotifications must be used within a NotificationsProvider")
+  }
+  return context
+}
+
+export { NotificationsProvider, useNotifications }