{"size": 2939, "ext": "js", "max_stars_repo_path": "client/src/pages/AdoptableAnimals/index.js", "max_stars_repo_name": "HigorSnt/adopt.me", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/pages/AdoptableAnimals/index.js", "max_issues_repo_name": "HigorSnt/adopt.me", "max_issues_repo_issues_event_min_datetime": "2020-09-17T14:24:45.000Z", "max_issues_repo_issues_event_max_datetime": "2020-11-27T02:09:45.000Z", "max_forks_repo_path": "client/src/pages/AdoptableAnimals/index.js", "max_forks_repo_name": "HigorSnt/adopt.me", "max_forks_repo_forks_event_min_datetime": "2020-09-27T13:54:13.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-27T13:54:13.000Z"}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": 1, "avg_line_length": 26.0088495575, "max_line_length": 92, "alphanum_fraction": 0.606668935}
import React, { useEffect, useReducer, useState } from 'react';
import { Drawer, makeStyles } from '@material-ui/core';
import { FaFilter } from 'react-icons/fa';

import Header from '../../components/Header';
import ListItem from '../../components/ListItem';
import FilterArea from '../../components/FilterArea';
import UfSelect from '../../components/UfSelect';
import AgeRange from '../../components/AgeRange';

import { filterReducer } from '../../reducers/FilterReducer';
import { getPets, filterPets } from '../../services/api';
import AdoptableAnimalsContext from '../../contexts/AdoptableAnimalsContext';
import * as Actions from '../../constants';

import './styles.css';

const initialState = {
  ageValue: [0],
  optionsSelected: [],
  ufSelected: '',
};

const useStyles = makeStyles({
  box: {
    width: '50% !important',
  },
});

function AdoptableAnimals() {
  const [state, dispatch] = useReducer(filterReducer, initialState);

  const [open, setOpen] = useState(false);
  const [animals, setAnimals] = useState([]);

  const classes = useStyles();

  const filterArea = (
    <form className="filter-form">
      <label htmlFor="animal">buscar por...</label>
      <FilterArea id="animal" />

      <label htmlFor="location">estado</label>
      <UfSelect />

      <label htmlFor="age">a busca será por animais com até {state.ageValue[0]} anos</label>
      <AgeRange />
      <button onClick={reset}>Limpar filtros</button>
    </form>
  );

  useEffect(() => {
    getAnimals();
  }, []);

  useEffect(() => {
    search();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state]);

  function reset() {
    dispatch({ type: Actions.CHANGE_UF_SELECTED, payload: initialState });
  }

  async function getAnimals() {
    let pets = await getPets();
    setAnimals(pets);
  }

  function toggleOpen() {
    setOpen(!open);
  }

  // ! lembrar ao passar um array de options vazio deve-se mostrar todas as opções
  async function search() {
    let pets = await filterPets(state);
    setAnimals(pets);
  }

  return (
    <AdoptableAnimalsContext.Provider value={{ state, dispatch }}>
      <Header />
      <div className="container">
        <aside id="responsive-filter-area">
          <button id="filter-button" onClick={toggleOpen}>
            <FaFilter /> <span>Filtrar</span>
          </button>
          <Drawer
            classes={{ modal: classes.box }}
            anchor="right"
            open={open}
            onClose={toggleOpen}
            SlideProps={{
              unmountOnExit: true,
            }}
          >
            {filterArea}
          </Drawer>
        </aside>
        <aside id="filter-area">{filterArea}</aside>

        <main id="animal-list">
          {animals.map((animal) => (
            <ListItem key={animal.id} pet={animal} />
          ))}
        </main>
      </div>
    </AdoptableAnimalsContext.Provider>
  );
}

export default AdoptableAnimals;
