import React, { Component } from "react";

import { callAPI } from "../actions/API";
import Cards from "./Pages/Cards";
import SideMigrations from "./common/Migrations/SideMigrations";

// Homepage/Cards, first API call here to pass down to cards
// and the pending migration list, if there's no data, nothing will show
// This would benefit from an error/notification if there is no data
//
// Two main components linked here are the Dashboard, and the SideMigrations comp,
// SideMigrations calls the pending migration list, with its own API call
// Dashboard performs the rendering of the cards and the numbers from each migration status.

export class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      migs: [],
    };
  }

  componentDidMount() {
    callAPI
      .get()
      .then((request) => {
        this.setState({
          migs: request.data,
        });
      })
      .catch((error) => {
        this.setState({
          error: true,
        });
      });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="divider"></div>

          <div className="section">
            <div className="col s7">
              <Cards migs={this.state.migs} />
            </div>
            <div className="col s5">
              <p>Migrations tracker</p>
            </div>
            <div className="divider"></div>
            <div className="section">
              <div className="col s12">
                <SideMigrations />
              </div>
            </div>
            <div className="divider"></div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;

// Broken
// <SideMigrations migs={this.state.migs} />