From d1d78ef71bd4859a9c1574a972bf91858330ea23 Mon Sep 17 00:00:00 2001 From: Rainnny7 Date: Thu, 18 Apr 2024 00:04:33 -0400 Subject: [PATCH] Add toasts to copy buttons --- Frontend/bun.lockb | Bin 178933 -> 178933 bytes Frontend/src/app/components/copy-button.tsx | 38 +++- .../app/components/player/player-result.tsx | 18 +- Frontend/src/app/components/ui/toast.tsx | 122 +++++++++++ Frontend/src/app/components/ui/toaster.tsx | 35 ++++ Frontend/src/app/components/ui/use-toast.ts | 194 ++++++++++++++++++ Frontend/src/app/layout.tsx | 6 +- 7 files changed, 399 insertions(+), 14 deletions(-) create mode 100644 Frontend/src/app/components/ui/toast.tsx create mode 100644 Frontend/src/app/components/ui/toaster.tsx create mode 100644 Frontend/src/app/components/ui/use-toast.ts diff --git a/Frontend/bun.lockb b/Frontend/bun.lockb index 9ffaf7725cdf3a4da356fdb20bc835cc3d18574d..f31439a67b2ebd703fb50d5beeb7f786ac78bab2 100644 GIT binary patch delta 43 wcmezRmFw$Qu7)j)-G|v3a%FxYB|l?O0qM?8R{A8nQlLJm{I>b0AlqIdH?_b diff --git a/Frontend/src/app/components/copy-button.tsx b/Frontend/src/app/components/copy-button.tsx index d51fcf3..5ddb05e 100644 --- a/Frontend/src/app/components/copy-button.tsx +++ b/Frontend/src/app/components/copy-button.tsx @@ -1,7 +1,8 @@ "use client"; -import { ReactElement, ReactNode } from "react"; +import { useToast } from "@/components/ui/use-toast"; import copy from "clipboard-copy"; +import { ReactElement, ReactNode } from "react"; /** * Props for the copy button. @@ -17,12 +18,41 @@ type CopyButtonProps = { * The children to render in this button. */ children: ReactNode; + + /** + * Should a toast be shown + * when this button is clicked? + */ + showToast: boolean; }; /** * A component that copies + * content to the clipboard. + * + * @returns the component */ -const CopyButton = ({ content, children }: CopyButtonProps): ReactElement => ( - -); +const CopyButton = ({ + content, + children, + showToast, +}: CopyButtonProps): ReactElement => { + const { toast } = useToast(); + const handleClick = async (): Promise => { + await copy(content); // Copy to the clipboard + + // Show a toast when copied + if (showToast) { + toast({ + title: "Copied", + description: ( + <> + Copied {content} to your clipboard + + ), + }); + } + }; + return ; +}; export default CopyButton; diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx index 5023547..9f4276b 100644 --- a/Frontend/src/app/components/player/player-result.tsx +++ b/Frontend/src/app/components/player/player-result.tsx @@ -1,16 +1,16 @@ -import Image from "next/image"; -import Link from "next/link"; -import { CachedPlayer, SkinPart } from "restfulmc-lib"; -import { ReactElement } from "react"; +import CopyButton from "@/components/copy-button"; import { Badge } from "@/components/ui/badge"; -import config from "@/config"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from "@/components/ui/context-menu"; -import CopyButton from "@/components/copy-button"; +import config from "@/config"; +import Image from "next/image"; +import Link from "next/link"; +import { ReactElement } from "react"; +import { CachedPlayer, SkinPart } from "restfulmc-lib"; /** * The props for a player result. @@ -120,15 +120,15 @@ const PlayerResult = ({ - + Copy Player Username - + Copy Player UUID - + Copy Share URL diff --git a/Frontend/src/app/components/ui/toast.tsx b/Frontend/src/app/components/ui/toast.tsx new file mode 100644 index 0000000..d9552b7 --- /dev/null +++ b/Frontend/src/app/components/ui/toast.tsx @@ -0,0 +1,122 @@ +"use client" + +import * as ToastPrimitives from "@radix-ui/react-toast" +import { cva, type VariantProps } from "class-variance-authority" +import { X } from "lucide-react" +import * as React from "react" + +import { cn } from "@/app/lib/utils" + +const ToastProvider = ToastPrimitives.Provider + +const ToastViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ToastViewport.displayName = ToastPrimitives.Viewport.displayName + +const toastVariants = cva( + "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", + { + variants: { + variant: { + default: "border bg-muted text-foreground", + destructive: + "destructive group border-destructive bg-destructive text-destructive-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Toast = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, variant, ...props }, ref) => { + return ( + + ) +}) +Toast.displayName = ToastPrimitives.Root.displayName + +const ToastAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ToastAction.displayName = ToastPrimitives.Action.displayName + +const ToastClose = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +ToastClose.displayName = ToastPrimitives.Close.displayName + +const ToastTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ToastTitle.displayName = ToastPrimitives.Title.displayName + +const ToastDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ToastDescription.displayName = ToastPrimitives.Description.displayName + +type ToastProps = React.ComponentPropsWithoutRef + +type ToastActionElement = React.ReactElement + +export { + Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, type ToastActionElement, type ToastProps +} + diff --git a/Frontend/src/app/components/ui/toaster.tsx b/Frontend/src/app/components/ui/toaster.tsx new file mode 100644 index 0000000..a451808 --- /dev/null +++ b/Frontend/src/app/components/ui/toaster.tsx @@ -0,0 +1,35 @@ +"use client" + +import { + Toast, + ToastClose, + ToastDescription, + ToastProvider, + ToastTitle, + ToastViewport, +} from "@/app/components/ui/toast" +import { useToast } from "@/app/components/ui/use-toast" + +export function Toaster() { + const { toasts } = useToast() + + return ( + + {toasts.map(function ({ id, title, description, action, ...props }) { + return ( + +
+ {title && {title}} + {description && ( + {description} + )} +
+ {action} + +
+ ) + })} + +
+ ) +} diff --git a/Frontend/src/app/components/ui/use-toast.ts b/Frontend/src/app/components/ui/use-toast.ts new file mode 100644 index 0000000..b21985b --- /dev/null +++ b/Frontend/src/app/components/ui/use-toast.ts @@ -0,0 +1,194 @@ +"use client" + +// Inspired by react-hot-toast library +import * as React from "react" + +import type { + ToastActionElement, + ToastProps, +} from "@/app/components/ui/toast" + +const TOAST_LIMIT = 1 +const TOAST_REMOVE_DELAY = 1000000 + +type ToasterToast = ToastProps & { + id: string + title?: React.ReactNode + description?: React.ReactNode + action?: ToastActionElement +} + +const actionTypes = { + ADD_TOAST: "ADD_TOAST", + UPDATE_TOAST: "UPDATE_TOAST", + DISMISS_TOAST: "DISMISS_TOAST", + REMOVE_TOAST: "REMOVE_TOAST", +} as const + +let count = 0 + +function genId() { + count = (count + 1) % Number.MAX_SAFE_INTEGER + return count.toString() +} + +type ActionType = typeof actionTypes + +type Action = + | { + type: ActionType["ADD_TOAST"] + toast: ToasterToast + } + | { + type: ActionType["UPDATE_TOAST"] + toast: Partial + } + | { + type: ActionType["DISMISS_TOAST"] + toastId?: ToasterToast["id"] + } + | { + type: ActionType["REMOVE_TOAST"] + toastId?: ToasterToast["id"] + } + +interface State { + toasts: ToasterToast[] +} + +const toastTimeouts = new Map>() + +const addToRemoveQueue = (toastId: string) => { + if (toastTimeouts.has(toastId)) { + return + } + + const timeout = setTimeout(() => { + toastTimeouts.delete(toastId) + dispatch({ + type: "REMOVE_TOAST", + toastId: toastId, + }) + }, TOAST_REMOVE_DELAY) + + toastTimeouts.set(toastId, timeout) +} + +export const reducer = (state: State, action: Action): State => { + switch (action.type) { + case "ADD_TOAST": + return { + ...state, + toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), + } + + case "UPDATE_TOAST": + return { + ...state, + toasts: state.toasts.map((t) => + t.id === action.toast.id ? { ...t, ...action.toast } : t + ), + } + + case "DISMISS_TOAST": { + const { toastId } = action + + // ! Side effects ! - This could be extracted into a dismissToast() action, + // but I'll keep it here for simplicity + if (toastId) { + addToRemoveQueue(toastId) + } else { + state.toasts.forEach((toast) => { + addToRemoveQueue(toast.id) + }) + } + + return { + ...state, + toasts: state.toasts.map((t) => + t.id === toastId || toastId === undefined + ? { + ...t, + open: false, + } + : t + ), + } + } + case "REMOVE_TOAST": + if (action.toastId === undefined) { + return { + ...state, + toasts: [], + } + } + return { + ...state, + toasts: state.toasts.filter((t) => t.id !== action.toastId), + } + } +} + +const listeners: Array<(state: State) => void> = [] + +let memoryState: State = { toasts: [] } + +function dispatch(action: Action) { + memoryState = reducer(memoryState, action) + listeners.forEach((listener) => { + listener(memoryState) + }) +} + +type Toast = Omit + +function toast({ ...props }: Toast) { + const id = genId() + + const update = (props: ToasterToast) => + dispatch({ + type: "UPDATE_TOAST", + toast: { ...props, id }, + }) + const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) + + dispatch({ + type: "ADD_TOAST", + toast: { + ...props, + id, + open: true, + onOpenChange: (open) => { + if (!open) dismiss() + }, + }, + }) + + return { + id: id, + dismiss, + update, + } +} + +function useToast() { + const [state, setState] = React.useState(memoryState) + + React.useEffect(() => { + listeners.push(setState) + return () => { + const index = listeners.indexOf(setState) + if (index > -1) { + listeners.splice(index, 1) + } + } + }, [state]) + + return { + ...state, + toast, + dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), + } +} + +export { useToast, toast } diff --git a/Frontend/src/app/layout.tsx b/Frontend/src/app/layout.tsx index 6708bd2..74285c4 100644 --- a/Frontend/src/app/layout.tsx +++ b/Frontend/src/app/layout.tsx @@ -1,4 +1,5 @@ import Navbar from "@/components/navbar"; +import { Toaster } from "@/components/ui/toaster"; import { TooltipProvider } from "@/components/ui/tooltip"; import config from "@/config"; import { notoSans } from "@/font/fonts"; @@ -6,8 +7,8 @@ import { cn } from "@/lib/utils"; import ThemeProvider from "@/provider/theme-provider"; import type { Metadata, Viewport } from "next"; import PlausibleProvider from "next-plausible"; -import "./globals.css"; import { ReactElement, ReactNode } from "react"; +import "./globals.css"; /** * Site metadata & viewport. @@ -45,6 +46,9 @@ const RootLayout = ({ {children} {/*