Next.js Building a Car Trader App #5- Pagination with filters for the list of cars
![](https://learnreact.gitbook.io/~gitbook/image?url=https%3A%2F%2F589574163-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-MGMzApU_kEyI7nsYtZs%252F-MNxTuViveXsV5uYj7iE%252F-MNxXLaXVs0Iwu33oMTN%252FScreenshot_2.png%3Falt%3Dmedia%26token%3D799f09f0-e742-45e0-8fac-87556a5462d1&width=768&dpr=4&quality=100&sign=6581abb5&sv=2)
C:\Users\Administrator\Desktop\nextjs\pages\cars.tsx
import { Grid } from '@material-ui/core';
import { PaginationRenderItemParams } from '@material-ui/lab';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';
import { GetServerSideProps } from 'next';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ParsedUrlQuery } from 'querystring';
import Search from '.';
import { CarModel } from '../../api/Car';
import { getMakes, Make } from './database/getMakes';
import { getModels, Model } from './database/getModels';
import { getPaginatedCars } from './database/getPaginatedCars';
import { getAsString } from '../getAsString';
export interface CarsListProps {
makes: Make[];
models: Model[];
cars: CarModel[];
totalPages: number;
}
export default function CarsList({
makes,
models,
cars,
totalPages,
}: CarsListProps) {
const { query } = useRouter();
return (
<Grid container spacing={3}>
<Grid item xs={12} sm={5} md={3} lg={2}>
<Search singleColumn makes={makes} models={models} />
</Grid>
<Grid item xs={12} sm={7} md={9} lg={10}>
<pre style={{ fontSize: '3rem' }}>
<Pagination
page={parseInt(getAsString(query.page) || '1')}
count={totalPages}
renderItem={(item) => (
<PaginationItem
component={MaterialUiLink}
query={query}
item={item}
{...item}
/>
)}
/>
{JSON.stringify({ totalPages, cars }, null, 4)}
</pre>
</Grid>
</Grid>
);
}
export interface MaterialUiLinkProps {
item: PaginationRenderItemParams;
query: ParsedUrlQuery;
}
export function MaterialUiLink({ item, query, ...props }: MaterialUiLinkProps) {
return (
<Link
href={{
pathname: '/cars',
query: { ...query, page: item.page },
}}
>
<a {...props}></a>
</Link>
);
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const make = getAsString(ctx.query.make);
const [makes, models, pagination] = await Promise.all([
getMakes(),
getModels(make),
getPaginatedCars(ctx.query),
]);
return {
props: {
makes,
models,
cars: pagination.cars,
totalPages: pagination.totalPages,
},
};
};
C:\Users\Administrator\Desktop\nextjs\pages\database\getPaginatedCars.ts
import { ParsedUrlQuery } from 'querystring';
import { CarModel } from '../../api/Car';
import { getAsString } from '../../getAsString';
import openDB from '../../openDB';
const mainQuery = `
FROM car
WHERE (@make is NULL OR @make = make)
AND (@model is NULL OR @model = model)
AND (@minPrice is NULL OR @minPrice <= price)
AND (@maxPrice is NULL OR @maxPrice >= price)
`;
export async function getPaginatedCars(query: ParsedUrlQuery) {
const db = await openDB();
const page = getValueNumber(query.page) || 1;
const rowsPerPage = getValueNumber(query.rowsPerPage) || 4;
const offset = (page - 1) * rowsPerPage;
const dbParams = {
'@make': getValueStr(query.make),
'@model': getValueStr(query.model),
'@minPrice': getValueNumber(query.minPrice),
'@maxPrice': getValueNumber(query.maxPrice),
};
const carsPromise = db.all<CarModel[]>(
`SELECT * ${mainQuery} LIMIT @rowsPerPage OFFSET @offset`,
{
...dbParams,
'@rowsPerPage': rowsPerPage,
'@offset': offset,
}
);
const totalRowsPromise = db.get<{ count: number }>(
`SELECT COUNT(*) as count ${mainQuery}`,
dbParams
);
const [cars, totalRows] = await Promise.all([carsPromise, totalRowsPromise]);
return { cars, totalPages: Math.ceil(totalRows.count / rowsPerPage) };
}
function getValueNumber(value: string | string[]) {
const str = getValueStr(value);
const number = parseInt(str);
return isNaN(number) ? null : number;
}
function getValueStr(value: string | string[]) {
const str = getAsString(value);
return !str || str.toLowerCase() === 'all' ? null : str;
}
Previous5.x Next.js Building a Car Trader App #5- Pagination with filters for the list of carsNextNext.js Building a Car Trader App #6- Improved pagination with SWR + Car Cards with Material-UI
Last updated
Was this helpful?