From 39a696117e840d1e6fc07009ca8514132c523269 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 25 Jul 2023 15:15:52 -0300 Subject: [PATCH 1/2] Changed notification center popup to ShadCN Popover and deleted popupContext permanently. --- src/frontend/package-lock.json | 50 ++++++++- src/frontend/package.json | 1 + .../src/alerts/alertDropDown/index.tsx | 106 +++++++++--------- .../src/components/headerComponent/index.tsx | 52 +++------ src/frontend/src/components/ui/popover.tsx | 30 +++++ src/frontend/src/contexts/index.tsx | 5 +- src/frontend/src/contexts/popUpContext.tsx | 38 ------- src/frontend/src/types/alerts/index.ts | 4 +- 8 files changed, 154 insertions(+), 132 deletions(-) create mode 100644 src/frontend/src/components/ui/popover.tsx delete mode 100644 src/frontend/src/contexts/popUpContext.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 946c79864..ed3eacd4f 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", @@ -143,10 +144,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.22.6", + "version": "7.22.9", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz", "integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==", - "version": "7.22.9", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -1464,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", @@ -2614,6 +2651,15 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/axios": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.0.tgz", + "integrity": "sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==", + "deprecated": "This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!", + "dependencies": { + "axios": "*" + } + }, "node_modules/@types/cacheable-request": { "version": "6.0.3", "dev": true, diff --git a/src/frontend/package.json b/src/frontend/package.json index a5c4d61eb..e3814c1ad 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 a3f69d707..90838d693 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 67f738821..91e9bbd8a 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 000000000..63c80bb7e --- /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 70b7da07c..f143df708 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 8da50278c..000000000 --- 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 7033d99eb..1d01f0aef 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; From 361fd08828121a2fc2f24fd103087e48ef709580 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 25 Jul 2023 15:16:24 -0300 Subject: [PATCH 2/2] Formatting --- .../src/components/inputListComponent/index.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 1bda41333..13f5f7cca 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -1,10 +1,10 @@ import { useEffect } from "react"; import { InputListComponentType } from "../../types/components"; -import { Input } from "../ui/input"; -import { classNames } from "../../utils/utils"; import _ from "lodash"; +import { classNames } from "../../utils/utils"; import IconComponent from "../genericIconComponent"; +import { Input } from "../ui/input"; export default function InputListComponent({ value, @@ -19,13 +19,12 @@ export default function InputListComponent({ }, [disabled]); return ( -
1 && editNode ? "my-1" : "", - "flex flex-col gap-3" - ) - }> +
1 && editNode ? "my-1" : "", + "flex flex-col gap-3" + )} + > {value.map((i, idx) => { return (