5.2 Next.js Building a Car Trader App #5- Pagination with filters for the list of cars

Lấy dữ liệu của makes, models :))

C:\Users\Administrator\Desktop\app6\src\pages\cars.tsx

import { Grid, Card, CardHeader, Avatar, IconButton, CardMedia, Typography, makeStyles } from '@material-ui/core';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import CardContent from '@material-ui/core/CardContent';
import deepEqual from 'fast-deep-equal';
import { GetServerSideProps } from 'next';
import { useRouter } from 'next/router';
import { stringify } from 'querystring';
import { useState } from 'react';
import useSWR from 'swr';
import Search from '.';
import { CarModel } from './api/Car';
import Link from 'next/link';
import Pagination from '@material-ui/lab/Pagination';
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;
}
const useStyles = makeStyles((theme) => ({
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  avatar: {
    backgroundColor: 'red',
  },
  achorTag: {
      textDecoration: 'none'
  }
}));
export default function CarsList({makes, models}) {
  const classes = useStyles();
  return (
    <Grid container spacing={3}>
      <Grid item xs={12} sm={5} md={3} lg={2}>
        <Search makes={makes} models={models} />
      </Grid>
      <Grid container item xs={12} sm={7} md={9} lg={10} spacing={3}>
        <Grid item xs={12}>
          <Pagination count={10} />
        </Grid>
          <Grid  item xs={12} sm={6}>
            <Link
              href="#"
              as={null}
            >
              <a className={classes.achorTag}>
                <Card>
                  <CardHeader
                    avatar={
                      <Avatar aria-label="recipe" className={classes.avatar}>
                        R
                      </Avatar>
                    }
                    action={
                      <IconButton aria-label="settings">
                        <MoreVertIcon />
                      </IconButton>
                    }
                    title={'car.mode'}
                    subheader={5}
                  />
                  <CardMedia
                    className={classes.media}
                    image={'car.photoUrl'}
                    title={'aaaaaaaaaa'}
                  />
                  <CardContent>
                    <Typography variant="body2" color="textSecondary" component="p">
                      {'car.details'}
                    </Typography>
                  </CardContent>
                </Card>
              </a>
            </Link>
          </Grid>
        <Grid item xs={12}>
          <Pagination count={10} />
        </Grid>
      </Grid>
    </Grid>
  );
}
export const getServerSideProps: GetServerSideProps<CarsListProps> = async (ctx) => {
  const make = getAsString(ctx.query.make);
  const [makes, models] = await Promise.all([getMakes(),getModels(make)]);
  return {
    props: {makes, models}
  }
}