chore: wip - display group

Author: PatrickDinh

src/App.routes.tsx

@@ -4,6 +4,7 @@ import { Urls } from './routes/urls'
 import { evalTemplates } from './routes/templated-route'
 import { TransactionPage } from './features/transactions/pages/transaction-page'
 import { ExplorePage } from './features/explore/pages/explore-page'
+import { GroupPage } from './features/transactions/pages/group-page'
 
 export const routes = evalTemplates([
   {
@@ -33,6 +34,10 @@ export const routes = evalTemplates([
             template: Urls.Explore.Transaction.ById,
             element: <TransactionPage />,
           },
+          {
+            template: Urls.Explore.Group.ById,
+            element: <GroupPage />,
+          },
         ],
       },
       {

src/features/explore/pages/explore-page.tsx

@@ -1,15 +1,19 @@
+import { cn } from '@/features/common/utils'
 import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
 
 export function ExplorePage() {
   return (
-    <div>
+    <div className={cn('grid')}>
       <TemplatedNavLink
         urlTemplate={Urls.Explore.Transaction.ById}
         urlParams={{ transactionId: 'QOOBRVQMX4HW5QZ2EGLQDQCQTKRF3UP3JKDGKYPCXMI6AVV35KQA' }}
       >
         View sample transaction
       </TemplatedNavLink>
+      <TemplatedNavLink urlTemplate={Urls.Explore.Group.ById} urlParams={{ groupId: 'foo' }}>
+        View sample group
+      </TemplatedNavLink>
     </div>
   )
 }

src/features/transactions/pages/group-page.tsx

@@ -0,0 +1,95 @@
+import { cn } from '@/features/common/utils'
+
+type TransactionTrProps = {
+  transaction: Transaction
+  cellHeight?: number
+  lineWidth?: number
+  hasParent?: boolean
+  hasNextSibbling?: boolean
+  hasChildren?: boolean
+}
+function TransactionTr({ transaction, hasParent = false, hasNextSibbling = false, hasChildren = false }: TransactionTrProps) {
+  return (
+    <tr>
+      <td className="p-0">
+        <div className={cn(`relative h-10 p-0 flex items-center`, 'px-0')}>
+          {hasParent && (
+            <div className={cn('w-8', `border-primary border-l-2 border-b-2 rounded-bl-lg`, `h-[50%]`, `absolute top-0 left-0`)}></div>
+          )}
+          <div className={cn('inline ml-8')}>{transaction.name}</div>
+          {hasParent && hasNextSibbling && (
+            <div className={cn('w-8', 'border-primary border-l-2', 'h-[22px]', 'absolute top-[18px] left-0')}></div>
+          )}
+          {hasChildren && !hasParent && (
+            <div
+              className={cn(
+                'w-8',
+                `border-primary border-l-2 border-t-2 rounded-tl-lg`,
+                `h-[calc(50%+2px)]`,
+                `absolute top-[calc(50%-2px)] left-0`
+              )}
+            ></div>
+          )}
+          {hasChildren && hasParent && (
+            <div
+              className={cn('w-2 ml-4', 'border-primary border-l-2 border-t-2 rounded-tl-lg', 'h-[22px]', 'absolute top-[18px] left-0')}
+            ></div>
+          )}
+        </div>
+        {hasChildren && (
+          <div className={cn('relative', hasParent ? 'pl-4' : '')}>
+            {hasNextSibbling && <div className={cn(`border-primary border-l-2`, `h-full`, 'absolute top-0 left-0')}></div>}
+            <table>
+              {transaction.transactions?.map((childTransaction, index, arr) => (
+                <TransactionTr
+                  transaction={childTransaction}
+                  hasChildren={childTransaction.transactions && childTransaction.transactions.length > 0}
+                  hasParent={true}
+                  hasNextSibbling={index < arr.length - 1}
+                />
+              ))}
+            </table>
+          </div>
+        )}
+      </td>
+      <td></td>
+    </tr>
+  )
+}
+
+export function GroupPage() {
+  const group: Transaction = {
+    name: '',
+    transactions: [
+      { name: '7VSN...' },
+      {
+        name: 'NDQX...',
+        transactions: [
+          { name: 'Inner 1' },
+          { name: 'Inner 2', transactions: [{ name: 'Inner 3' }, { name: 'Inner 5' }] },
+          { name: 'Inner 9' },
+          { name: 'Inner 4', transactions: [{ name: 'Inner 6' }, { name: 'Inner 7' }] },
+          { name: 'Inner 8' },
+        ],
+      },
+    ],
+  }
+
+  return (
+    <table>
+      {group.transactions?.map((transaction, index, arr) => (
+        <TransactionTr
+          transaction={transaction}
+          hasChildren={transaction.transactions && transaction.transactions.length > 0}
+          hasParent={false}
+          hasNextSibbling={index < arr.length - 1}
+        />
+      ))}
+    </table>
+  )
+}
+
+export type Transaction = {
+  name: string
+  transactions?: Transaction[]
+}

src/routes/urls.ts

@@ -4,6 +4,7 @@ export type UrlParameterValue = `${string}:${string}`
 
 export const UrlParams = {
   TransactionId: 'transactionId:string',
+  GroupId: 'groupId:string',
 } as const satisfies Record<string, UrlParameterValue>
 
 export const Urls = {
@@ -12,6 +13,9 @@ export const Urls = {
     Transaction: UrlTemplate`/transaction`.extend({
       ById: UrlTemplate`/${UrlParams.TransactionId}`,
     }),
+    Group: UrlTemplate`/group`.extend({
+      ById: UrlTemplate`/${UrlParams.GroupId}`,
+    }),
   }),
   AppStudio: UrlTemplate`/app-studio`,
 }