feat(SPV-960): Added renderInlineItem props, removed unused code

bitcoin-sv · Aug 22, 2024 · 2cf8e43 · 2cf8e43
1 parent 09a6b55
commit 2cf8e43
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 28 deletions.
diff --git a/src/components/ContactsTabContent/ContactsTabContent.tsx b/src/components/ContactsTabContent/ContactsTabContent.tsx
@@ -1,4 +1,17 @@
-import { Card, CardContent, CardHeader, CardTitle, contactsColumns, DataTable, NoRecordsText } from '@/components';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  ContactAcceptDialog,
+  ContactDeleteDialog,
+  ContactEditDialog,
+  ContactRejectDialog,
+  contactsColumns,
+  ContactStatus,
+  DataTable,
+  NoRecordsText,
+} from '@/components';
 import { ContactExtended } from '@/interfaces/contacts.ts';
 
 export interface ContactsTabContentProps {
@@ -13,7 +26,24 @@ export const ContactsTabContent = ({ contacts }: ContactsTabContentProps) => {
       </CardHeader>
       <CardContent className="mb-2">
         {contacts.length > 0 ? (
-          <DataTable columns={contactsColumns} data={contacts} />
+          <DataTable
+            columns={contactsColumns}
+            data={contacts}
+            renderInlineItem={(row) =>
+              row.getValue('status') === ContactStatus.Awaiting ? (
+                <div className="grid grid-cols-2 items-center w-fit gap-4 ">
+                  <ContactAcceptDialog row={row} />
+                  <ContactRejectDialog row={row} />
+                </div>
+              ) : null
+            }
+            renderItem={(row) => (
+              <>
+                <ContactEditDialog row={row} />
+                <ContactDeleteDialog row={row} />
+              </>
+            )}
+          />
         ) : (
           <NoRecordsText message="No Contacts to show." />
         )}

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
@@ -1,10 +1,5 @@
 import {
   Button,
-  ContactAcceptDialog,
-  ContactDeleteDialog,
-  ContactEditDialog,
-  ContactRejectDialog,
-  ContactStatus,
   DataTablePagination,
   DropdownMenu,
   DropdownMenuContent,
@@ -18,7 +13,6 @@ import {
   TableRow,
   ViewDialog,
 } from '@/components';
-import { isContact } from '@/utils';
 import { AccessKey, Contact, Destination, PaymailAddress, Tx, XPub } from '@bsv/spv-wallet-js-client';
 import {
   ColumnDef,
@@ -39,11 +33,17 @@ interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   renderItem?: (row: Row<TData>) => React.ReactNode;
+  renderInlineItem?: (row: Row<TData>) => React.ReactNode;
 }
 
 const initialSorting = { id: 'id', desc: false };
 
-export function DataTable<TData, TValue>({ columns, data, renderItem }: DataTableProps<TData, TValue>) {
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  renderItem,
+  renderInlineItem,
+}: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([initialSorting]);
 
   const table = useReactTable({
@@ -85,16 +85,17 @@ export function DataTable<TData, TValue>({ columns, data, renderItem }: DataTabl
                   <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                 ))}
                 <TableCell>
-                  {table.getColumn('status') && row.getValue('status') === ContactStatus.Awaiting ? (
-                    <div className="grid grid-cols-2 items-center w-fit gap-4 ">
-                      {isContact(row.original) && row.original.status === ContactStatus.Awaiting && (
-                        <>
-                          <ContactAcceptDialog row={row as Row<Contact>} />
-                          <ContactRejectDialog row={row as Row<Contact>} />
-                        </>
-                      )}
-                    </div>
-                  ) : null}
+                  {/*{table.getColumn('status') && row.getValue('status') === ContactStatus.Awaiting ? (*/}
+                  {/*  <div className="grid grid-cols-2 items-center w-fit gap-4 ">*/}
+                  {/*    {isContact(row.original) && row.original.status === ContactStatus.Awaiting && (*/}
+                  {/*      <>*/}
+                  {/*        <ContactAcceptDialog row={row as Row<Contact>} />*/}
+                  {/*        <ContactRejectDialog row={row as Row<Contact>} />*/}
+                  {/*      </>*/}
+                  {/*    )}*/}
+                  {/*  </div>*/}
+                  {/*) : null}*/}
+                  {renderInlineItem ? renderInlineItem(row) : null}
                 </TableCell>
                 <TableCell>
                   <DropdownMenu>
@@ -106,10 +107,7 @@ export function DataTable<TData, TValue>({ columns, data, renderItem }: DataTabl
                     <DropdownMenuContent align="end">
                       <DropdownMenuLabel>Actions</DropdownMenuLabel>
                       <ViewDialog row={row as Row<RowType>} />
-                      {/*{renderItem ? renderItem(row as Row<RowType>) : null}*/}
                       {renderItem ? renderItem(row) : null}
-                      {isContact(row.original) && <ContactEditDialog row={row as Row<Contact>} />}
-                      {isContact(row.original) && <ContactDeleteDialog row={row as Row<Contact>} />}
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </TableCell>

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,7 +1,6 @@
 export * from './accessKeysQueryOptions.tsx';
 export * from './createClient.ts';
 export * from './errorWrapper.ts';
-export * from './isContact.ts';
 export * from './prepareXPubFilters.ts';
 export * from './getShortXprv.ts';
 export * from './xPubQueryOptions.tsx';

diff --git a/src/utils/isContact.ts b/src/utils/isContact.ts