import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import { LOGIN_USER } from '../../utils/mutations';
import Auth from '../../utils/auth';
import "./style.css"

const Login = () => {
  
  const [formState, setFormState] = useState({ email: '', password: '' });
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const [login, { loading, error }] = useMutation(LOGIN_USER, {
    onCompleted: (data) => {
      sessionStorage.setItem('token', data.login.token);
      setIsLoggedIn(true);
    },
  });

  const handleFormSubmit = async (event) => {
    event.preventDefault();
    if (error) return
    try {
      const mutationResponse = await login({
        variables: { email: formState.email, password: formState.password },
      });
      const token = mutationResponse.data.login.token;
      Auth.login(token);
    } catch (e) {
      console.log(e);
    }
    finally{
      window.location.replace('/dashboard')
    }
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormState({
      ...formState,
      [name]: value,
    });
  };

  return (
    <div className="container my-1">
      <Link to="/register">← Go to Register</Link>

      <h2>Login</h2>
      <form onSubmit={handleFormSubmit}>
        <div className="flex-row space-between my-2">
          <label htmlFor="email">Email address:</label>
          <input
            placeholder="[email protected]"
            name="email"
            type="email"
            id="email"
            onChange={handleChange}
          />
        </div>
        <div className="flex-row space-between my-2">
          <label htmlFor="pwd">Password:</label>
          <input
            placeholder="******"
            name="password"
            type="password"
            id="pwd"
            onChange={handleChange}
          />
        </div>
        {error ? (
          <div>
            <p className="error-text">The provided credentials are incorrect</p>
          </div>
        ) : null}
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
};

export default Login;

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { idbPromise } from "../../../utils/helper";

export default function Data(props) {
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const idbCompanies = await idbPromise("get");
      setCompanies(idbCompanies);
    };

    fetchData();
  }, []);

  const selectedProps = [
    { label: "Revenue:", property: "revenue" },
    { label: "Cash Flow:", property: "cashFlow" },
    { label: "Net Earnings:", property: "netIncome" },
  ];

  function handleClick() {
    window.location.replace("./learn")
  }

  return (
    <table className="financial-table">
      <thead>
        <tr>
          <th>(<span>In millions</span>, <span>except per share data</span>)</th>

          {companies.map(company => (
            <th key={company.name}>{company.name}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {selectedProps.map(prop => (
          <tr key={prop.label}>
            <td onClick={handleClick}>{prop.label}</td>
            {companies.map(company => (
              <td key={company.name}>{company[prop.property] || "N/A"}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}