text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import axios from 'axios';
  import styled from 'styled-components';
  
  // Material UI
  import Snackbar from '@material-ui/core/Snackbar';
  
  // API
  import { APP_TOKEN } from '../../../api/Constants';
  // Components
  import LoginForm from './components/LoginForm';
  import WelcomeMessage from './components/WelcomeMessage';
  import AuthenticationAPI from '../../../api/AuthenticationAPI';
  
  const Container = styled.section`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #607d8b;
  `;
  
  class LoginPage extends Component {
    isTokenSource = axios.CancelToken.source();
  
    state = {
      form: {
        username: '',
        password: '',
      },
      isLoading: false,
      isSnackbarOpen: false,
      snackbarMessage: '',
    };
  
    componentWillUnmount() {
      this.isTokenSource.cancel('API Cancel');
    }
  
    onHandleChangeForm = event => {
      const { form } = this.state;
      form[event.target.name] = event.target.value;
      this.setState({ form });
    };
  
    onHandleSubmitForm = async event => {
      event.preventDefault();
  
      const { history } = this.props;
      const { form } = this.state;
  
      const isFormEmpty = Object.values(form).every(item => item === '');
      if (isFormEmpty) {
        return;
      }
      try {
        this.setState({ isLoading: true });
        await AuthenticationAPI.onLogin({
          cancelToken: this.isTokenSource.token,
          username: form.username,
          password: form.password,
        });
  
        APP_TOKEN.set({
          token: '',
          refreshToken: '',
        });
        history.push('/flights');
      } catch (error) {
        const { message } = error;
        this.onToggleSnackbar({ message });
        this.setState({ isLoading: false });
      }
    };
  
    onToggleSnackbar = ({ message = 'Error' }) => {
      this.setState(state => ({
        isSnackbarOpen: !state.isSnackbarOpen,
        snackbarMessage: message,
      }));
    };
  
    render() {
      const { form, isLoading, isSnackbarOpen, snackbarMessage } = this.state;
      return (
        <Container>
          <WelcomeMessage />
          <LoginForm
            value={form}
            isLoading={isLoading}
            onChange={this.onHandleChangeForm}
            onSubmit={this.onHandleSubmitForm}
          />
  
          <Snackbar
            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
            open={isSnackbarOpen}
            autoHideDuration={6000}
            onClose={this.onToggleSnackbar}
            ContentProps={{
              'aria-describedby': 'message-id',
            }}
            message={<span id="message-id">{snackbarMessage}</span>}
          />
        </Container>
      );
    }
  }
  
  LoginPage.propTypes = {
    history: PropTypes.object, // React Router Injected
  };
  
  export default LoginPage;
  