Fui comparar alguns arquivos tsx do meu projeto com os que estão no GitHub, e vi que o arquivo index.tsx do componente ListaRestaurante que está no GitHub está como fizemos na aula 1, mas depois houveram muitas mudanças no código desse arquivo, e eu queria poder conferir. Aqui está o meu código desse componente:

import { useEffect, useState } from 'react';
import IRestaurante from '../../interfaces/IRestaurante';
import style from './ListaRestaurantes.module.scss';
import Restaurante from './Restaurante';
import axios, { AxiosRequestConfig } from 'axios';
// import { nodeModuleNameResolver } from 'typescript';
import { IPaginacao } from '../../interfaces/IPaginacao';

interface IparametrosDeBusca {
  ordering?: string;
  search?: string;
}

const ListaRestaurantes = () => {

  const [restaurantes, setRestaurantes] = useState<IRestaurante[]>([]);
  const [proximaPagina, setProximaPagina] = useState('');
  const [paginaAnterior, setPaginaAnterior] = useState('');
  const [busca, setBusca] = useState('');
  const [ordenacao, setOrdenacao] = useState('');

  const carregarDados = (url: string, opcoes: AxiosRequestConfig = {}) => {
    axios.get<IPaginacao<IRestaurante>>(url, opcoes)
      .then(resposta => {
        setRestaurantes(resposta.data.results);
        setProximaPagina(resposta.data.next);
        setPaginaAnterior(resposta.data.previous);
      }).catch(erro => {
        console.log(erro);
      })
  }

  // A cada busca, montamos um objeto de opções:
  const buscar = (evento: React.FormEvent<HTMLFormElement>) => {
    evento.preventDefault();
    const opcoes = {
      params: {

      } as IparametrosDeBusca
    }
    if (busca) {
      opcoes.params.search = busca;
    }
    carregarDados('http://localhost:8000/api/v1/restaurantes/', opcoes);
  }

  useEffect(() => {
    // obter restaurantes:
    axios.get<IPaginacao<IRestaurante>>('http://localhost:8000/api/v1/restaurantes/')
      .then(resposta => {
        console.log(resposta);
        setRestaurantes(resposta.data.results);
        setProximaPagina(resposta.data.next);
      }).catch(erro => {
        console.log(erro);
      })
  }, []);

  return (
    <section className={style.ListaRestaurantes}>
      <h1>Os restaurantes mais <em>bacanas</em>!</h1>
      <form onSubmit={buscar}>
        <div>
          <label htmlFor='select-ordenacao'>Ordenação</label>
          <select
            name='select-ordenacao'
            id='select-ordenacao'
            value={ordenacao}
            onChange={evento => setOrdenacao(evento.target.value)}
          >
            <option value=''>Padrão</option>
            <option value='id'>Por ID</option>
            <option value='nome'>Por nome</option>
          </select>
        </div>
        <div>
          <button type='submit'>Buscar</button>
        </div>
      </form>
      {restaurantes?.map(item => <Restaurante restaurante={item} key={item.id} />)}
      {<button onClick={() => carregarDados(paginaAnterior)} disabled={!paginaAnterior}>
        Página anterior
      </button>}
      {<button onClick={() => carregarDados(proximaPagina)} disabled={!proximaPagina}>Próxima página</button>}
    </section>
  );
}

export default ListaRestaurantes;