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

@@ -31,6 +31,7 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
 )
 
 export interface Notification {
+  id: string
   title: string
   createdAt: number
   onClick?: () => void

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

@@ -17,6 +17,7 @@ import { CSFTheme } from "../../Themes/types"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
 import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown"
+import { useNotifications } from "../../Contexts/NotificationsContext"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -145,6 +146,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const classes = useStyles()
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
+  const { notifications } = useNotifications()
   const [searchActive, setSearchActive] = useState(false)
   const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
 
@@ -204,7 +206,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
               </section>
               <section>
                 <NotificationsDropdown
-                  notifications={[]}
+                  notifications={notifications}
                 />
               </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 }