Graphql 初体验 第十三章 | #15 Adding a Modal

对应内容：#15 Adding a Modal | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

主要内容：

• 增加了logout的逻辑
• 增加了Modal以及Dropback组件
• 修改了保存token时的一个BUG
• 修改了路由以及重定向的逻辑

1 增加logout的逻辑

import './MainNavigation.css';
const MainNavigation = (props) => (
  <AuthContext.Consumer>
    {(context) => (
      <header className="main-navigation">
        <div className="main-navigation__logo">
          <h1>EasyEvent</h1>
        </div>
        <nav className="main-navigation__item">
          <ul>
            {!context.token && (
              <li>
                <NavLink to="/auth">Authenticate</NavLink>
              </li>
            )}
            <li>
              <NavLink to="/events">Events</NavLink>
            </li>
            {context.token && (
                <React.Fragment>
                    <li>
                        <NavLink to="/bookings">Bookings</NavLink>
                    </li>
                    <li>
                        <button onClick={context.logout}>Logout</button>
                    </li>
                </React.Fragment>
            )}
          </ul>
        </nav>
      </header>
    )}
  </AuthContext.Consumer>
);
export default MainNavigation;

2 增加了Modal以及Dropback组件

import './Modal.css';

const Modal = props => (
    <div className="modal">
        <header>
            <h1>{props.title}</h1>
        </header>
        <section className="modal__content">
            {props.children}
        </section>
        <section className="modal__action">
            <button onClick={props.onCancel}>Cancel</button>
            <button onClick={props.onConfirm}>Confirm</button>
        </section>
    </div>
);

export default Modal;

.modal {
    position: fixed;
    margin: 0 auto;
    width: 90%;
    left: 5%;
    background-color: white;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.modal > header {
    padding: 1rem;
}
.modal .modal__content {
    padding: 1rem;
}
.modal .modal__action {
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
}
.modal > header > h1 {
    margin: 0;
}
@media (min-width: 768px) {
    .modal {
        width: 30rem;
        left: calc((100% - 30rem) / 2);
    }
}

import './Dropback.css';

const Dropback = props => (
    <div className="dropback"></div>
);

export default Dropback;

Tip：当使用fixed定位时，如果不设置宽高，且想用top、left、right、bottom都为0来实现居中，宽高就会被拉伸。

.dropback {
    position: fixed;
    min-height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
}

3 修改了保存token时的一个BUG

let { token, userId, tokenExpiration } = data?.data?.login;

4 修改了路由以及重定向的逻辑