Docs: SonarCloud Regulation Changes on Table Component

zimmerman-team · Nov 29, 2024 · b34a587 · b34a587
1 parent 5b3e37e
commit b34a587
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/src/app/utils/formatLocale.ts b/src/app/utils/formatLocale.ts
@@ -1,7 +1,9 @@
 const locale = "en-US";
 
 export function formatLocale(value: number | bigint): string {
-  if (!value) return "";
+  if (!value) {
+    return "";
+  }
   return `US$ ${Number(value)
     .toLocaleString(locale, {
       style: "currency",
@@ -13,6 +15,8 @@ export function formatLocale(value: number | bigint): string {
 }
 
 export function formatLocaleN(value: number | bigint): string {
-  if (!value) return "0";
+  if (!value) {
+    return "0";
+  }
   return Number(value).toLocaleString(locale);
 }
diff --git a/src/components/tables/mui-datagrid/datagrid.stories.tsx b/src/components/tables/mui-datagrid/datagrid.stories.tsx
@@ -4,6 +4,12 @@ import myDataGrid from "./datagrid";
 import { GridToolbarContainer, GridToolbarQuickFilter } from "@mui/x-data-grid";
 import { columns, rows } from "./data";
 
+// Add at the top of datagrid.stories.tsx
+const BORDER_STYLES = {
+  RED: "2px solid red",
+  BLUE: "2px solid blue",
+} as const;
+
 // Custom toolbar component for the DataGrid
 const CustomToolbar = () => (
   <GridToolbarContainer>
@@ -60,8 +66,8 @@ export const DefaultDataGrid: Story = {
       columnHeaderTitleColor: "#333",
       rowHoverBackground: "#f0f0f0",
       cellFontSize: "14px",
-      cellFocusOutline: "2px solid blue",
-      cellActiveOutline: "2px solid red",
+      cellFocusOutline: BORDER_STYLES.BLUE,
+      cellActiveOutline: BORDER_STYLES.RED,
     },
     sx: {
       backgroundColor: "#f0f0f0",
@@ -84,8 +90,8 @@ export const DataGridWithCustomToolbar: Story = {
       columnHeaderTitleColor: "#333",
       rowHoverBackground: "#f0f0f0",
       cellFontSize: "14px",
-      cellFocusOutline: "2px solid blue",
-      cellActiveOutline: "2px solid red",
+      cellFocusOutline: BORDER_STYLES.BLUE,
+      cellActiveOutline: BORDER_STYLES.RED,
     },
     sx: {
       backgroundColor: "#f0f0f0",
@@ -122,8 +128,8 @@ export const DataGridWithCheckboxSelection: Story = {
       columnHeaderTitleColor: "#333",
       rowHoverBackground: "#f0f0f0",
       cellFontSize: "14px",
-      cellFocusOutline: "2px solid blue",
-      cellActiveOutline: "2px solid red",
+      cellFocusOutline: BORDER_STYLES.BLUE,
+      cellActiveOutline: BORDER_STYLES.RED,
     },
     sx: {
       backgroundColor: "#f0f0f0",
@@ -147,8 +153,8 @@ export const DataGridWithPagination: Story = {
       columnHeaderTitleColor: "#333",
       rowHoverBackground: "#f0f0f0",
       cellFontSize: "14px",
-      cellFocusOutline: "2px solid blue",
-      cellActiveOutline: "2px solid red",
+      cellFocusOutline: BORDER_STYLES.BLUE,
+      cellActiveOutline: BORDER_STYLES.RED,
     },
     sx: {
       backgroundColor: "#f0f0f0",
@@ -173,8 +179,8 @@ export const DataGridWithSorting: Story = {
       columnHeaderTitleColor: "#333",
       rowHoverBackground: "#f0f0f0",
       cellFontSize: "14px",
-      cellFocusOutline: "2px solid blue",
-      cellActiveOutline: "2px solid red",
+      cellFocusOutline: BORDER_STYLES.BLUE,
+      cellActiveOutline: BORDER_STYLES.RED,
     },
     sx: {
       backgroundColor: "#f0f0f0",
@@ -200,8 +206,8 @@ export const DataGridWithFiltering: Story = {
       columnHeaderTitleColor: "#333",
       rowHoverBackground: "#f0f0f0",
       cellFontSize: "14px",
-      cellFocusOutline: "2px solid blue",
-      cellActiveOutline: "2px solid red",
+      cellFocusOutline: BORDER_STYLES.BLUE,
+      cellActiveOutline: BORDER_STYLES.RED,
     },
     sx: {
       backgroundColor: "#f0f0f0",

diff --git a/src/components/tables/mui-tables/tables.tsx b/src/components/tables/mui-tables/tables.tsx
@@ -133,7 +133,9 @@ export default function MyTable({
   // Handle page change
   const handlePageChange = (event: unknown, newPage: number) => {
     setCurrentPage(newPage);
-    if (onPageChange) onPageChange(newPage);
+    if (onPageChange) {
+      onPageChange(newPage);
+    }
   };
   // Handle rows per page change
   const handleRowsPerPageChange = (
@@ -148,7 +150,9 @@ export default function MyTable({
     const direction = isAsc ? "desc" : "asc";
     setCurrentSortKey(columnId);
     setCurrentSortDirection(direction);
-    if (onSortChange) onSortChange(columnId, direction);
+    if (onSortChange) {
+      onSortChange(columnId, direction);
+    }
   };
 
   const sortedData = React.useMemo(() => {

diff --git a/src/utils/formatFinancialValue.ts b/src/utils/formatFinancialValue.ts
@@ -2,7 +2,9 @@ export function formatFinancialValue(
   value: number | bigint,
   noCurrency?: boolean
 ): string {
-  if (!value) return `${!noCurrency ? "US$ " : ""}0`;
+  if (!value) {
+    return `${!noCurrency ? "US$ " : ""}0`;
+  }
   return `${!noCurrency ? "US$ " : ""}${value.toLocaleString("en-US", {
     minimumFractionDigits: 0,
     maximumFractionDigits: 0,