{"size": 1387, "ext": "js", "max_stars_repo_path": "src/components/auth-menu.js", "max_stars_repo_name": "joshwcomeau/gatsby-personalization", "max_stars_repo_stars_event_min_datetime": "2020-02-20T08:52:15.000Z", "max_stars_repo_stars_event_max_datetime": "2020-02-23T14:31:59.000Z", "max_issues_repo_path": "src/components/auth-menu.js", "max_issues_repo_name": "joshwcomeau/gatsby-personalization", "max_issues_repo_issues_event_min_datetime": "2021-12-03T11:42:08.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-03T11:42:08.000Z", "max_forks_repo_path": "src/components/auth-menu.js", "max_forks_repo_name": "joshwcomeau/gatsby-personalization", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 16.3176470588, "max_line_length": 49, "alphanum_fraction": 0.5926459986}
import React from 'react';
import styled from 'styled-components';

import {
  getUserInfo,
  persistUserInfo,
  FAKE_USER,
} from '../auth.helpers';

import UnstyledButton from './unstyled-button';
import MenuIcon from './menu-icon';

const AuthMenu = () => {
  const [
    hasMounted,
    setHasMounted,
  ] = React.useState(false);

  const [user, setUser] = React.useState(
    getUserInfo()
  );

  React.useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return (
    <>
      {user ? (
        <LoggedInMenu user={user} />
      ) : (
        <LoginLink setUser={setUser} />
      )}
    </>
  );
};

const LoginLink = ({ setUser }) => (
  <Wrapper
    onClick={() => {
      setUser(FAKE_USER);
      persistUserInfo(FAKE_USER);
    }}
  >
    Log in
  </Wrapper>
);

const LoggedInMenu = ({ user }) => (
  <Wrapper>
    <Avatar
      src={user.avatar}
      alt={`${user.displayName}'s avatar`}
    />
    <DisplayName>{user.displayName}</DisplayName>
    <MenuIcon />
  </Wrapper>
);

const Wrapper = styled(UnstyledButton)`
  display: flex;
  align-items: center;
  color: white;
`;

const Avatar = styled.img`
  display: block;
  margin-right: 8px;
  margin-bottom: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
`;

const DisplayName = styled.span`
  display: block;
  margin-right: 8px;
`;

export default AuthMenu;
