{"size": 1457, "ext": "js", "max_stars_repo_path": "client/src/pages/Services/Services.js", "max_stars_repo_name": "firstake/local-barbershop", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/pages/Services/Services.js", "max_issues_repo_name": "firstake/local-barbershop", "max_issues_repo_issues_event_min_datetime": "2022-02-28T01:51:42.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-28T01:51:42.000Z", "max_forks_repo_path": "client/src/pages/Services/Services.js", "max_forks_repo_name": "firstake/local-barbershop", "max_forks_repo_forks_event_min_datetime": "2020-10-13T17:38:11.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-13T17:38:11.000Z"}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 24.2833333333, "max_line_length": 94, "alphanum_fraction": 0.5264241592}
import React, {Component} from 'react';

import * as API from '../../API';

import Card from '../../components/Card';

import './Services.scss';

class Services extends Component {
  constructor(props) {
    super(props);
    this.state = {data: null};
  }

  componentDidMount() {
    this.controller = new AbortController();
    API.getServices({
      signal: this.controller.signal,
    }).then((data) => this.setState({data}))
        .catch((err) => {
          if (err.name === 'AbortError') {
            return console.error('The user aborted a request.');
          }
        });
  }

  componentWillUnmount() {
    this.controller.abort();
  }

  render() {
    const {data} = this.state;

    return (
      <div className="f-h">
        <div className="container">
          <h1 className="text-center pt-4 pb-2 border-bottom">Services</h1>
        </div>
        {data ? (
          <div className="container pb-4 pt-3">
            <div className="card-deck">
              {data.map((item) => (
                <Card data={item} key={item.link} />
              ))}
            </div>
          </div>
        ) : (
          <div className="d-flex justify-content-center align-items-center spinner-container">
            <div className="spinner-border text-warning " role="status">
              <span className="sr-only">Loading...</span>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default Services;
