implement react-table to display commit data

apps/client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.9.0",
+    "@tanstack/react-table": "^8.10.7",
     "axios": "^1.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -28,8 +29,8 @@
     "eslint-plugin-tailwindcss": "^3.13.0",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
+    "types": "*",
     "typescript": "^5.2.2",
-    "vite": "^5.0.0",
-    "types": "*"
+    "vite": "^5.0.0"
   }
 }

apps/client/src/pages/Home/CommitTable/CommitTable.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable no-console */
+import { CommitListElement } from 'types'
+import { createColumnHelper, useReactTable, getCoreRowModel, flexRender, getPaginationRowModel } from '@tanstack/react-table'
+
+const columnHelper = createColumnHelper<CommitListElement>()
+const columns = [
+  columnHelper.accessor('sha', { header: () => <span>Id</span>, cell: props => <span>{props.getValue().substring(0, 7)}</span> }),
+  columnHelper.accessor('commit.author.email', { id: 'author', header: () => <span>Author</span>, cell: props => <span>{props.row.original.commit.author.name}</span> }),
+  columnHelper.display({ id: 'message', header: () => <span>Message</span>, cell: props => <span>{props.row.original.commit.message}</span> }),
+  columnHelper.accessor('commit.author.date', { id: 'date', header: () => <span>Date</span>, cell: props => <span>{new Date(props.getValue()).toLocaleDateString()}</span> })
+]
+export default function CommitTable({ commits }: { commits: CommitListElement[] }) {
+  const table = useReactTable({ data: commits, columns, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel() })
+  return (
+    <>
+      <table>
+        <thead>
+          {table.getHeaderGroups().map(hGroup => (
+            <tr key={hGroup.id}>
+              {hGroup.headers.map(header => (
+                <th key={header.id}>
+                  {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map(row => (
+            <tr key={row.id} onClick={() => console.log(row.getValue('sha'))} >
+              {row.getVisibleCells().map(cell => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div>
+        <button disabled={!table.getCanPreviousPage()} onClick={() => table.previousPage()}>previous</button>
+        <button disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}>next</button>
+        <label htmlFor='pageSize'>Size</label>
+        <select id="pageSize" name="page-size" onChange={(e) => table.setPageSize(parseInt(e.target.value))}>
+          <option defaultChecked value={10}>10</option>
+          <option value={20}>20</option>
+          <option value={50}>50</option>
+        </select>
+      </div>
+    </>
+  )
+}

apps/client/src/pages/Home/index.tsx

@@ -1,14 +1,15 @@
 import getCommits from '@/api/getCommits'
 import { useQuery } from '@tanstack/react-query'
-import { CommitList } from 'types'
+import { CommitListElement } from 'types'
+import CommitTable from './CommitTable/CommitTable'
 
 export default function Home() {
-  const commitQuery = useQuery<CommitList>({
+  const commitQuery = useQuery<CommitListElement[]>({
     queryKey: ['commits'],
     queryFn: getCommits
   })
 
   return (
-    <div>Home {commitQuery.isSuccess ? commitQuery.data[0].url : ''}</div>
+    <div>{commitQuery.isSuccess ? <CommitTable commits={commitQuery.data} /> : <h1>loadin</h1>}</div>
   )
 }

apps/server/src/commits/commit.entity.ts

@@ -30,6 +30,7 @@ export const basicCommitSchema = z.object({
 
 export const commitList = z.array(basicCommitSchema)
 
+export type CommitListElement = z.infer<typeof basicCommitSchema>
 export type CommitList = z.infer<typeof commitList>
 
 export const commitApiSchema = generateSchema(basicCommitSchema)

apps/server/src/commits/commits.service.ts

@@ -1,4 +1,4 @@
-import { HttpException, Injectable, InternalServerErrorException } from '@nestjs/common'
+import { Injectable, InternalServerErrorException } from '@nestjs/common'
 import { ConfigService } from '@nestjs/config'
 import { OctokitClient } from 'src/octokit/octokitClient'
 import { commitList } from './commit.entity'

packages/types/src/server.types.ts

@@ -1 +1 @@
-export type { CommitList } from '../../../apps/server/src/commits/commit.entity'
+export type { CommitList, CommitListElement } from '../../../apps/server/src/commits/commit.entity'

yarn.lock

@@ -1294,6 +1294,18 @@
   dependencies:
     "@tanstack/query-core" "5.8.7"
 
+"@tanstack/react-table@^8.10.7":
+  version "8.10.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.10.7.tgz#733f4bee8cf5aa19582f944dd0fd3224b21e8c94"
+  integrity sha512-bXhjA7xsTcsW8JPTTYlUg/FuBpn8MNjiEPhkNhIGCUR6iRQM2+WEco4OBpvDeVcR9SE+bmWLzdfiY7bCbCSVuA==
+  dependencies:
+    "@tanstack/table-core" "8.10.7"
+
+"@tanstack/[email protected]":
+  version "8.10.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.10.7.tgz#577e8a635048875de4c9d6d6a3c21d26ff9f9d08"
+  integrity sha512-KQk5OMg5OH6rmbHZxuNROvdI+hKDIUxANaHlV+dPlNN7ED3qYQ/WkpY2qlXww1SIdeMlkIhpN/2L00rof0fXFw==
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"