4.2 Next.js Building a Car Trader App #4- Model - Dynamic Dropdown using Formik and SWR

import { useEffect, useState } from 'react';
import { Field, Form, Formik, useField, FormikProps, useFormikContext } from 'formik';
import { Paper, makeStyles, FormControl, Grid, InputLabel, Select, MenuItem, SelectProps, Button } from '@material-ui/core';
import { GetServerSideProps } from 'next';
import useSWR from 'swr';
import { getMakes, Make } from './database/getMakes';
import { getModels, Model } from './database/getModels';
import { getAsString } from '../getAsString';
const initialValues = {
  email: '',
  color: 'red',
  firstName: '',
  lastName: ''
}
const useStyles = makeStyles((theme) => ({
  paper: {
    margin: 'auto',
    maxWidth: 500,
    padding: theme.spacing(3),
  }
}));
export interface HomeProps {
  makes: Make[];
  models: Model[];
}
export interface ModelSelectProps extends SelectProps {
  name: string;
  models: Model[];
  make: string;
  initialMake: string;
}
export function ModelSelect({ models, make, ...props }: ModelSelectProps) {
  const { setFieldValue } = useFormikContext();
  const [field] = useField({ name: props.name });
  const { data } = useSWR < Model[] > ('/api/models?make=' + make);
  const newModels = data || models;
  return (
    <FormControl fullWidth variant="outlined">
      <InputLabel id="search-model">Model</InputLabel>
      <Select
        name="model"
        labelId="search-model"
        label="Model"
        {...field}
        {...props}
      >
        <MenuItem value="all">
          <em>All Models</em>
        </MenuItem>
        {newModels.map((model) => (
          <MenuItem key={model.model} value={model.model}>
            {`${model.model} (${model.count})`}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}
const prices = [500, 1000, 5000, 15000, 25000, 50000, 250000];
export default function Home({ makes, models }: HomeProps) {
  const classes = useStyles();
  const initialValues = {
    make: 'all',
    model: 'all',
    minPrice: 'all',
    maxPrice: 'all',
  };
  return (
    <Formik 
      initialValues={initialValues} 
    >
      {({ values }) => (
        <Form>
          <Paper elevation={3} className={classes.paper}>
            <Grid container spacing={3}>
              <Grid item xs={12} sm={6}>
                <FormControl variant="outlined" fullWidth>
                  <InputLabel id="search-make">Make</InputLabel>
                  <Field as={Select} name="make" label="Make" labelId="search-make">
                     <MenuItem value="all">
                      <em>All Makes</em>
                    </MenuItem>
                    {
                      makes.map((make) => {
                        return (
                          <MenuItem value={make.make} key={make.make}>
                            {`${make.make} (${make.count})`}
                          </MenuItem>
                        )
                      })
                    }
                  </Field>
                </FormControl>
              </Grid>
              <Grid item xs={12} sm={6}>
                <ModelSelect make={values.make} name="model" models={models} />
              </Grid>
              <Grid item xs={12} sm={6}>
                <FormControl variant="outlined" fullWidth>
                  <InputLabel id="minprice">Min Price</InputLabel>
                  <Field as={Select} name="minprice" label="Min Price" labelId="minprice">
                     <MenuItem value="all">
                      <em>No Min</em>
                    </MenuItem>
                    {
                      prices.map((price) => (
                        <MenuItem value={price} key={price}>{price}</MenuItem>
                      ))
                    }
                  </Field>
                </FormControl>
              </Grid>
              <Grid item xs={12} sm={6}>
                <FormControl variant="outlined" fullWidth>
                  <InputLabel id="maxprice">Max Price</InputLabel>
                  <Field as={Select} name="maxprice" label="Max Price" labelId="maxprice">
                     <MenuItem value="all">
                      <em>No Max</em>
                    </MenuItem>
                    {
                      prices.map((price) => (
                        <MenuItem value={price} key={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 = getAsString(ctx.query.make);
  const [makes, models] = await Promise.all([getMakes(), getModels(make)]);
  return {
    props: { makes, models }
  }
}