import React, { Component } from "react";

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

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

  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 s6">
              <Migrations migs={this.state.migs} />
            </div>
            <div className="col s6">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
                quis est vitae sapien venenatis viverra. Suspendisse bibendum
                tristique est, et gravida neque porta ut. Pellentesque egestas
                vehicula nulla eu aliquet. Morbi id lacus eget lorem aliquam
                ornare. Vivamus pulvinar ligula sapien, ut pulvinar eros
                sollicitudin sodales. Donec sed ipsum sit amet mauris posuere
                maximus. Aenean finibus turpis eu urna suscipit venenatis.
              </p>
            </div>
            <div className="divider"></div>
            <div className="section">
              <div className="col s12">
                <SideMigrations migs={this.state.migs} />
              </div>
            </div>
            <div className="divider"></div>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;

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