import React from 'react';
import { map, keyBy } from 'lodash';
import SignupCard from '../SignupCard';
import { RestApiClient } from '@dosomething/gateway';
import MetaInformation from '../MetaInformation';
import UserInformation from '../Users/UserInformation';

class UserOverview extends React.Component {
  constructor(props) {
    super(props);

    this.state = {},

    this.api = new RestApiClient;
  }

  componentDidMount() {
    this.getUserActivity(this.props.user.id);
  }

  /**
   * Gets the user activity for the specified user and update state.
   *
   * @param {String} id
   * @return {Object}
   */
  getUserActivity(id) {
    this.api.get('api/v2/activity', {
      filter: {
        northstar_id: id,
      },
      orderBy: 'desc',
      limit: 'all',
    }).then(json => this.setState({
      signups: json.data
    }, () => {
      // After we grab the signups, get the campaign objects for each signup.
      const ids = map(this.state.signups, 'campaign_id');
      this.getCampaigns(ids);
    }));
  }

  /**
   * Gets campaigns associated with signups.
   *
   * @param {Array} ids
   * @return {Object}
   */
  getCampaigns(ids) {
    this.api.get('api/v2/campaigns', {
      ids: ids.join()
    }).then(json => this.setState({
      campaigns: keyBy(json, 'id'),
    }));
  }

  render() {
    const user = this.props.user;

    return (
      <div>
        <div className="container__block">
          <h2 className="heading -emphasized -padded"><span>User Info</span></h2>
        </div>

        <div className="container__block">
          <UserInformation user={user}>
            <MetaInformation title="Meta" details={{
              "Source": user.source,
              "Northstar ID": user.id,
            }} />
          </UserInformation>
        </div>

        <div className="container__block">
          <h2 className="heading -emphasized -padded"><span>Campaigns</span></h2>
        </div>

        <div className="container__block">
          {this.state.campaigns ?
            map(this.state.signups, (signup, index) => {
              return <SignupCard key={index} signup={signup} campaign={this.state.campaigns[signup.campaign_id]} />;
            })
          : <div className="spinner"></div> }
        </div>
      </div>
    )
  }
}

export default UserOverview;

@@ -363,19 +363,46 @@
 tate = %7B
+%0A      loading: false,%0A    
 %7D,%0A
-
 %0A    thi
@@ -470,42 +470,262 @@
 his.
-getUserActivity(this.props.user.id
+setState(%7B%0A      loading: true,%0A    %7D);%0A%0A    this.getUserActivity(this.props.user.id)%0A    .then(() =%3E %7B%0A      const ids = map(this.state.signups, 'campaign_id');%0A      this.getCampaigns(ids);%0A%0A      this.setState(%7B%0A        loading: false,%0A      %7D);%0A    %7D
 );%0A 
@@ -883,24 +883,38 @@
 ty(id) %7B%0A   
+ let request =
  this.api.ge
@@ -1040,241 +1040,107 @@
   %7D)
-.then(json =%3E this.setState(%7B%0A      signups: json.data%0A    %7D, () =%3E %7B%0A      // After we grab the signups, get the campaign objects for each signup.%0A      const ids = map(this.state.signups, 'campaign_id');%0A      this.getCampaigns(ids
+;%0A%0A    return request.then((result) =%3E %7B%0A      this.setState(%7B%0A        signups: result.data%0A      %7D
 );%0A 
@@ -1140,25 +1140,24 @@
   %7D);%0A    %7D)
-)
 ;%0A  %7D%0A%0A  /**
@@ -2127,19 +2127,73 @@
 ate.
-campaigns ?
+loading ?%0A            %3Cdiv className=%22spinner%22%3E%3C/div%3E%0A          :
 %0A   
@@ -2391,42 +2391,8 @@
     
- : %3Cdiv className=%22spinner%22%3E%3C/div%3E
  %7D%0A 
@@ -2401,24 +2401,25 @@
      %3C/div%3E%0A
+%0A
       %3C/div%3E

Refactor how we grab campaign data after signup data