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

Hoàn thiện đổ dữ liệu ra model và tạo button :)))

474KB

nextjs.rar

Source đã chỉnh sửa để tìm hiểu :)

Xử lý trường hợp make=all ở sqlite :))

http://localhost:3000/api/models?make=all

C:\Users\Administrator\Desktop\pro\pages\database\getModels.tsx

import openDB from "../../openDB";
export interface Model {
  model: string;
  count: number;
}
export async function getModels(make: string) {
	if(make ==='all') {
		make = '%%';
	}
  const db = await openDB();
  const model = await db.all < Model[] > (`SELECT model, count(*) as count FROM car WHERE make LIKE @make GROUP BY model`, { '@make': make });
  return model;
}

import { Paper,Select,MenuItem, FormControl, InputLabel, makeStyles,Grid, Button, SelectProps  } from '@material-ui/core';
import { Field, Form, Formik, FormikProps } from 'formik';
import {getMakes, Make} from './database/getMakes';
import {getModels, Model} from './database/getModels';
import router, { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import  getAsString  from '../getAsString';
import useSWR from 'swr';
interface Values {
  firstName: string;
  lastName: string;
  email: string;
}
interface HomeProps {
  makes: Make[];
  models: Model[]
}
const useStyles = makeStyles((theme) => ({
  paper: {
    margin: 'auto',
    maxWidth: 500,
    padding: theme.spacing(3),
  }
}));
export interface ModelSelectProps extends SelectProps {
  name: string;
  models: Model[];
  make: string;
  initialMake: string;
}
const prices = [500, 1000, 5000, 15000, 25000, 50000, 250000];
export function ModelSelect({initialMake, make,models, ...props }: ModelSelectProps) {
  const initialModelsOrUndefined = make === initialMake ? models : undefined;
  const { data: newModels } = useSWR<Model[]>('/api/models?make=' + make,{
    dedupingInterval: 60000,
    initialData: make === 'all' ? [] : initialModelsOrUndefined 
  });
  if(!newModels) return 'loading...';
  console.log(models);
  return (
    <Field as={Select} labelId="model" label="Model" name="model">
      <MenuItem value='all'>Model</MenuItem>
      {
        newModels.map((model)=>(
          <MenuItem value={model.model} key={model.model}>{`${model.model} (${model.count})`}</MenuItem>
        ))
      }
    </Field>
  )
}
export default function Home({makes,models}:HomeProps) {
  const classes = useStyles();
  const { query } = useRouter();
  const [initialValues] = useState({
    make: getAsString(query.make) || 'all',
    model: 'all',
    minPrice: 'all',
    maxPrice: 'all'
  });
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values) => {
        router.push({
          pathname: '/cars',
          query: { ...values, page: 1 },
        })
      }}
    >
    {({values}) => (
      <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.make} key={make.make}>{`${make.make} (${make.count})`}</MenuItem>
                    ))
                  }
                </Field>
              </FormControl>
            </Grid>
            <Grid item xs={6}>
              <FormControl fullWidth variant='outlined'>
                <InputLabel id="model">Model</InputLabel>
                <ModelSelect initialMake={initialValues.make} name="model" models={models} make={values.make}/>
              </FormControl>
            </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='all'>No Min</MenuItem>
                  {
                    prices?.map(price => (
                      <MenuItem key={price} value={price}>{price}</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='all'>No Max</MenuItem>
                  {
                    prices?.map(price => (
                      <MenuItem key={price} value={price}>{price}</MenuItem>  
                    ))
                  }
                </Field>
              </FormControl>
            </Grid>
            <Grid item xs={12}>
              <Button type="submit" variant="contained" color="primary" fullWidth>Search</Button>
            </Grid>
          </Grid>
        </Paper>
      </Form>  
    )}
    </Formik>
  )
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const {make} = ctx.query;
  const [makes,models] = await Promise.all([getMakes(), getModels(make)]);
  return {
    props: {makes, models}
  }
}