Add records list components and query hooks; implement pagination and data fetching logic

Author: manudous

src/modules/records/create/components/step-navigation.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@mui/material';
 import { useWithTheme } from '#core/theme/theme.hooks.ts';
-import { Steps, useCreateRecordContext } from '#modules/records/common/providers';
+import { Steps, useCreateRecordContext } from '#modules/records/core/providers';
 import * as innerClasses from './step-navigation.styles';
 
 export const StepNavigation: React.FC = () => {

src/modules/records/create/components/steps/budget-step.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, Formik } from 'formik';
 import { TextFieldForm } from '#common/components';
-import { useCreateRecordContext, Budget } from '#modules/records/common/providers';
+import { useCreateRecordContext, Budget } from '#modules/records/core/providers';
 import { StepNavigation } from '../step-navigation.component';
 import { budgetValidation } from '../validations';
 import * as classes from './steps.styles';

src/modules/records/create/components/steps/general-data-step.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, Formik } from 'formik';
 import { TextFieldForm } from '#common/components';
-import { GeneralData, useCreateRecordContext } from '#modules/records/common/providers';
+import { GeneralData, useCreateRecordContext } from '#modules/records/core/providers';
 import { generalDataValidation } from '../validations';
 import { StepNavigation } from '../step-navigation.component';
 import * as classes from './steps.styles';

src/modules/records/create/components/steps/temporality-step.component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, Formik } from 'formik';
 import { TextFieldForm } from '#common/components';
-import { useCreateRecordContext, Temporality } from '#modules/records/common/providers';
+import { useCreateRecordContext, Temporality } from '#modules/records/core/providers';
 import { StepNavigation } from '../step-navigation.component';
 import { temporalityValidation } from '../validations';
 import * as classes from './steps.styles';

src/modules/records/create/create-record.component.tsx

@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogTitle, Step, StepLabel, Stepper } from '@m
 import { useWithTheme } from '#core/theme';
 import { BudgetStep, GeneralDataStep, TemporalityStep } from './components';
 import * as innerClasses from './create-record.styles';
