3.2 Next.js Building a Car Trader App #3: Filters based on URL querystring with Formik

Đổ dữ liệu giả ra model :)))

C:\Users\Administrator\Desktop\nextjs\pages\database\getMakes.tsx

import { openDB } from '../openDB';
export interface Make {
  make: string;
  count: number;
}
export async function getMakes() {
  const db = await openDB();
  const makes = await db.all<Make[]>(`SELECT make, count(*) as count FROM car GROUP BY make`);
  return makes;
}

C:\Users\Administrator\Desktop\pro\next.config.js

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: "empty",
        child_process: "empty",
        'tls': "empty",
        net: "empty",
      }
    }
    return config
  }
}

C:\Users\Administrator\Desktop\pro\pages\index.tsx

import { Paper,Select,MenuItem, FormControl, InputLabel, makeStyles,Grid } from '@material-ui/core';
import { Field, Form, Formik, FormikProps } from 'formik';
import {getMakes, Make} from './database/getMakes';
import { GetServerSideProps } from 'next';
interface HomeProps {
  makes: Make[]
}
const useStyles = makeStyles((theme) => ({
  paper: {
    margin: 'auto',
    maxWidth: 500,
    padding: theme.spacing(3),
  }
}));
export default function Home({makes}:HomeProps) {
  const classes = useStyles();
  return (
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
    >
    {(props: FormikProps<any>) => (
      <Form className={classes.paper} variant="outlined">
        <Paper>
          <Grid container spacing={2}>
            <Grid item xs={6}>
              <FormControl fullWidth variant='outlined'>
                <InputLabel id="make">Make</InputLabel>
                <Field as={Select} labelId="make" label="Make" name="make">
                  <MenuItem value='all'>All Make</MenuItem>
                  {
                    makes.map((make)=>(
                      <MenuItem value={make.count} key={make.make}>{`${make.make} (${make.count})`}</MenuItem>
                    ))
                  }
                </Field>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              Model
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth variant='outlined'>
                <InputLabel id="minPrice">Min Price</InputLabel>
                <Field as={Select} labelId="minPrice" label="Min Price" name="minPrice">
                  <MenuItem value={10}>Ten</MenuItem>
                  <MenuItem value={20}>Twenty</MenuItem>
                  <MenuItem value={30}>Thirty</MenuItem>
                </Field>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth variant='outlined'>
                <InputLabel id="maxPrice">Max Price</InputLabel>
                <Field as={Select} labelId="maxPrice" label="Max Price" name="maxPrice">
                  <MenuItem value={10}>Ten</MenuItem>
                  <MenuItem value={20}>Twenty</MenuItem>
                  <MenuItem value={30}>Thirty</MenuItem>
                </Field>
              </FormControl>
            </Grid>
          </Grid>
        </Paper>
      </Form>  
    )}
    </Formik>
  )
}
export const getServerSideProps: GetServerSideProps = async () => {
  const makes = [
	  { make: 'Audi', count: 1 },
	  { make: 'BMW', count: 3 }
	];
  return {
    props: {makes}
  }
}