{"size": 1412, "ext": "js", "max_stars_repo_path": "client/src/App.js", "max_stars_repo_name": "lytecode/contact-list", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/App.js", "max_issues_repo_name": "lytecode/contact-list", "max_issues_repo_issues_event_min_datetime": "2021-05-10T09:34:38.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-10T09:34:38.000Z", "max_forks_repo_path": "client/src/App.js", "max_forks_repo_name": "lytecode/contact-list", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 23.5333333333, "max_line_length": 75, "alphanum_fraction": 0.578611898}
import React, { Component } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container } from "reactstrap";
import "./App.css";

import AppNavbar from "./components/Navbar";
import ContactForm from "./components/ContactForm";
import Contacts from "./components/Contacts";

class App extends Component {
  state = {
    contacts: []
  };

  componentDidMount() {
    axios.get("http://localhost:5000/api/contacts").then(res => {
      this.setState({ contacts: res.data.data });
    });
  }

  addContact = contact => {
    //send new contact to the backend database via BE api
    axios.post("http://localhost:5000/api/contacts", contact).then(res => {
      if (res.status === 201) {
        this.componentDidMount();
      }
    });
  };

  removeContact = contact => {
    axios
      .delete(`http://localhost:5000/api/contacts/${contact._id}`)
      .then(res => {
        if (res.status === 200) {
          this.componentDidMount();
        }
      });
  };

  render() {
    return (
      <div className="App">
        <AppNavbar />
        <Container className="container">
          <ContactForm addContact={this.addContact} />
          <br />
          <hr />
          <Contacts
            contacts={this.state.contacts}
            removeContact={this.removeContact}
          />
        </Container>
      </div>
    );
  }
}

export default App;
