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

Đổ dữ liệu ra make hoàn thiện :))

526KB

pro.zip

archive

import { Paper, Select, MenuItem, FormControl, InputLabel, makeStyles, Grid, createStyles } from '@material-ui/core';
import { Field, Form, Formik, FormikProps } from 'formik';
import { GetServerSideProps } from 'next';
import Make from '../interface/Make';
import getMakes from './database/getMakes';
interface HomeProps {
  makes: Make[]
}
const useStyles = makeStyles((theme) => createStyles({
  paper: {
    margin: 'auto',
    maxWidth: 500,
    padding: theme.spacing(3),
  }
}));
export default function Home({makes}:HomeProps) {
  const classes = useStyles();
  return (
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      onSubmit={(values) => {
        return null;
      }}
    >
    {(props: FormikProps<any>) => (
      <Form className={classes.paper}>
        <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 = await getMakes();
  console.log(makes);
  return {
    props: {makes}
  }
}