diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index fe7a4c55..ed3eacd4 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -20,6 +20,7 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-menubar": "^1.0.3", + "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", @@ -1463,6 +1464,43 @@ } } }, + "node_modules/@radix-ui/react-popover": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.6.tgz", + "integrity": "sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.4", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.3", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.2", + "@radix-ui/react-portal": "1.0.3", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.1.2", "license": "MIT", diff --git a/src/frontend/package.json b/src/frontend/package.json index a5c4d61e..e3814c1a 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -15,6 +15,7 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-menubar": "^1.0.3", + "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx index a3f69d70..90838d69 100644 --- a/src/frontend/src/alerts/alertDropDown/index.tsx +++ b/src/frontend/src/alerts/alertDropDown/index.tsx @@ -1,66 +1,72 @@ -import { useContext, useRef } from "react"; +import { useContext, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "../../components/ui/popover"; import { alertContext } from "../../contexts/alertContext"; -import { PopUpContext } from "../../contexts/popUpContext"; import { AlertDropdownType } from "../../types/alerts"; -import { useOnClickOutside } from "../hooks/useOnClickOutside"; import SingleAlert from "./components/singleAlertComponent"; -export default function AlertDropdown({}: AlertDropdownType) { - const { closePopUp } = useContext(PopUpContext); - const componentRef = useRef(null); - - // Use the custom hook - useOnClickOutside(componentRef, () => { - closePopUp(); - }); - +export default function AlertDropdown({ children }: AlertDropdownType) { const { notificationList, clearNotificationList, removeFromNotificationList, + setNotificationCenter, } = useContext(alertContext); + const [open, setOpen] = useState(false); + return ( -
{ + setOpen(k); + if (k) setNotificationCenter(false); + }} > -
- Notifications -
- - -
-
-
- {notificationList.length !== 0 ? ( - notificationList.map((alertItem, index) => ( - - )) - ) : ( -
- No new notifications + {children} + +
+ Notifications +
+ +
- )} -
-
+
+
+ {notificationList.length !== 0 ? ( + notificationList.map((alertItem, index) => ( + + )) + ) : ( +
+ No new notifications +
+ )} +
+ + ); } diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 67f73882..91e9bbd8 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -1,13 +1,11 @@ import { useContext, useEffect, useState } from "react"; import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa"; -import { Link, useLocation, useParams } from "react-router-dom"; +import { Link, useLocation } from "react-router-dom"; import AlertDropdown from "../../alerts/alertDropDown"; import { USER_PROJECTS_HEADER } from "../../constants/constants"; import { alertContext } from "../../contexts/alertContext"; import { darkContext } from "../../contexts/darkContext"; -import { PopUpContext } from "../../contexts/popUpContext"; import { TabsContext } from "../../contexts/tabsContext"; -import { typesContext } from "../../contexts/typesContext"; import { getRepoStars } from "../../controllers/API"; import IconComponent from "../genericIconComponent"; import { Button } from "../ui/button"; @@ -15,14 +13,9 @@ import { Separator } from "../ui/separator"; import MenuBar from "./components/menuBar"; export default function Header() { - const { flows, addFlow, tabId } = useContext(TabsContext); - const { openPopUp } = useContext(PopUpContext); - const { templates } = useContext(typesContext); - const { id } = useParams(); - const AlertWidth = 384; + const { flows, tabId } = useContext(TabsContext); const { dark, setDark } = useContext(darkContext); - const { notificationCenter, setNotificationCenter, setErrorData } = - useContext(alertContext); + const { notificationCenter } = useContext(alertContext); const location = useLocation(); const [stars, setStars] = useState(null); @@ -111,33 +104,18 @@ export default function Header() { )} - + +
+ {notificationCenter && ( +
+ )} +
+
diff --git a/src/frontend/src/components/ui/popover.tsx b/src/frontend/src/components/ui/popover.tsx new file mode 100644 index 00000000..63c80bb7 --- /dev/null +++ b/src/frontend/src/components/ui/popover.tsx @@ -0,0 +1,30 @@ +"use client"; + +import * as PopoverPrimitive from "@radix-ui/react-popover"; +import * as React from "react"; +import { cn } from "../../utils/utils"; + +const Popover = PopoverPrimitive.Root; + +const PopoverTrigger = PopoverPrimitive.Trigger; + +const PopoverContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + + + +)); +PopoverContent.displayName = PopoverPrimitive.Content.displayName; + +export { Popover, PopoverTrigger, PopoverContent }; diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index 70b7da07..f143df70 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/src/frontend/src/contexts/index.tsx @@ -5,7 +5,6 @@ import { SSEProvider } from "./SSEContext"; import { AlertProvider } from "./alertContext"; import { DarkProvider } from "./darkContext"; import { LocationProvider } from "./locationContext"; -import PopUpProvider from "./popUpContext"; import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; import { UndoRedoProvider } from "./undoRedoContext"; @@ -22,9 +21,7 @@ export default function ContextWrapper({ children }: { children: ReactNode }) { - - {children} - + {children} diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx deleted file mode 100644 index 8da50278..00000000 --- a/src/frontend/src/contexts/popUpContext.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { createContext, useState } from "react"; - -// context to set JSX element on the DOM -export const PopUpContext = createContext({ - openPopUp: (popUpElement: JSX.Element) => {}, - closePopUp: () => {}, - setCloseEdit: (value: string) => {}, - closeEdit: "", -}); - -interface PopUpProviderProps { - children: React.ReactNode; -} - -const PopUpProvider = ({ children }: PopUpProviderProps) => { - const [popUpElements, setPopUpElements] = useState([]); - - const openPopUp = (element: JSX.Element) => { - setPopUpElements((prevPopUps) => [element, ...prevPopUps]); - }; - - const closePopUp = () => { - setPopUpElements((prevPopUps) => prevPopUps.slice(1)); - }; - - const [closeEdit, setCloseEdit] = useState(""); - - return ( - - {children} - {popUpElements[0]} - - ); -}; - -export default PopUpProvider; diff --git a/src/frontend/src/types/alerts/index.ts b/src/frontend/src/types/alerts/index.ts index 7033d99e..1d01f0ae 100644 --- a/src/frontend/src/types/alerts/index.ts +++ b/src/frontend/src/types/alerts/index.ts @@ -19,7 +19,9 @@ export type SingleAlertComponentType = { dropItem: AlertItemType; removeAlert: (index: string) => void; }; -export type AlertDropdownType = {}; +export type AlertDropdownType = { + children: JSX.Element; +}; export type AlertItemType = { type: "notice" | "error" | "success"; title: string;