refactor(table): [NoTicket] Fix and clean up types (#369)

* refactor(table): [NoTicket] Fix and clean up types * refactor(table): [NoTicket] Use arrow function
getPopsure · Jul 24, 2024 · 2ea81dc · 2ea81dc
1 parent f39d4fe
commit 2ea81dc
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 66 deletions.
diff --git a/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx b/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx
@@ -42,7 +42,6 @@ export type BaseCellProps = {
     value: number;
     type: 'zap' | 'star';
   };
-  cellId?: string;
 };
 
 export const BaseCell = ({

diff --git a/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx b/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx
@@ -10,7 +10,6 @@ export type ButtonCellProps = {
   isSelected?: boolean;
   onClick: () => void;
   price?: ReactNode;
-  cellId?: string;
 };
 
 export const ButtonCell = ({

diff --git a/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx b/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx
@@ -9,7 +9,6 @@ export type CTACellProps = {
   grey?: boolean;
   narrow?: boolean;
   href: string;
-  cellId?: string;
 };
 import styles from './CTACell.module.scss';
 

diff --git a/src/lib/components/table/components/TableCell/CardCell/CardCell.tsx b/src/lib/components/table/components/TableCell/CardCell/CardCell.tsx
@@ -7,8 +7,8 @@ export type CardCellProps = {
   icon?: ReactNode;
   onClick?: () => void;
   href: string;
-  cellId?: string;
 };
+
 export const CardCell = ({
   title,
   description,
@@ -18,10 +18,10 @@ export const CardCell = ({
 }: CardCellProps) => {
   return (
     <div className="ta-left">
-      <Card 
+      <Card
         title={title}
         description={description}
-        density='balanced'
+        density="balanced"
         icon={icon}
         onClick={onClick}
         {...(href && { href, as: 'a' })}

diff --git a/src/lib/components/table/components/TableCell/TableCell.tsx b/src/lib/components/table/components/TableCell/TableCell.tsx
@@ -13,7 +13,6 @@ type ExtraTableCellProps = {
   isFirstCellInRow?: boolean;
   isTopLeftCell?: boolean;
   isNavigation?: boolean;
-  colSpan?: number;
 };
 
 export type TableCellProps = TableCellData & ExtraTableCellProps;

diff --git a/src/lib/components/table/components/TableContents/TableContents.tsx b/src/lib/components/table/components/TableContents/TableContents.tsx
@@ -12,7 +12,7 @@ export interface TableContentsProps {
   className?: string;
   collapsibleSections?: boolean;
   tableData: TableData;
-  hideColumns: number[];
+  hideColumns?: number[];
   hideDetails?: boolean;
   isMobile?: boolean;
   openModal?: ModalFunction;

diff --git a/src/lib/components/table/components/TableSection/TableSection.tsx b/src/lib/components/table/components/TableSection/TableSection.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 import styles from './TableSection.module.scss';
-import { TableCell, TableCellProps } from '../TableCell/TableCell';
+import { TableCell } from '../TableCell/TableCell';
 import {
   CellReplacements,
   isBaseCell,
@@ -14,7 +14,7 @@ import { useCallback } from 'react';
 export interface TableSectionProps {
   className?: string;
   tableCellRows: TableCellRowData[];
-  hideColumns: number[];
+  hideColumns?: number[];
   hideHeader?: boolean;
   openModal?: ModalFunction;
   title: string;
@@ -62,9 +62,8 @@ const TableSection = ({
   };
 
   const isVisibleColumn = useCallback(
-    (cellIndex: number) => (
-      !hideColumns.includes(cellIndex)
-    ), [hideColumns]
+    (cellIndex: number) => !hideColumns.includes(cellIndex),
+    [hideColumns]
   );
 
   return (
@@ -96,67 +95,69 @@ const TableSection = ({
                 },
               } as TableCellData;
 
-              return isVisibleColumn(cellIndex) && (
-                <TableCell
-                  key={cellIndex}
-                  isHeader
-                  isFirstCellInRow={isFirstCellInRow}
-                  isTopLeftCell={isFirstCellInRow}
-                  {...cellProps}
-                />
+              return (
+                isVisibleColumn(cellIndex) && (
+                  <TableCell
+                    key={cellIndex}
+                    isHeader
+                    isFirstCellInRow={isFirstCellInRow}
+                    isTopLeftCell={isFirstCellInRow}
+                    {...cellProps}
+                  />
+                )
               );
             })}
           </tr>
         </thead>
       )}
 
       <tbody>
-        {tableCellRows.map((row, rowIndex) => {
-
-          return rowIndex > 0 && (
-            <tr key={rowIndex} className={styles.tr}>
-              {row.map((tableCellData, cellIndex) => {
-                const key = `${rowIndex}-${cellIndex}`;
-                const isFirstCellInRow = cellIndex === 0;
-
-                const titleFromRow = getModalTitleFromRowHeader(row);
-                const titleFromColumnOrRow =
-                  getModalTitleFromColumnHeader(cellIndex) ||
-                  getModalTitleFromRowHeader(row);
-
-                const cellReplacementData =
-                  (tableCellData.cellId &&
-                    cellReplacements?.[tableCellData.cellId]) ||
-                  {};
-
-                const cellProps = {
-                  ...tableCellData,
-                  ...cellReplacementData,
-                  ...{
-                    openModal,
-                    modalTitle: isFirstCellInRow
-                      ? titleFromRow
-                      : titleFromColumnOrRow,
-                    align: isFirstCellInRow ? 'left' : 'center',
-                  },
-                } as TableCellData;
-
-                return !hideColumns.includes(cellIndex) && (
-                  <TableCell
-                    isFirstCellInRow={isFirstCellInRow}
-                    key={key}
-                    {...cellProps}
-                  />
-                );
-              })}
-            </tr>
-          );
-        })}
+        {tableCellRows.map(
+          (row, rowIndex) =>
+            rowIndex > 0 && (
+              <tr key={rowIndex} className={styles.tr}>
+                {row.map((tableCellData, cellIndex) => {
+                  const key = `${rowIndex}-${cellIndex}`;
+                  const isFirstCellInRow = cellIndex === 0;
+
+                  const titleFromRow = getModalTitleFromRowHeader(row);
+                  const titleFromColumnOrRow =
+                    getModalTitleFromColumnHeader(cellIndex) ||
+                    getModalTitleFromRowHeader(row);
+
+                  const cellReplacementData =
+                    (tableCellData.cellId &&
+                      cellReplacements?.[tableCellData.cellId]) ||
+                    {};
+
+                  const cellProps = {
+                    ...tableCellData,
+                    ...cellReplacementData,
+                    ...{
+                      openModal,
+                      modalTitle: isFirstCellInRow
+                        ? titleFromRow
+                        : titleFromColumnOrRow,
+                      align: isFirstCellInRow ? 'left' : 'center',
+                    },
+                  } as TableCellData;
+
+                  return (
+                    !hideColumns.includes(cellIndex) && (
+                      <TableCell
+                        isFirstCellInRow={isFirstCellInRow}
+                        key={key}
+                        {...cellProps}
+                      />
+                    )
+                  );
+                })}
+              </tr>
+            )
+        )}
       </tbody>
     </table>
   );
 };
 
-export type { TableCellProps };
-
 export { TableSection };
diff --git a/src/lib/components/table/types.ts b/src/lib/components/table/types.ts
@@ -4,14 +4,21 @@ import { CTACellProps } from './components/TableCell/CTACell/CTACell';
 import { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';
 import { CardCellProps } from './components/TableCell/CardCell/CardCell';
 
-type DefaultCellProps = { colSpan?: number };
+type DefaultCellProps = {
+  cellId?: string;
+  colSpan?: number;
+};
 
 type BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;
 type CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;
 type ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;
 type CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;
 
-export type TableCellData = BaseCellData | CTACellData | ButtonCellData | CardCellData;
+export type TableCellData =
+  | BaseCellData
+  | CTACellData
+  | ButtonCellData
+  | CardCellData;
 
 export const isBaseCell = (
   tableCellData: TableCellData