import React, { Component } from 'react';
import './App.css';

import { Container, Grid, Button } from 'semantic-ui-react'
import LoginPanel from './LoginPanel';
import Body from './Body';

import * as auth from './auth';
import ajaxFetch from './ajax';

class App extends Component {
  constructor(props) {
    super(props);

    // initial state
    this.state = {
      user: {
        isLoggedIn: false
      }
    };

    // try and restore the auth from localStorage before the first render
    auth.restoreAuth();

    // event handlers
    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }

  componentDidMount() {
    // modify the state based on non-pure inputs here
    this.setState(this.computeAuthState());
  }

  computeAuthState() {
    return { user: auth.user };
  }

  /* callbacks */
  handleLogin(username, password) {
    // a promise
    return auth.login(username, password).then(() => {
      this.setState(this.computeAuthState());
    });
  }

  handleLogout() {
    auth.logout();

    this.setState(this.computeAuthState());
  }

  doAjax() {
    ajaxFetch('api/somebackendroute');
  }

  render() {
    return (
      <Container className="app">
        <Grid columns={2} divided>
          <Grid.Row>
            <Grid.Column>
              <LoginPanel
                handleLogin={this.handleLogin}
                handleLogout={this.handleLogout}
                user={this.state.user}
              />
            </Grid.Column>

            <Grid.Column>
              <Button onClick={() => this.doAjax()}>Perform Useless 404 Ajax</Button>
            </Grid.Column>
          </Grid.Row>
        </Grid>
        {this.state.user.isLoggedIn ? <Body user={this.state.user} /> : null}
      </Container>
    );
  }
}

export default App;

@@ -1260,16 +1260,17 @@
 ivided%3E%0A
+%0A
         
@@ -1667,32 +1667,35 @@
     %3C/Grid.Row%3E%0A
+%0A  
         %3C/Grid%3E%0A
@@ -1691,15 +1691,50 @@
    %3C
-/
 Grid
-%3E%0A
+.Row%3E%0A            %3CGrid.Column%3E%0A      
     
@@ -1807,16 +1807,170 @@
 : null%7D%0A
+            %3C/Grid.Column%3E%0A            %3CGrid.Column%3E%0A              %7B/* goodies here */%7D%0A            %3C/Grid.Column%3E%0A          %3C/Grid.Row%3E%0A%0A        %3C/Grid%3E%0A
       %3C/

Put body into the row