Untitled

import { useGetPostsListQuery } from '@/features/posts/postApi';
import { useEffect, useState} from 'react';
import { Link } from 'react-router'
import type { ColumnDef, Post } from '@/_types_/table';
import CustomTable from '@/components/table';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Skeleton } from '@/components/ui/skeleton';
import type { ColumnDef, RowData } from "@/_types_/table";


interface CustomTableProps<T extends RowData> {
  rows: T[];
  columns: (data: T) => ColumnDef[];
  loading: boolean;
}

const CustomTable = <T extends RowData>({ rows, columns, loading }: CustomTableProps<T>) => {
  return (
    <>
      <Table className='table-fixed w-full'>
        <TableHeader>
          <TableRow>
            {
              columns(rows[0]).map((def, index) => (
                <TableHead key={index} className='text-center border border-solid border-indigo-700 bg-indigo-400'>
                  {def.header}
                </TableHead>
              ))
            }
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows?.map((row) => {
            return <TableRow key={row.id}>
              {
                columns(row).map((def, index) => (
                  <TableCell key={index} className='border border-solid border-indigo-700 bg-indigo-50 truncate whitespace-nowrap overflow-hidden text-ellipsis h-[37px]'>
                    {loading ? <Skeleton className='h-5 w-full' /> : def.cell}
                  </TableCell>
                ))
              }
            </TableRow>
          })}
        </TableBody>
      </Table>
      {/* <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious href="#" />
            </PaginationItem>
            {Array(data?.length).fill(0).reduce((a, _, i) => [...a, i], []).map((_: number, index: number) => {
              return (
                <PaginationItem key={index} onClick={(e) => {
                  setPagination(prevState => ({ ...prevState, page: index + 1 }))
                }}>
                  <PaginationLink href="#" isActive>
                    {index + 1}
                  </PaginationLink>
                </PaginationItem>
              )
            })}
            <PaginationItem>
              <PaginationNext href="#" />
            </PaginationItem>
          </PaginationContent>
        </Pagination> */}
    </>
  )
}

const PostsList = () => {
  const [pagination, setPagination] = useState<{ page: number, per_page: number }>({ page: 1, per_page: 10 })
  const { data, isLoading, refetch, isFetching } = useGetPostsListQuery(pagination);

  useEffect(() => {
    refetch();
  }, [pagination])

  const tableDef = (data: Post): ColumnDef[] => [
    {
      header: 'User ID',
      accessor: 'userId',
      cell: data?.userId
    },
    {
      header: 'ID',
      accessor: 'id',
      cell: data?.id
    },
    {
      header: 'Title',
      accessor: 'title',
      cell: data?.title
    },
    {
      header: 'Body',
      accessor: 'body',
      cell: data?.body
    },
    {
      header: '',
      accessor: 'actions',
      cell: <Link className='text-indigo-500 font-bold hover:text-indigo-300 transition-colors' to={`/post/${data?.id}/comments`}> Read Comments </Link>
    }
  ]

  return (
    <>
      <nav className='bg-blue-400'>
        <Link to={"/"}>Home</Link>
        <Link to={"/posts"}>Posts</Link>
        <Link to={"/comments"}>Comments</Link>
        <Link to={"/albums"}>Albums</Link>
      </nav>
      <CustomTable
        rows={data || []}
        columns={tableDef}
        loading={isLoading || isFetching} 
      />
    </>
  )
}

export default PostsList