import React from 'react';
import { connect } from 'react-redux';
import { EDITOR_FACEBOOK_GROUP } from '../constants/urls';
import Link from 'next/link';
import { showDialog, logout } from '../redux/auth';

function AppHeader({ user, onLoginClick, onLogoutClick }) {
  return (
    <header className="root">
      <Link href="/"><a className="logo"><h1>真的假的</h1></a></Link>

      <a
        href={EDITOR_FACEBOOK_GROUP}
        target="_blank"
        rel="noopener noreferrer"
        className="help"
      >
        編輯求助區
      </a>
      {user
        ? <div className="user">
            <img src={user.get('avatarUrl')} alt="avatar" />
            <span className="user-name">{user.get('name')}</span>
            <button type="button" onClick={onLogoutClick}>Logout</button>
          </div>
        : <button type="button" onClick={onLoginClick}>Login</button>}
      <style jsx>{`
        .root {
          display: flex;
          align-items: center;
          padding: 0 24px;
        }
        .logo {
          margin-right: auto;
        }
        .help {
          padding: 4px 16px;
          margin-right: 16px;
          border-right: 1px solid #ccc;
          display: none;
        }
        .user {
          display: flex;
          align-items: center;
        }
        .user-name {
          display: none;
          margin: 0 16px;
        }
        @media screen and (min-width: 768px) {
          .root {
            padding: 0 40px;
          }
          .help, .user-name {
            display: block;
          }
        }
      `}</style>
    </header>
  );
}

function mapStateToProps({ auth }) {
  return {
    user: auth.get('user'),
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onLoginClick() {
      dispatch(showDialog());
    },
    onLogoutClick() {
      dispatch(logout());
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(AppHeader);

@@ -368,16 +368,127 @@
 %3C/Link%3E%0A
+      %3Cnav%3E%0A        %3CLink href=%22/%22%3E%3Ca%3E%E6%96%87%E7%AB%A0%3C/a%3E%3C/Link%3E%0A        %3CLink href=%22/replies%22%3E%3Ca%3E%E5%9B%9E%E6%87%89%3C/a%3E%3C/Link%3E%0A      %3C/nav%3E
 %0A      %3C
@@ -1135,26 +1135,228 @@
     
-margin-right: auto
+display: none;%0A          margin-right: 16px;%0A        %7D%0A        nav %7B%0A          margin-right: auto;%0A        %7D%0A        nav a %7B%0A          display: inline-block;%0A          padding: 8px;%0A          border-left: 1px dashed #ccc
 ;%0A  
@@ -1788,24 +1788,31 @@
  %7D%0A         
+ .logo,
  .help, .use

Add nav link to reply list