content: import React, { Component } from 'react';
  import { Link } from 'react-router-dom';
  import './Profile.css';
  import SocialBadge from '../SocialBadge'
  import Table from '../Table'
  
  class Profile extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        badge: null
      }
    }
  
    componentDidMount() {
      fetch('http://hack-day-donation.azurewebsites.net/api/Donations/DonationAmount?userId=1')
      .then(r => r.json())
      .then(x => {
        const amount = x.DonationAmount;
        const rangeElem = Array.from(document.querySelectorAll('[data-range]'));
  
        rangeElem.map(x => {
          const [min, max] = [ x.getAttribute('data-min'), x.getAttribute('data-max')];
          if (amount > min && amount < max) {
            x.classList.add('is-this-one');
  
            this.setState({
              badge: x.getAttribute('data-range')
            });
          }
        });
      })
  }
  
    render() {
      return (
        <div className="container profile">
          <h1>Profile</h1>
          <Table />
          <br />
          <SocialBadge badge={this.state.badge} />
        </div>
      );
    }
  }
  
  export default Profile;
  