Merge pull request #4 from SantiagoJavierRubio/dev-client

Implement data display on client app

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/hooks/useDebounce.tsx

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react'
+
+export default function useDebounce<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+  return debouncedValue
+}

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

@@ -0,0 +1,100 @@
+/* eslint-disable no-console */
+import { ChangeEvent, useState } from 'react'
+import { CommitListElement } from 'types'
+import {
+  createColumnHelper,
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  type SortingState
+} from '@tanstack/react-table'
+
+import useDebounce from '@/hooks/useDebounce'
+
+const columnHelper = createColumnHelper<CommitListElement>()
+const columns = [
+  columnHelper.accessor('sha', { header: () => <span>Id</span>, cell: props => <span>{props.getValue().substring(0, 7)}</span> }),
+  columnHelper.group({
+    id: 'author',
+    columns: [
+      columnHelper.display({ id: 'avatar', cell: props => <img src={props.row.original.author.avatar_url} alt={`${props.row.original.commit.author.name}'s avatar`} className='aspect-square rounded-full w-6'/> }),
+      columnHelper.accessor('commit.author.name', { id: 'name', header: () => <span>Author</span>, cell: props => <span>{props.getValue()}</span> }),
+      columnHelper.accessor('commit.author.email', { id: 'email', header: () => null, cell: () => null })
+    ]
+  }),
+  columnHelper.accessor('commit.message', { id: 'message', enableSorting: false, 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 [sorting, setSorting] = useState<SortingState>([])
+  const [filtering, setFiltering] = useState<string>('')
+
+  const filter = useDebounce(filtering, 250)
+
+  const table = useReactTable({
+    data: commits,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      globalFilter: filter
+    },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setFiltering
+  })
+
+  const handleSortInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setFiltering(e.target.value)
+  }
+
+  return (
+    <>
+    <input type="text" name="filter" onChange={handleSortInput} value={filtering} />
+    <p>{table.getState().pagination.pageIndex + 1} of {table.getPageCount()}</p>
+      <table>
+        <thead>
+          {table.getHeaderGroups().map(hGroup => (
+            <tr key={hGroup.id}>
+              {hGroup.headers.map(header => (
+                <th key={header.id}>
+                  {header.isPlaceholder ? null : (
+                    <div className={header.column.getCanSort() ? 'cursor-pointer select-none' : 'cursor-default'} onClick={header.column.getToggleSortingHandler()}>
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </div>
+                  )}
+                </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"