import React from 'react';
import { observer } from 'mobx-react';

import LogoutBtn from './LogoutBtn';
import userState from './UserState';

const Home = observer(({ user }) => {
  if (user.authError) {
    const err = user.authError;
    const text = (err.response && err.response.data.message) || String(err);
    return <div className="error">{text}</div>;
  }

  if (!user.username) {
    return 'Loading...';
  }

  return (
    <div>
      <LogoutBtn />
      Hello {user.username}!
      <div>
        <img src="https://placehold.it/200x200" alt="Placeholder" />
      </div>
    </div>
  );
});

export default () => <Home user={userState} />;