import React from 'react';
import { sendSignInLink } from '../api/session';

class Landing extends React.Component {
  state = {
    email: '',
    result: '',
  };

  handleChange = (e) => {
    const email = e.target.value;

    this.setState({
      email,
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();

    sendSignInLink(this.state.email)
      .then((res) => {
        this.setState({
          result: res,
        });
      })
      .catch((err) => {
        this.setState({
          result: err.message,
        });
      });
  };

  render() {
    return (
      <React.Fragment>
        <h1>I am the landing page!</h1>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="email">
            Sign In:
            <input
              value={this.state.email}
              onChange={this.handleChange}
              id="email"
              type="text"
              name="email"
            />
          </label>
          <input type="submit" value="Submit" />
          {this.state.result}
        </form>
      </React.Fragment>
    );
  }
}

export default Landing;