refactoring Row component

leandrodalbo · Dec 18, 2024 · 9c5e92d · 9c5e92d
1 parent 847632c
commit 9c5e92d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 39 deletions.
diff --git a/src/components/TradingSignals.tsx b/src/components/TradingSignals.tsx
@@ -6,7 +6,7 @@ import { FaLinkedin } from "react-icons/fa";
 
 import { Head } from "./head/Head";
 import { Row } from "./row/Row";
-import { Signal } from "../types/types";
+import { Signal, signalKeys } from "../types/types";
 import { useCallback, useEffect, useState } from "react";
 import { Controls } from "./controls/Controls";
 

diff --git a/src/components/head/Head.tsx b/src/components/head/Head.tsx
@@ -1,3 +1,4 @@
+import { signalKeys } from "../../types/types";
 import "./head.css";
 import { FaSort } from "react-icons/fa";
 
@@ -9,22 +10,25 @@ export interface HeadProps {
 export const Head = ({ sortByDate, sortBySymbol }: HeadProps) => {
   return (
     <tr>
-      <th className="withsort" onClick={sortBySymbol}>
-        SYMBOL <FaSort data-testid="symbolsort" />
-      </th>
-      <th className="withsort" onClick={sortByDate}>
-        TIME <FaSort data-testid="datesort" />
-      </th>
-      <th>EMA</th>
-      <th>SMA</th>
-      <th>MACD</th>
-      <th>LINDA MACD</th>
-      <th>BOLLINGER BANDS</th>
-      <th>OBV</th>
-      <th>RSI</th>
-      <th>RSI DIVERGENCE</th>
-      <th>STOCHASTIC</th>
-      <th>ENGULFING CANDLE</th>
+      {signalKeys.map((it) => {
+        if ("symbol" === it.key) {
+          return (
+            <th key={it.key} className="withsort" onClick={sortBySymbol}>
+              SYMBOL <FaSort data-testid="symbolsort" />
+            </th>
+          );
+        }
+
+        if ("signalTime" === it.key) {
+          return (
+            <th key={it.key} className="withsort" onClick={sortByDate}>
+              TIME <FaSort data-testid="datesort" />
+            </th>
+          );
+        }
+
+        return <th key={it.key}>{it.displayed}</th>;
+      })}
     </tr>
   );
 };
diff --git a/src/components/row/Row.tsx b/src/components/row/Row.tsx
@@ -1,46 +1,36 @@
-import { Signal } from "../../types/types";
+import { Signal, signalKeys } from "../../types/types";
 import { unixToDate } from "../../utils/utils";
 import { BuySellItem } from "../buyselltem/BuySellItem";
 
 export interface RowProps {
   signal: Signal;
 }
 
-const lockedFields = new Set<string>([
-  "buyStrength",
-  "sellStrength",
-  "turtleSignal",
-  "hammerAndShootingCandle",
-  "version",
-]);
-
 export const Row = ({ signal }: RowProps) => {
   return (
     <tr>
-      {Object.entries(signal).map(([key, value]) => {
-        if (lockedFields.has(key)) {
-          return;
-        }
-
-        if ("symbol" === key) {
+      {signalKeys.map((it) => {
+        if ("symbol" === it.key) {
           return (
-            <td key={key} data-testid="symbol">
-              {value}
+            <td key={it.key} data-testid="symbol">
+              {signal[it.key as keyof typeof signal]}
             </td>
           );
         }
 
-        if ("signalTime" === key) {
+        if ("signalTime" === it.key) {
           return (
-            <td key={key} data-testid="signalTime">
-              {unixToDate(value)}
+            <td key={it.key} data-testid="signalTime">
+              {unixToDate(signal[it.key as keyof typeof signal] as number)}
             </td>
           );
         }
 
         return (
-          <td key={key} data-testid={key}>
-            <BuySellItem value={value as string} />
+          <td key={it.key} data-testid={it.key}>
+            <BuySellItem
+              value={signal[it.key as keyof typeof signal] as string}
+            />
           </td>
         );
       })}

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -18,6 +18,25 @@ export interface Signal {
   version: number;
 }
 
+export interface DisplayedSignal {
+  key: string;
+  displayed: string;
+}
+export const signalKeys: DisplayedSignal[] = [
+  { key: "symbol", displayed: "SYMBOL" },
+  { key: "signalTime", displayed: "TIME" },
+  { key: "engulfingCandle", displayed: "ENGULFING CANDLE" },
+  { key: "ema", displayed: "EMA" },
+  { key: "sma", displayed: "SMA" },
+  { key: "macd", displayed: "MACD" },
+  { key: "lindaMacd", displayed: "LINDA MACD" },
+  { key: "obv", displayed: "OBV" },
+  { key: "rsi", displayed: "RSI" },
+  { key: "rsiDivergence", displayed: "RSI DIVERGENCE" },
+  { key: "bollingerBands", displayed: "BOLLINGER BANDS" },
+  { key: "stochastic", displayed: "STOCHASTIC" },
+];
+
 export enum BuySell {
   BUY,
   SELL,