Skip to content

Commit

Permalink
feat: add shared models and reusable hooks for table state management…
Browse files Browse the repository at this point in the history
… and request params preparation
  • Loading branch information
pzmuda1 committed Mar 26, 2024
1 parent 9ba2df1 commit f4629c6
Show file tree
Hide file tree
Showing 18 changed files with 1,149 additions and 841 deletions.
1,264 changes: 825 additions & 439 deletions package-lock.json

Large diffs are not rendered by default.

16 changes: 10 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
"private": false,
"version": "1.0.0",
"type": "module",
"publishConfig": { "access": "public" },
"publishConfig": {
"access": "public"
},
"files": [
"*"
],
Expand All @@ -30,20 +32,22 @@
"dependencies": {
"@emotion/react": "11.11.1",
"@emotion/styled": "11.11.0",
"@mui/icons-material": "^5.14.7",
"@mui/material": "5.14.5",
"@mui/icons-material": "^5.15.14",
"@mui/material": "5.15.14",
"@mui/x-date-pickers": "^7.0.0",
"@tanstack/react-query": "^4.33.0",
"@tanstack/react-query-devtools": "^4.33.0",
"@tanstack/react-table": "^8.9.3",
"axios": "^1.5.0",
"material-react-table": "^2.12.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-hook-form": "^7.46.1",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.15.0",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"react-responsive-carousel": "^3.2.23"
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"@commitlint/cli": "17.7.1",
Expand All @@ -66,7 +70,7 @@
"eslint-config-prettier": "9.0.0",
"eslint-plugin-import": "2.28.1",
"eslint-plugin-prettier": "5.0.0",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react": "7.34.1",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-react-refresh": "0.4.3",
"eslint-plugin-storybook": "0.6.13",
Expand Down
156 changes: 11 additions & 145 deletions packages/components/dataGrid/Table.mock.ts
Original file line number Diff line number Diff line change
@@ -1,152 +1,18 @@
import { rest } from 'msw';
import { parse, stringify } from 'qs';
import { stringify } from 'qs';
import axios from 'axios';

import { DataGridRequestParams } from './types';
export type ExampleType = {
date: string;
id: string;
email: string;
amount: string;
status: 'success' | 'error';
firstName: string;
lastName: string;
};
export const exampleData: ExampleType[] = [
{
date: '2023-08-25',
id: '1001',
email: '[email protected]',
amount: '50.00',
status: 'success',
},
{
date: '2023-08-24',
id: '1002',
email: '[email protected]',
amount: '75.00',
status: 'error',
},
{
date: '2023-08-23',
id: '1003',
email: '[email protected]',
amount: '100.00',
status: 'success',
},
{
date: '2023-08-22',
id: '1004',
email: '[email protected]',
amount: '30.00',
status: 'error',
},
{
date: '2023-08-21',
id: '1005',
email: '[email protected]',
amount: '60.00',
status: 'success',
},
{
date: '2023-08-20',
id: '1006',
email: '[email protected]',
amount: '90.00',
status: 'success',
},
{
date: '2023-08-19',
id: '1007',
email: '[email protected]',
amount: '120.00',
status: 'error',
},
{
date: '2023-08-18',
id: '1008',
email: '[email protected]',
amount: '25.00',
status: 'success',
},
{
date: '2023-08-17',
id: '1009',
email: '[email protected]',
amount: '70.00',
status: 'error',
},
{
date: '2023-08-16',
id: '1010',
email: '[email protected]',
amount: '110.00',
status: 'success',
},
{
date: '2023-08-15',
id: '1011',
email: '[email protected]',
amount: '40.00',
status: 'success',
},
{
date: '2023-08-14',
id: '1012',
email: '[email protected]',
amount: '80.00',
status: 'error',
},
{
date: '2023-08-13',
id: '1013',
email: '[email protected]',
amount: '95.00',
status: 'success',
},
{
date: '2023-08-12',
id: '1014',
email: '[email protected]',
amount: '55.00',
status: 'error',
},
{
date: '2023-08-11',
id: '1015',
email: '[email protected]',
amount: '65.00',
status: 'success',
},
];
const mockedApiBaseUrl = 'https://table-api.com/api';
export const getDataMockHandler = rest.get(`${mockedApiBaseUrl}`, (req, res, ctx) => {
const params = parse(req.url.searchParams.toString());
const { page, size } = params;
const total = exampleData.length;
const sizeNumber = Number(size);
const pageNumber = Number(page);
const totalPages = Math.ceil(total / sizeNumber);
const pages = exampleData.reduce<ExampleType[][]>((accumulator, value, index) => {
const entryIndex = Math.floor(index / sizeNumber);
const page = accumulator[entryIndex] || (accumulator[entryIndex] = []);
page.push(value);
return accumulator;
}, []);
return res(
ctx.json({
page: pages[pageNumber],
meta: {
page: pageNumber,
size: sizeNumber,
total,
totalPages,
},
}),
);
});
interface GetDataMockArguments {
page: number;
size: number;
}
export const getDataMock = async ({ page, size }: GetDataMockArguments) => {
const queryParams = stringify({ page, size }, { addQueryPrefix: true });
const { data: response } = await axios.get(`${mockedApiBaseUrl}${queryParams}`);

const apiUrl = 'http://localhost:1337/api/example/users';

export const getDataMock = async (params: DataGridRequestParams) => {
const queryParams = stringify(params, { addQueryPrefix: true });
const { data: response } = await axios.get(`${apiUrl}${queryParams}`);
return response;
};
Loading

0 comments on commit f4629c6

Please sign in to comment.