employee registry added

[FAZ110]

No description provided.

[rrogalski]

Dobrze jakby skorzystać z komponentów shadcn, żeby te widoki były spójne, bo obecnie wyglądają inaczej:

Tutaj też pojawia się kolejny mankament własnej implementacji w postaci następującego buga: rozpoczęcie wyszukiwania w pasku sprawia że cały komponent ładuje się na nowo, tzn. nie tylko tabela z użytkownikami, ale również filtry i szukajka rysują się na nowo i przez to np. pole wyszukiwania traci focus.

Przydałoby się zmienić ten komponent data-table od shadcn u nas w projekcie, tak, żeby obsługiwał paginację prawidłowo - bo obecnie tego nie robi.

[rrogalski]

nie uważasz, że to jest trochę dziwne, żeby mieć dwa stany od paginacji?

propozycja z chatu, wygląda sensownie imo:

Wrzucamy stan paginacji do osobnego pliku:

import { useState } from "react"
import { PaginationState } from "@tanstack/react-table"

export interface DataTableControl {
  pagination: PaginationState
  onPaginationChange: React.Dispatch<React.SetStateAction<PaginationState>>
}

export function useDataTableControls(initialPageSize = 10): DataTableControl {
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: initialPageSize,
  })

  return {
    pagination,
    onPaginationChange: setPagination,
  }
}

Wiążemy zewnętrzny stan z data-table:

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  pageCount: number
  isLoading?: boolean
  control: DataTableControl // <--- Wstrzykujemy kontroler stanu
}

export function DataTable<TData, TValue>({
  columns,
  data,
  pageCount,
  isLoading,
  control,
}: DataTableProps<TData, TValue>) {
  
  const table = useReactTable({
    data,
    columns,
    pageCount,
    manualPagination: true,
    getCoreRowModel: getCoreRowModel(),
    // Łączymy stan TanStacka bezpośrednio z naszym zewnętrznym hookiem:
    state: {
      pagination: control.pagination,
    },
    onPaginationChange: control.onPaginationChange,
  })

Tak to łączymy:

import { useDataTableControls } from "./useDataTableControls"
import { useSearchUsers } from "./hooks/useSearchUsers"
import { DataTable } from "./DataTable"
import { columns } from "./columns"

export function UsersPage() {
  // 1. Inicjalizujesz kontroler tabeli
  const tableControl = useDataTableControls(10)

  // 2. Przekazujesz jego stan do swojego hooka z React Query
  const { data, isLoading } = useSearchUsers(tableControl.pagination)

  // 3. Renderujesz tabelę łącząc kropki
  return (
    <div className="p-8">
      <h1 className="text-xl font-bold mb-4">Użytkownicy</h1>
      
      <DataTable
        columns={columns}
        data={data?.items ?? []}
        pageCount={data?.totalPages ?? 0}
        isLoading={isLoading}
        control={tableControl} // <--- Wszystko spina się samo
      />
    </div>
  )
}

[rrogalski]

enum zamiast stringa

[rrogalski]

teraz można to zastąpic naszym hookiem który stworzyliśmy, bo robi dokładnie to samo, możemy to nazwać np backoffPagination i używać w momencie kiedy control nie zostało przekazane z zewnątrz

[rrogalski]

to jest juz niepotrzebne, a ten kod niżej się uprości w konsekwencji zmian zaproponowanych przeze mnie wyżej

[rrogalski]

można tą funkcję wrzucić do tego naszego hooka useDataTableControls bo z tym komponentem ona nie ma nic wspólnego

[rrogalski]

ogólnie to wartości puste reprezentujemy przez null, a nie undefined, ale to już szczegół

[rrogalski]

to || undefined jest dziwne, przecież debouncedSearch zawsze istnieje

[rrogalski]

może wrzućmy ten plik do folderu src/lib bo trochę nie pasuje obok komponentów ui