feat(budget-app): refactor all numbro consume into globla lib

mildronize · May 4, 2024 · 78b87a3 · 78b87a3
1 parent 10b94b4
commit 78b87a3
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 33 deletions.
diff --git a/budget-app/src/app/budget/components/AvailableChip.tsx b/budget-app/src/app/budget/components/AvailableChip.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { formatNumberThousand } from "@/global/formatNumberThousand";
 import { Chip } from "@mui/material";
 import numbro from "numbro";
 
@@ -17,7 +18,7 @@ export function AvailableChip(props: AvailableChipProps) {
   }
   return (
     <Chip
-      label={numbro(props.available).format("0,0")}
+      label={formatNumberThousand(props.available)}
       size="small"
       sx={{
         "&.MuiChip-root": {

diff --git a/budget-app/src/app/budget/components/CategoryGroupDropDownList.tsx b/budget-app/src/app/budget/components/CategoryGroupDropDownList.tsx
@@ -12,6 +12,7 @@ import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import { BudgetGroupItem } from "./types";
 import numbro from "numbro";
+import { formatNumberThousand } from "@/global/formatNumberThousand";
 
 export interface CategoryGroupDropDownListProps {
   onClick?: () => void;
@@ -63,7 +64,7 @@ export function CategoryGroupDropDownList(
             padding: 0,
           }}
         >
-          {numbro(props.header.totalAssigned).format("0,0")}
+          {formatNumberThousand(props.header.totalAssigned)}
         </ListTableColumn>
         <ListTableColumn
           ratio={20}
@@ -77,7 +78,7 @@ export function CategoryGroupDropDownList(
         >
           {props.header.countOverspent > 0 ? (
             <Chip
-              label={numbro(props.header.totalAvailable).format("0,0")}
+              label={formatNumberThousand(props.header.totalAvailable)}
               size="small"
               sx={{
                 "&.MuiChip-root": {
@@ -90,7 +91,7 @@ export function CategoryGroupDropDownList(
               }}
             />
           ) : (
-            numbro(props.header.totalAvailable).format("0,0")
+            formatNumberThousand(props.header.totalAvailable)
           )}
         </ListTableColumn>
       </ListTableRow>

diff --git a/budget-app/src/app/budget/components/ListRow/BudgetProgress.tsx b/budget-app/src/app/budget/components/ListRow/BudgetProgress.tsx
@@ -32,25 +32,4 @@ export function BudgetProgress({ items, value }: BudgetProgressProps) {
   } else {
     return <BudgetLinearProgress variant="determinate" value={value} />;
   }
-
-//   if (activity > 0 && activity <= available) {
-//     return (
-//       <Box>
-//         <SpendingLinearProgress variant="determinate" value={value} />
-//         <Box
-//           sx={{
-//             fontSize: "0.85rem",
-//             color: theme.palette.text.secondary,
-//             paddingTop: "10px",
-//           }}
-//         >
-//           {Math.abs(activity - available) < 1
-//             ? "Fully Spent"
-//             : `Spent ${numbro(activity).format("0,0")} of 
-//           ${numbro(available).format("0,0")}`}
-//         </Box>
-//       </Box>
-//     );
-//   }
-//   return <BudgetLinearProgress variant="determinate" value={value} />;
 }
diff --git a/budget-app/src/app/budget/components/ListRow/ListRow.tsx b/budget-app/src/app/budget/components/ListRow/ListRow.tsx
@@ -12,6 +12,7 @@ import { AutoSelectTextField } from "../AutoSelectNumberTextField";
 import { ListTableColumn, ListTableRow } from "../layouts";
 import numbro from "numbro";
 import { BudgetProgress } from "./BudgetProgress";
+import { formatNumberThousand } from "@/global/formatNumberThousand";
 
 const ListContainer = styled(Box)(() => ({
   display: "flex",
@@ -83,7 +84,7 @@ export function ListRow(props: ListRowProps) {
                     fontSize: theme.budget.amount.fontSize,
                   }}
                 >
-                  {numbro(items.assigned).format("0,0")}
+                  {formatNumberThousand(items.assigned)}
                 </Box>
               ) : null}
             </ListTableColumn>

diff --git a/budget-app/src/app/budget/components/StickerHeader.tsx b/budget-app/src/app/budget/components/StickerHeader.tsx
@@ -2,6 +2,7 @@
 import { useTheme } from "@mui/material/styles";
 import { Box, Typography } from "@mui/material";
 import numbro from "numbro";
+import { formatNumberThousand } from "@/global/formatNumberThousand";
 
 export interface StickyHeaderProps {
   summary: {
@@ -53,7 +54,7 @@ export function StickyHeader({ summary, height }: StickyHeaderProps) {
           // textAlign: "right",
         }}
       >
-        {numbro(readyToAssign).format("0,0")}
+        {formatNumberThousand(readyToAssign)}
         <br />
         {errorMessage}
       </Box>

diff --git a/budget-app/src/app/budget/components/layouts.tsx b/budget-app/src/app/budget/components/layouts.tsx
@@ -1,3 +1,4 @@
+import { formatNumberThousand } from "@/global/formatNumberThousand";
 import { Box, styled, Typography, useTheme } from "@mui/material";
 import numbro from "numbro";
 
@@ -39,7 +40,7 @@ export function MoneyColumn(
         ...(props.sx ?? {}),
       }}
     >
-      {numbro(props.value).format("0,0")}
+      {formatNumberThousand(props.value)}
     </Box>
   );
 }

diff --git a/budget-app/src/app/components/TransactionList.tsx b/budget-app/src/app/components/TransactionList.tsx
@@ -8,6 +8,7 @@ import dayjs from "dayjs";
 import { ListItemButton } from "@mui/material";
 import numbro from "numbro";
 import { useRouter } from "next/navigation";
+import { formatNumberThousand } from "@/global/formatNumberThousand";
 
 /**
  * Hotfix for uuid gen
@@ -100,7 +101,7 @@ export function TransactionList(props: TransactionListProps) {
                     > */}
                     {item.payee}
                     {/* </Typography> */}
-                    {` — ${numbro(item.amount).format("0,0")} on ${dayjs(
+                    {` — ${formatNumberThousand(item.amount)} on ${dayjs(
                       item.date
                     ).format("MMM DD")}`}
                     {dayjs().year().toString() !==

diff --git a/budget-app/src/global/formatNumberThousand.ts b/budget-app/src/global/formatNumberThousand.ts
@@ -1,10 +1,18 @@
 import numbro from "numbro";
 
-export type NumbroFormatOption = Parameters<ReturnType<typeof numbro>["format"]>[0];
+export type NumbroFormatOption = Parameters<
+  ReturnType<typeof numbro>["format"]
+>[0];
 
 /**
  * Format number to thousand using numbro
  */
-export function formatNumberThousand(num: number, formatOptions?: NumbroFormatOption) {
-  return numbro(num).format(formatOptions ?? "0,0")
-}
+export function formatNumberThousand(
+  num: number | undefined,
+  formatOptions?: NumbroFormatOption
+) {
+  if (num === undefined) {
+    return "";
+  }
+  return numbro(num).format(formatOptions ?? "0,0");
+}