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 }