-import { useCreateRecordContext } from '../common/providers';
+import { useCreateRecordContext } from '../core/providers';
 
 export const CreateRecord: React.FC = () => {
   const { activeStep, isOpen, onCancel } = useCreateRecordContext();

src/modules/records/list/components/index.ts

@@ -0,0 +1 @@
+export * from './table.component';

src/modules/records/list/components/table.component.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useWithTheme } from '#core/theme';
+import { Pagination, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { Record } from '../records.vm';
+import * as innerClasses from './table.styles';
+
+interface Props {
+  columns: ColumnDef<Record>[];
+  recordCollection: Record[];
+  totalItems: number;
+  currentPage: number;
+  onPageChange: (event: React.ChangeEvent<unknown>, page: number) => void;
+}
+
+export const TableComponent: React.FC<Props> = props => {
+  const { columns, recordCollection: data, totalItems, currentPage, onPageChange } = props;
+  const classes = useWithTheme(innerClasses);
+  const tableInstance = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    rowCount: totalItems,
+  });
+
+  const { getRowModel, getHeaderGroups, getPageCount } = tableInstance;
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table}>
+        <TableHead>
+          {getHeaderGroups().map(headerGroup => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <TableCell key={header.id}>{flexRender(header.column.columnDef.header, header.getContext())}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableHead>
+        <TableBody>
+          {getRowModel().rows.map(row => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map(cell => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Pagination
+        count={getPageCount()}
+        page={currentPage + 1}
+        onChange={onPageChange}
+        className={classes.pagination}
+      />
+    </TableContainer>
+  );
+};

src/modules/records/list/components/table.styles.ts

@@ -0,0 +1,11 @@
+import { css } from '@emotion/css';
+
+export const table = css`
+  min-width: 1200px;
+`;
+
+export const pagination = css`
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+`;

src/modules/records/list/records.columns.tsx

@@ -0,0 +1,37 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Link } from '@tanstack/react-router';
+import { Chip, Box } from '@mui/material';
+import { Edit as EditIcon, Delete as DeleteIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
+import { useWithTheme } from '#core/theme';
+import { Record } from './records.vm';
+import * as innerClasses from './records.styles';
+
+export const useColumns = (): ColumnDef<Record>[] => {
+  const classes = useWithTheme(innerClasses);
+
+  return [
+    { accessorKey: 'id', header: 'idv' },
+    { accessorKey: 'clase', header: 'Clase', cell: ({ row }) => <Chip label={row.original.clase} /> },
+    { accessorKey: 'titulo', header: 'Título' },
+    {
+      accessorKey: 'adjudicataria',
+      header: 'Adjudicataria',
+    },
+    { accessorKey: 'estado', header: 'Estado', cell: ({ row }) => <Chip label={row.original.estado} /> },
+    {
+      accessorKey: 'commands',
+      header: 'Comandos',
+      cell: ({ row }) => (
+        <Box display="flex" alignItems="center" gap={2}>
+          <Link to={`/records/${row.original.id}`} className={classes.link}>
+            <VisibilityIcon />
+          </Link>
+          <Link to={`/edit-record/${row.original.id}`} className={classes.link}>
+            <EditIcon />
+          </Link>
+          <DeleteIcon />
+        </Box>
+      ),
+    },
+  ];
+};

src/modules/records/list/records.pod.tsx

@@ -1,22 +1,35 @@
 import React from 'react';
-import { NavigationButton } from '#common/components';
+import { Button, Typography } from '@mui/material';
+import { Spinner } from '#common/components';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
 import { useCreateRecordContext } from '#modules/records/core/providers';
-import { Button } from '@mui/material';
+import { usePagination } from './use-pagination-hook';
+import { TableComponent } from './components';
+import { useColumns } from './records.columns';
 import { CreateRecordPod } from '../create';
+import * as innerClasses from './records.styles';
 
 export const RecordsPod: React.FC = () => {
+  const { recordCollection, currentPage, totalPages, isLoading, onPageChange } = usePagination();
   const { onOpen } = useCreateRecordContext();
+  const classes = useWithTheme(innerClasses);
+  const columns = useColumns();
+
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <Button variant="contained" color="primary" onClick={onOpen}>
-        Crear expediente
-      </Button>
-      <NavigationButton
-        text="Editar expediente"
-        path="/edit-record/$id"
-        params={{
-          id: '123456',
-        }}
+    <div className={classes.root}>
+      <Spinner isSpinnerShowing={isLoading} />
+      <div className={classes.header}>
+        <Typography variant="h4">Expedientes</Typography>
+        <Button variant="contained" color="primary" onClick={onOpen}>
+          Nuevo expediente
+        </Button>
+      </div>
+      <TableComponent
+        columns={columns}
+        recordCollection={recordCollection.data}
+        totalItems={totalPages}
+        currentPage={currentPage}
+        onPageChange={onPageChange}
       />
       <CreateRecordPod />
     </div>

src/modules/records/list/records.query.hook.ts

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { CollectionQuery, createEmptyCollectionQuery } from '#common/models';
+import { getRecordsRepository } from './records.repository';
+import { recordsQueryKeys } from '#modules/records/records-keys.ts';
+import { RecordQueryFilter, Record } from './records.vm';
+
+interface UseRecordsQueryResult {
+  recordCollection: CollectionQuery<Record>;
+  isLoading: boolean;
+}
+
+export const useRecordsQuery = (recordFilter: RecordQueryFilter): UseRecordsQueryResult => {
+  const { page, pageSize } = recordFilter;
+
+  const { data: recordCollection = createEmptyCollectionQuery(), isLoading } = useQuery({
+    queryKey: recordsQueryKeys.recordCollection(page, pageSize),
+    queryFn: () => getRecordsRepository(),
+  });
+
+  return {
+    recordCollection,
+    isLoading,
+  };
+};

src/modules/records/list/records.repository.ts

@@ -0,0 +1,12 @@
+import { CollectionQuery } from '#common/models';
+import { Record } from './records.vm';
+
+export const getRecordsRepository = async (): Promise<CollectionQuery<Record>> => ({
+  data: [
+    { id: '1', clase: 'Clase A', titulo: 'Título A', adjudicataria: 'Empresa A', estado: 'Activo' },
+    { id: '2', clase: 'Clase B', titulo: 'Título 2', adjudicataria: 'Empresa B', estado: 'Pendiente' },
+  ],
+  pagination: {
+    totalPages: 1,
+  },
+});

src/modules/records/list/records.styles.ts

@@ -0,0 +1,22 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const root = css`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+`;
+
+export const header = (theme: Theme) => css`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 ${theme.spacing(2)};
+`;
+
+export const link = (theme: Theme) => css`
+  color: ${theme.palette.common.black};
+  text-decoration: none;
+  cursor: pointer;
+`;

src/modules/records/list/records.vm.ts

@@ -0,0 +1,20 @@
+export interface Record {
+  id: string;
+  clase: string;
+  titulo: string;
+  adjudicataria: string;
+  estado: string;
+}
+
+export const createEmptyRecord = (): Record => ({
+  id: '',
+  clase: '',
+  titulo: '',
+  adjudicataria: '',
+  estado: '',
+});
+
+export interface RecordQueryFilter {
+  page: number;
+  pageSize: number;
+}

src/modules/records/list/use-pagination-hook.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useRecordsQuery } from './records.query.hook';
+
+export const usePagination = (initialPage: number = 0, pageSize: number = 10) => {
+  const [currentPage, setCurrentPage] = React.useState(initialPage);
+  const { recordCollection, isLoading } = useRecordsQuery({ page: currentPage, pageSize });
+
+  const handleChangePage = (_: React.ChangeEvent<unknown>, newPage: number) => setCurrentPage(newPage - 1);
+
+  return {
+    recordCollection,
+    currentPage,
+    totalPages: recordCollection.pagination.totalPages,
+    isLoading,
+    onPageChange: handleChangePage,
+  };
+};

src/modules/records/records-keys.ts

@@ -0,0 +1,4 @@
+export const recordsQueryKeys = {
+  all: ['records'],
+  recordCollection: (page?: number, pageSize?: number) => ['records', page, pageSize],
+};

src/scenes/_auth/records/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { CreateRecordProvider } from '#modules/records/common/providers';
+import { CreateRecordProvider } from '#modules/records/core/providers';
 import { RecordsPod } from '#modules/records/list';
 
 export const Route = createFileRoute('/_auth/records/')({