import React, { useEffect, useState } from 'react';
import axios from './axios';
import { Link } from '@reach/router';

const Activate = ({ activationToken }) => {
  const [ data, setData ] = useState({});
  useEffect(() => {
    (async () => {
      try {
        await axios.post('/activate', { activationToken });
        setData({
          message: 'Account succesfully activated. You can now log in.',
        });
      } catch (err) {
        setData({
          error: err.response.data.error,
        });
      }
    })();
  }, []);

  return (
    <div>
      <h2 className="subtitle">Activating account</h2>
      <div>
        <div className="error" key="error">
          {data.error}
        </div>
        <div>{data.message}</div>
        {data.message && <Link to="/login">To login page</Link>}
      </div>
    </div>
  );
};

export default Activate;