account.js

import React from 'react';
import { status, json } from '../utilities/requestHandlers';
import UserContext from '../contexts/user';
import { useContext } from 'react';
import {withRouter, useHistory } from 'react-router-dom';

function Account(props) {
  const context = useContext(UserContext);
  const user = context.user;

  const [profile, setProfile] = React.useState({});
  const history = useHistory();

  if (!user.loggedIn) {
    history.push(`/`);
    return (
      <>
      <h1>Not logged in</h1>
    </>
    );
  }

  if (!profile.username) {
    let headers = new Headers();
    headers.append('Authorization', user.Authorization);
    fetch(user.links.self, {headers:headers})
    .then(status)
    .then(json)
    .then(data => {
      console.log(data);
      setProfile(data);
    })
    .catch(err => console.error(err));  
  }

  return (
    <>
      <h1>Account</h1>
      {Object.keys(profile).map(key => <li key={key}>{key}: {profile[key]}</li>)}
    </>
  );
}

export default withRouter(Account);