From 0daf0ceb193a9f0904a1def41f8d954a6920ffa8 Mon Sep 17 00:00:00 2001
From: trevor-anderson <trevor@nerdware.cloud>
Date: Tue, 20 Feb 2024 11:34:03 -0500
Subject: [PATCH] feat: add fwd ref, rm unused JSX exports

---
 src/components/Icons/InvoiceStatusIcon.tsx | 39 ++++++++++++++--------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/components/Icons/InvoiceStatusIcon.tsx b/src/components/Icons/InvoiceStatusIcon.tsx
index 3753effa..b8bbd83c 100644
--- a/src/components/Icons/InvoiceStatusIcon.tsx
+++ b/src/components/Icons/InvoiceStatusIcon.tsx
@@ -1,26 +1,37 @@
-import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import React, { forwardRef } from "react";
 import DollarCheckmarkIcon from "@mui/icons-material/PriceCheckRounded";
 import ExclamationMarkIcon from "@mui/icons-material/PriorityHighRounded";
+import { useMaybeRef } from "@/hooks/useMaybeRef";
 import { FileInvoiceDollarIcon } from "./FileInvoiceDollarIcon";
-import type { InvoiceStatus } from "@graphql/types";
+import type { InvoiceStatus } from "@/graphql/types";
+import type { SvgIconProps } from "@mui/material/SvgIcon";
 
-export const InvoiceStatusIcon = ({ status, ...props }: InvoiceStatusIconProps) => {
-  const InvStatusIcon = INV_STATUS_ICONS[status];
+export const InvoiceStatusIcon = forwardRef<SVGSVGElement, InvoiceStatusIconProps>(
+  function InvoiceStatusIcon({ status, ...svgIconProps }, ref) {
+    const svgRef = useMaybeRef(ref);
 
-  return <InvStatusIcon {...props} />;
-};
+    const StatusIcon = INVOICE_STATUS_ICONS[status];
 
-export const INV_STATUS_ICONS: Record<InvoiceStatus, typeof SvgIcon> = {
-  OPEN: FileInvoiceDollarIcon as typeof SvgIcon,
+    return <StatusIcon ref={svgRef} {...svgIconProps} />;
+  }
+);
+
+/**
+ * Map of {@link InvoiceStatus|Invoice statuses} to their corresponding icon component.
+ */
+export const INVOICE_STATUS_ICONS = {
+  OPEN: FileInvoiceDollarIcon,
   CLOSED: DollarCheckmarkIcon,
   DISPUTED: ExclamationMarkIcon,
-};
+} as const satisfies Record<InvoiceStatus, React.ComponentType>;
 
-export const INV_STATUS_ICON_REACT_NODES: Record<InvoiceStatus, React.ReactElement> = {
-  OPEN: <FileInvoiceDollarIcon />,
-  CLOSED: <DollarCheckmarkIcon />,
-  DISPUTED: <ExclamationMarkIcon />,
-};
+/**
+ * Map of {@link InvoiceStatus|Invoice statuses} to their corresponding icon as JSX.
+ * > If you need to pass props to the icon, use {@link INVOICE_STATUS_ICONS} instead.
+ */
+export const INVOICE_STATUS_ICONS_JSX = Object.fromEntries(
+  Object.entries(INVOICE_STATUS_ICONS).map(([status, Icon]) => [status, <Icon key={status} />])
+) as Record<InvoiceStatus, JSX.Element>;
 
 export type InvoiceStatusIconProps = {
   status: InvoiceStatus;