From d3d7f6b8da8feae27a4fe2f3b687690acbf1ea40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Geonizeli?= <joao.geonizeli@gmail.com>
Date: Sun, 5 Sep 2021 22:06:16 -0300
Subject: [PATCH] use Table component on Stake and Exhcange history

---
 app/javascript/src/components/Table/Table.tsx |  27 +++++
 .../src/components/Table/TableRow.tsx         |  21 ++++
 app/javascript/src/components/Table/index.ts  |   2 +
 app/javascript/src/components/index.ts        |   1 +
 .../ExchangeHistory/ExchangeHistory.tsx       |  43 ++-----
 .../src/pages/Orders/Stake/Stake.tsx          | 112 ++++++------------
 app/javascript/src/pages/Orders/index.ts      |   2 +
 7 files changed, 98 insertions(+), 110 deletions(-)
 create mode 100644 app/javascript/src/components/Table/Table.tsx
 create mode 100644 app/javascript/src/components/Table/TableRow.tsx
 create mode 100644 app/javascript/src/components/Table/index.ts

diff --git a/app/javascript/src/components/Table/Table.tsx b/app/javascript/src/components/Table/Table.tsx
new file mode 100644
index 0000000..252e826
--- /dev/null
+++ b/app/javascript/src/components/Table/Table.tsx
@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import React from "react";
+
+type Props = {
+  columns: string[];
+};
+
+export const Table: FC<Props> = ({ columns, children }) => {
+  return (
+    <table className="min-w-full leading-normal">
+      <thead>
+        <tr>
+          {columns.map((column, index) => (
+            <th
+              key={index}
+              scope="col"
+              className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
+            >
+              {column}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>{children}</tbody>
+    </table>
+  );
+};
diff --git a/app/javascript/src/components/Table/TableRow.tsx b/app/javascript/src/components/Table/TableRow.tsx
new file mode 100644
index 0000000..cc6ed40
--- /dev/null
+++ b/app/javascript/src/components/Table/TableRow.tsx
@@ -0,0 +1,21 @@
+import type { FC, ReactNode } from "react";
+import React from "react";
+
+type Props = {
+  items?: Array<ReactNode | string>;
+};
+
+export const TableRow: FC<Props> = ({ items }) => {
+  return (
+    <tr>
+      {items?.map((item, index) => (
+        <td
+          key={index}
+          className="px-5 py-5 border-b border-gray-200 bg-white text-sm"
+        >
+          <p className="text-gray-900 whitespace-nowrap">{item}</p>
+        </td>
+      ))}
+    </tr>
+  );
+};
diff --git a/app/javascript/src/components/Table/index.ts b/app/javascript/src/components/Table/index.ts
new file mode 100644
index 0000000..c26fc70
--- /dev/null
+++ b/app/javascript/src/components/Table/index.ts
@@ -0,0 +1,2 @@
+export * from "./Table";
+export * from "./TableRow";
diff --git a/app/javascript/src/components/index.ts b/app/javascript/src/components/index.ts
index 90b1af0..b9980c2 100644
--- a/app/javascript/src/components/index.ts
+++ b/app/javascript/src/components/index.ts
@@ -4,3 +4,4 @@ export * from "./Modal";
 export * from "./Input";
 export * from "./Button";
 export * from "./Spinner";
+export * from "./Table";
diff --git a/app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx b/app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx
index 1e9370e..5037dde 100644
--- a/app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx
+++ b/app/javascript/src/pages/Orders/Exchange/ExchangeHistory/ExchangeHistory.tsx
@@ -3,6 +3,7 @@ import type { FC } from "react";
 import React from "react";
 import { useFragment } from "react-relay";
 
+import { Table } from "../../../../components";
 import { Messages } from "../../../../messages";
 import { centsToUnit } from "../../../../utils/fiatMoney";
 import type { CryptoExchangeOrderProps } from "./components/CryptoExchangeOrder";
@@ -119,41 +120,13 @@ export const ExchangeHistory: FC<Props> = ({
       <div className="py-8">
         <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
           <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-            <table className="min-w-full leading-normal">
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Valor pago
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Valor recebido
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Criado em
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Status
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {orderRows.map((order) => {
-                  return <CryptoExchangeOrder key={order?.id} {...order} />;
-                })}
-              </tbody>
-            </table>
+            <Table
+              columns={["Valor pago", "Valor recebido", "Criado em", "Status"]}
+            >
+              {orderRows.map((order) => {
+                return <CryptoExchangeOrder key={order?.id} {...order} />;
+              })}
+            </Table>
           </div>
         </div>
       </div>
diff --git a/app/javascript/src/pages/Orders/Stake/Stake.tsx b/app/javascript/src/pages/Orders/Stake/Stake.tsx
index ee88cf2..c05f2f7 100644
--- a/app/javascript/src/pages/Orders/Stake/Stake.tsx
+++ b/app/javascript/src/pages/Orders/Stake/Stake.tsx
@@ -7,6 +7,7 @@ import cx from "classnames";
 import { getStatusTextAndColors } from "../utils/processStatus";
 import type { StakeQuery } from "./__generated__/StakeQuery.graphql";
 import { Messages } from "../../../messages";
+import { Table, TableRow } from "../../../components";
 
 export const Stake: FC = () => {
   const { stakeOrders } = useLazyLoadQuery<StakeQuery>(
@@ -36,82 +37,43 @@ export const Stake: FC = () => {
       <div className="py-8">
         <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
           <div className="inline-block min-w-full shadow rounded-lg overflow-hidden">
-            <table className="min-w-full leading-normal">
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Pool
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Montante
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Criado em
-                  </th>
-                  <th
-                    scope="col"
-                    className="px-5 py-3 bg-white  border-b border-gray-200 text-gray-800  text-left text-sm uppercase font-normal"
-                  >
-                    Status
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {stakeOrders.edges.map(({ node }) => {
-                  const [label, textStyles, bgStyles] = getStatusTextAndColors(
-                    node.status
-                  );
+            <Table columns={["Pool", "Montante", "Criado Em", "Status"]}>
+              {stakeOrders.edges.map(({ node }) => {
+                const [label, textStyles, bgStyles] = getStatusTextAndColors(
+                  node.status
+                );
 
-                  return (
-                    <tr key={node.id}>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <p className="text-gray-900 whitespace-nowrap">
-                          {node.poolName}
-                        </p>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <p className="text-gray-900 whitespace-nowrap">
-                          {node.amount}
-                        </p>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <p className="text-gray-900 whitespace-nowrap">
-                          {new Date(
-                            node.createdAt as string
-                          ).toLocaleTimeString()}
-                        </p>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <span
-                          className={cx(
-                            "relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
-                            textStyles
-                          )}
-                        >
-                          <span
-                            aria-hidden="true"
-                            className={cx(
-                              "absolute inset-0 opacity-50 rounded-full",
-                              bgStyles
-                            )}
-                          />
-                          <span className="relative">{label}</span>
-                        </span>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
+                const status = (
+                  <span
+                    className={cx(
+                      "relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight",
+                      textStyles
+                    )}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={cx(
+                        "absolute inset-0 opacity-50 rounded-full",
+                        bgStyles
+                      )}
+                    />
+                    <span className="relative">{label}</span>
+                  </span>
+                );
+
+                return (
+                  <TableRow
+                    key={node.id}
+                    items={[
+                      node.poolName,
+                      node.amount,
+                      new Date(node.createdAt as string).toLocaleTimeString(),
+                      status,
+                    ]}
+                  />
+                );
+              })}
+            </Table>
           </div>
         </div>
       </div>
diff --git a/app/javascript/src/pages/Orders/index.ts b/app/javascript/src/pages/Orders/index.ts
index 7c2f26f..b62d13d 100644
--- a/app/javascript/src/pages/Orders/index.ts
+++ b/app/javascript/src/pages/Orders/index.ts
@@ -1,7 +1,9 @@
 import { Exchange } from "./Exchange";
 import { Stake } from "./Stake";
+import { Deposit } from "./Deposit";
 
 export const Orders = {
+  Deposit,
   Exchange,
   Stake,
 };