-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This pull request refers to the Notification Center modal refactor, deleting permanently the PopupContext way of showing the popup, and utilizing the Popover component from ShadCN to display it.
- Loading branch information
Showing
8 changed files
with
144 additions
and
130 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<HTMLDivElement>(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 ( | ||
| <div | ||
| ref={componentRef} | ||
| className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-muted px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" | ||
| <Popover | ||
| open={open} | ||
| onOpenChange={(k) => { | ||
| setOpen(k); | ||
| if (k) setNotificationCenter(false); | ||
| }} | ||
| > | ||
| <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground"> | ||
| Notifications | ||
| <div className="flex gap-3 pr-3 "> | ||
| <button | ||
| className="text-foreground hover:text-status-red" | ||
| onClick={() => { | ||
| closePopUp(); | ||
| setTimeout(clearNotificationList, 100); | ||
| }} | ||
| > | ||
| <IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" /> | ||
| </button> | ||
| <button | ||
| className="text-foreground hover:text-status-red" | ||
| onClick={closePopUp} | ||
| > | ||
| <IconComponent name="X" className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide"> | ||
| {notificationList.length !== 0 ? ( | ||
| notificationList.map((alertItem, index) => ( | ||
| <SingleAlert | ||
| key={alertItem.id} | ||
| dropItem={alertItem} | ||
| removeAlert={removeFromNotificationList} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <div className="flex h-full w-full items-center justify-center pb-16 text-ring"> | ||
| No new notifications | ||
| <PopoverTrigger>{children}</PopoverTrigger> | ||
| <PopoverContent className="flex h-[500px] w-[500px] flex-col"> | ||
| <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground"> | ||
| Notifications | ||
| <div className="flex gap-3 pr-3 "> | ||
| <button | ||
| className="text-foreground hover:text-status-red" | ||
| onClick={() => { | ||
| setOpen(false); | ||
| setTimeout(clearNotificationList, 100); | ||
| }} | ||
| > | ||
| <IconComponent name="Trash2" className="h-[1.1rem] w-[1.1rem]" /> | ||
| </button> | ||
| <button | ||
| className="text-foreground hover:text-status-red" | ||
| onClick={() => { | ||
| setOpen(false); | ||
| }} | ||
| > | ||
| <IconComponent name="X" className="h-5 w-5" /> | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide"> | ||
| {notificationList.length !== 0 ? ( | ||
| notificationList.map((alertItem, index) => ( | ||
| <SingleAlert | ||
| key={alertItem.id} | ||
| dropItem={alertItem} | ||
| removeAlert={removeFromNotificationList} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <div className="flex h-full w-full items-center justify-center pb-16 text-ring"> | ||
| No new notifications | ||
| </div> | ||
| )} | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<typeof PopoverPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> | ||
| >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( | ||
| <PopoverPrimitive.Portal> | ||
| <PopoverPrimitive.Content | ||
| ref={ref} | ||
| align={align} | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| </PopoverPrimitive.Portal> | ||
| )); | ||
| PopoverContent.displayName = PopoverPrimitive.Content.displayName; | ||
|
|
||
| export { Popover, PopoverTrigger, PopoverContent }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters