From a40d7703a7c1573024aeade5daf902f3ad96e9ec Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Fri, 15 Jul 2022 22:43:59 +0200
Subject: [PATCH] Added New Responsive table and data

---
 .../components/elements/Table-Responsive.tsx  | 78 +++++++++++++++++++
 packages/web/package.json                     |  1 +
 packages/web/pages/settings/api.tsx           | 27 +++++--
 3 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/components/elements/Table-Responsive.tsx

diff --git a/packages/web/components/elements/Table-Responsive.tsx b/packages/web/components/elements/Table-Responsive.tsx
new file mode 100644
index 000000000..f029e54e6
--- /dev/null
+++ b/packages/web/components/elements/Table-Responsive.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+import { styled } from '../tokens/stitches.config'
+import { Button } from './Button'
+import { Trash } from 'phosphor-react'
+import { isDarkTheme } from '../../lib/themeUpdater'
+
+interface TableProps {
+  heading: string
+  infoLink?: string
+  onAdd?: () => void
+  headers: string[]
+  rows: Map<string, Record<string, any>>
+  onDelete?: (id: string) => void
+  onEdit?: (obj: any) => void
+}
+
+const IconButton = styled(Button, {
+  variants: {
+    style: {
+      ctaWhite: {
+        color: 'red',
+        padding: '10px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid $grayBorder',
+        boxSizing: 'border-box',
+        borderRadius: 6,
+        width: 40,
+        height: 40,
+      },
+    },
+  },
+})
+
+export default function TableR(props: TableProps): JSX.Element {
+  const { headers } = props
+  const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
+  console.log(props.rows)
+  return (
+    <Table>
+      <Thead>
+        <Tr>
+          {headers.map((header: string, index: number) => (
+            <Th key={index}>
+              {header}
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {Array.from(props.rows.keys()).map((key, index) => (
+          <Tr key={index}>
+            {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+              <Td key={index}>{cell}</Td>
+            ))}
+
+            {props.onDelete && (
+              <Td>
+                <IconButton
+                  style="ctaWhite"
+                  css={{ mr: '$1', background: '$labelButtonsBg' }}
+                  onClick={() => {
+                    props.onDelete && props.onDelete(key)
+                  }}
+                >
+                  <Trash size={16} color={iconColor} />
+                </IconButton>
+              </Td>
+            )}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  )
+}
diff --git a/packages/web/package.json b/packages/web/package.json
index 8d7aad7f2..cf0f6317f 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -43,6 +43,7 @@
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
+    "react-super-responsive-table": "^5.2.1",
     "react-topbar-progress-indicator": "^4.1.1",
     "react-twitter-widgets": "^1.10.0",
     "swr": "^1.0.1",
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 1060a24a8..83a408390 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -10,6 +10,8 @@ import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKe
 
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Table } from '../../components/elements/Table'
+import TableR from '../../components/elements/Table-Responsive'
+
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
@@ -57,9 +59,10 @@ export default function Api(): JSX.Element {
         usedAt: apiKey.usedAt
           ? new Date(apiKey.usedAt).toISOString()
           : 'Never used',
-        expiresAt: new Date(apiKey.expiresAt).getTime() != neverExpiresDate.getTime()
-          ? new Date(apiKey.expiresAt).toDateString()
-          : 'Never',
+        expiresAt:
+          new Date(apiKey.expiresAt).getTime() != neverExpiresDate.getTime()
+            ? new Date(apiKey.expiresAt).toDateString()
+            : 'Never',
       })
     )
     return rows
@@ -117,7 +120,7 @@ export default function Api(): JSX.Element {
               additionalDays = 365
               break
             case 'Never':
-              break;
+              break
           }
           const newExpires = additionalDays ? new Date() : neverExpiresDate
           if (additionalDays) {
@@ -126,7 +129,13 @@ export default function Api(): JSX.Element {
           setExpiresAt(newExpires)
         },
         type: 'select',
-        options: ['in 7 days', 'in 30 days', 'in 90 days', 'in 1 year', 'Never'],
+        options: [
+          'in 7 days',
+          'in 30 days',
+          'in 90 days',
+          'in 1 year',
+          'Never',
+        ],
         value: defaultExpiresAt,
       },
     ])
@@ -187,6 +196,14 @@ export default function Api(): JSX.Element {
           setAddModalOpen(true)
         }}
       />
+      
+      {/* TESTING NEW TABLE */}
+      <TableR
+        headers={headers}
+        heading={'API Keys1'}
+        rows={rows}
+        onDelete={setOnDeleteId}
+      />
     </PrimaryLayout>
   )
 }