{"size": 1210, "ext": "js", "max_stars_repo_path": "src/Components/About.js", "max_stars_repo_name": "WhiteGoldPanda/Oberig-UA", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Components/About.js", "max_issues_repo_name": "WhiteGoldPanda/Oberig-UA", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Components/About.js", "max_forks_repo_name": "WhiteGoldPanda/Oberig-UA", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.2083333333, "max_line_length": 69, "alphanum_fraction": 0.5578512397}
import React from "react";
import axios from "axios";
import "./CSS/About.css";

import { Card, CardGroup, Jumbotron, Button } from "react-bootstrap";
class About extends React.Component {
  state = {
    beer: []
  };

  componentDidMount() {
    axios.get("https://api.punkapi.com/v2/beers").then(res => {
      const beer = res.data;
      console.log(beer);
      this.setState({ beer: beer });
    });
  }
  sortBy(key) {
    let arrayCopy = [...this.state.beers];
    //Write Handler for first_brewed
    if (key === "first_brewed") {
      arrayCopy.sort(this.beerDateSort(key, -4));
      arrayCopy.sort(this.beerDateSort(key, 3));
      this.setState({ beers: arrayCopy });
    } else {
      arrayCopy.sort(this.compareBy(key));
      this.setState({ beers: arrayCopy });
    }
  }

  render() {
    return (
      <div>
        {this.state.beer.map(beer => (
          <Card style={{ width: "18rem" }}>
            <Card.Body>
              <Card.Title>{beer.name}</Card.Title>
              <Card.Text>{beer.description}</Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card>
        ))}
      </div>
    );
  }
}
export default About;
