create table creator to get rid of type error

AnthonyMarin · AnthonyMarin · commit 3534e12b01a9 · 2025-06-10T18:42:08.000-07:00
diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts b/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts
@@ -1,26 +1,8 @@
 import styled from 'styled-components';
 import Card from 'antd/lib/card/Card';
-import Table from 'antd/es/table';
+import { Table, TableProps } from 'antd';
 import { Input } from 'antd';
 import { BaseCol } from '../common/BaseCol/BaseCol';
-export const TableRoot = styled(Table)`
-  border-radius: 12px;
-
-  & .ant-table-thead .ant-table-cell {
-    background-color: var(--secondary-background-color);
-  }
-
-  .ant-table-tbody {
-    background-color: var(--layout-sider-bg-color);
-  }
-  .ant-table-placeholder .ant-table-cell {
-    background-color: var(--layout-sider-bg-color);
-    transition: none;
-  }
-  .ant-table-placeholder .ant-table-cell:hover {
-    background-color: var(--layout-sider-bg-color);
-  }
-`;
 export const InputRoot = styled(Input)`
   background-color: var(--layout-sider-bg-color);
   & input {
diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.tsx b/src/components/blocked-pubkeys/BlockedPubkeys.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import {  Space, Typography } from 'antd';
+import React, { useState, FC } from 'react';
+import { Space, Typography, Table, TableProps } from 'antd';
 import useBlockedPubkeys from '@app/hooks/useBlockedPubkeys';
 import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
 import { ReloadOutlined } from '@ant-design/icons';
@@ -8,20 +8,37 @@ import { FlaggedPubkeysTable } from './components/FlaggedPubkeysTable';
 import { BlockPubkeyForm } from './components/BlockPubkeyForm';
 import { useModerationStats } from '@app/hooks/useModerationStats';
 import { LockFilled } from '@ant-design/icons';
+import styled from 'styled-components';
 import * as S from './BlockedPubkeys.styles';
 
 const { Title, Text } = Typography;
 
+export function createStyledTable<T extends object = any>() {
+  const GenericTable: FC<TableProps<T>> = (props) => <Table {...props} />;
+
+  return styled(GenericTable)`
+    border-radius: 12px;
+
+    & .ant-table-thead .ant-table-cell {
+      background-color: var(--secondary-background-color);
+    }
+
+    .ant-table-tbody {
+      background-color: var(--layout-sider-bg-color);
+    }
+    .ant-table-placeholder .ant-table-cell {
+      background-color: var(--layout-sider-bg-color);
+      transition: none;
+    }
+    .ant-table-placeholder .ant-table-cell:hover {
+      background-color: var(--layout-sider-bg-color);
+    }
+  `;
+}
 export const BlockedPubkeys: React.FC = () => {
   const [activeView, setActiveView] = useState<'blocked' | 'flagged'>('blocked');
-  const {
-    blockedPubkeys,
-    count,
-    loading,
-    fetchBlockedPubkeys,
-    addBlockedPubkey,
-    removeBlockedPubkey,
-  } = useBlockedPubkeys();
+  const { blockedPubkeys, count, loading, fetchBlockedPubkeys, addBlockedPubkey, removeBlockedPubkey } =
+    useBlockedPubkeys();
   const { fetchStats, loading: statsLoading } = useModerationStats();
 
   // Refresh all data
@@ -31,56 +48,38 @@ export const BlockedPubkeys: React.FC = () => {
   };
 
   return (
-    <S.BaseColRoot >
+    <S.BaseColRoot>
       <S.CardRoot>
         <Space direction="vertical" size="large" style={{ width: '100%' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <div>
-              <Title level={3}>Access Control <LockFilled /></Title>
-              <Text style={{color:"var(--text-light-color)"}}>
+              <Title level={3}>
+                Access Control <LockFilled />
+              </Title>
+              <Text style={{ color: 'var(--text-light-color)' }}>
                 Control access to your relay and manage flagged pubkeys
               </Text>
             </div>
-            <BaseButton
-              icon={<ReloadOutlined />}
-              onClick={handleRefresh}
-              loading={loading || statsLoading}
-            >
+            <BaseButton icon={<ReloadOutlined />} onClick={handleRefresh} loading={loading || statsLoading}>
               Refresh
             </BaseButton>
           </div>
-      
-          {activeView === 'blocked' && (
-            <BlockPubkeyForm onSubmit={addBlockedPubkey} disabled={loading} />
-          )}
-      
+
+          {activeView === 'blocked' && <BlockPubkeyForm onSubmit={addBlockedPubkey} disabled={loading} />}
+
           <S.NavContainer>
-            <S.NavLink
-              active={activeView === 'blocked'}
-              onClick={() => setActiveView('blocked')}
-            >
+            <S.NavLink active={activeView === 'blocked'} onClick={() => setActiveView('blocked')}>
               Blocked Access
             </S.NavLink>
-            <S.NavLink
-              active={activeView === 'flagged'}
-              onClick={() => setActiveView('flagged')}
-            >
+            <S.NavLink active={activeView === 'flagged'} onClick={() => setActiveView('flagged')}>
               Flagged Access
             </S.NavLink>
           </S.NavContainer>
-      
+
           {activeView === 'blocked' ? (
-            <BlockedPubkeysTable
-              blockedPubkeys={blockedPubkeys}
-              loading={loading}
-              onUnblock={removeBlockedPubkey}
-            />
+            <BlockedPubkeysTable blockedPubkeys={blockedPubkeys} loading={loading} onUnblock={removeBlockedPubkey} />
           ) : (
-            <FlaggedPubkeysTable
-              blockedPubkeys={blockedPubkeys}
-              onBlock={addBlockedPubkey}
-              disabled={loading}
-            />
+            <FlaggedPubkeysTable blockedPubkeys={blockedPubkeys} onBlock={addBlockedPubkey} disabled={loading} />
           )}
         </Space>
       </S.CardRoot>
diff --git a/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx b/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx
@@ -1,28 +1,25 @@
 import React, { useState } from 'react';
-import { Table, Input, Button, Modal, Tooltip, Space, Badge, Spin } from 'antd';
-import { DeleteOutlined, CopyOutlined, SearchOutlined, FlagOutlined } from '@ant-design/icons';
+import { Button, Modal, Tooltip, Space, Spin, TableColumnsType, Table } from 'antd';
+import { DeleteOutlined, CopyOutlined, SearchOutlined } from '@ant-design/icons';
 import { BlockedPubkey } from '@app/api/blockedPubkeys.api';
 import { useModerationStats } from '@app/hooks/useModerationStats';
 import * as S from '../BlockedPubkeys.styles';
+import { createStyledTable } from '../BlockedPubkeys';
 
 interface BlockedPubkeysTableProps {
   blockedPubkeys: BlockedPubkey[];
   loading: boolean;
   onUnblock: (pubkey: string) => Promise<void>;
 }
-
-export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
-  blockedPubkeys,
-  loading,
-  onUnblock,
-}) => {
+const TableRoot = createStyledTable<BlockedPubkey>();
+export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({ blockedPubkeys, loading, onUnblock }) => {
   const [searchText, setSearchText] = useState('');
   const [confirmModalVisible, setConfirmModalVisible] = useState(false);
   const [currentPubkey, setCurrentPubkey] = useState('');
   const { getFlagCountsForPubkeys, loading: statsLoading } = useModerationStats();
-  
+
   // Get flag counts for all pubkeys in the table
-  const pubkeyFlagCounts = getFlagCountsForPubkeys(blockedPubkeys.map(bp => bp.pubkey));
+  const pubkeyFlagCounts = getFlagCountsForPubkeys(blockedPubkeys.map((bp) => bp.pubkey));
 
   // Handle pubkey copy
   const handleCopy = (pubkey: string) => {
@@ -43,9 +40,10 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
   };
 
   // Filter pubkeys based on search
-  const filteredPubkeys = blockedPubkeys.filter(item => 
-    item.pubkey.toLowerCase().includes(searchText.toLowerCase()) ||
-    (item.reason && item.reason.toLowerCase().includes(searchText.toLowerCase()))
+  const filteredPubkeys = blockedPubkeys.filter(
+    (item) =>
+      item.pubkey.toLowerCase().includes(searchText.toLowerCase()) ||
+      (item.reason && item.reason.toLowerCase().includes(searchText.toLowerCase())),
   );
 
   // Format pubkey for display (truncate)
@@ -56,7 +54,7 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
     return `${cleanPubkey.substring(0, 6)}...${cleanPubkey.substring(cleanPubkey.length - 6)}`;
   };
 
-  const columns = [
+  const columns: TableColumnsType<BlockedPubkey> = [
     {
       title: 'Pubkey',
       dataIndex: 'pubkey',
@@ -65,12 +63,7 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
         <Space>
           {formatPubkey(pubkey)}
           <Tooltip title="Copy full pubkey">
-            <Button 
-              icon={<CopyOutlined />} 
-              type="text" 
-              size="small" 
-              onClick={() => handleCopy(pubkey)}
-            />
+            <Button icon={<CopyOutlined />} type="text" size="small" onClick={() => handleCopy(pubkey)} />
           </Tooltip>
         </Space>
       ),
@@ -96,7 +89,7 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
             {statsLoading ? (
               <Spin size="small" />
             ) : (
-              <S.CircularBadge 
+              <S.CircularBadge
                 color={count > 10 ? 'var(--error-color)' : count > 5 ? 'var(--warning-color)' : 'var(--primary-color)'}
               >
                 {count}
@@ -105,19 +98,15 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
           </S.FlagCountContainer>
         );
       },
-      sorter: (a: BlockedPubkey, b: BlockedPubkey) => 
+      sorter: (a: BlockedPubkey, b: BlockedPubkey) =>
         (pubkeyFlagCounts[a.pubkey] || 0) - (pubkeyFlagCounts[b.pubkey] || 0),
       defaultSortOrder: 'descend' as const,
     },
     {
       title: 'Actions',
       key: 'actions',
       render: (_: any, record: BlockedPubkey) => (
-        <Button
-          danger
-          icon={<DeleteOutlined />}
-          onClick={() => showConfirmModal(record.pubkey)}
-        >
+        <Button danger icon={<DeleteOutlined />} onClick={() => showConfirmModal(record.pubkey)}>
           Unblock
         </Button>
       ),
@@ -130,14 +119,14 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
         <S.InputRoot
           placeholder="Search pubkeys or reasons"
           value={searchText}
-          onChange={e => setSearchText(e.target.value)}
+          onChange={(e) => setSearchText(e.target.value)}
           prefix={<SearchOutlined />}
           allowClear
         />
       </div>
 
       <S.TableContainer>
-        <S.TableRoot
+        <TableRoot
           dataSource={filteredPubkeys}
           columns={columns}
           rowKey="pubkey"
@@ -160,7 +149,9 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
         okButtonProps={{ danger: true }}
       >
         <p>Are you sure you want to unblock this pubkey?</p>
-        <p><strong>{currentPubkey.replace('blocked_pubkey:', '')}</strong></p>
+        <p>
+          <strong>{currentPubkey.replace('blocked_pubkey:', '')}</strong>
+        </p>
       </Modal>
     </>
   );
diff --git a/src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx b/src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx
